• var和const和let的区别


    简述:

    1.前端的变量申明,可以用到var,ES6的const(衡量)/let(变量) 
    
    2.在ES5用的都是var,到ES6之后,也就是2015年开始出现const/let.
    

    var 不会报错,有声明提升,会显示undefined(一个变量未初始化);

         function show(falg){
     //	    var a;//**声明提升,初始化为undefined,函数体(作用域)的最前排
         	console.log(a);//undefined
        	if(falg){
        		var a ="111";
        		console.log(a);	//111
        	}else{
        		console.log(a);//undefined
        	}
        	
        }
        show(true);
        show(false);
        var a = "123";
        var a = "456";//覆盖,同名,let不会,要报错Identifier 'a' has already been declared(已被声明)。
        console.log(a);
    

    const/let访问范围

        function show(falg){                          // JavaScript引擎在扫描代码发现变量               TDZ暂时性死区(有let申明)
      	console.log(a);//报错: a is not defined              //a                              放入(未申明引用报错)       
        	if(falg){//在第134行和第137行的大括号之间,
        		let a="111";
        		console.log(a);	// 111                      //a                               移除(已申明引用移除)
        	}else{
        		console.log(a);//报错: a is not defined     //a                               放入(未申明引用报错)
        	}
        	
        }
        show(true);
        show(false);
    

    const/let不同作用于可同名,同一作用于不可同名;

        function show(falg){
        		let a="222";
    //    		let a="333";//Identifier 'a' has already been declared
      	console.log(a);// 222
        	if(falg){
        		let a="111";
        		console.log(a);	// 111
        	}else{
        		console.log(a);// a is not defined
        	}
        	
        }
        show(true);
    //    show(false);
    

    二.var 和 const/let 的区别

    1.const/let:声明变量,声明的是局部变量

    用途及区别:ES6新增了let命令,用来声明变量,类似于var ,但是声明的变量只在let所在的代码块的内部有效

    let不存在变量提升,这个要注意哟

    • 暂时性的死区(Temporal Dead Zone),简写为 TDZ:

    只要块级作用域里存在let命令,它所声明的变量就绑定这个区域,不在受外部的影响

    let 和 const 声明的变量不会被提升到作用域顶部,如果在声明之前访问这些变量,会导致报错:

    console.log(typeof value); // Uncaught ReferenceError: value is not defined
    let value = 1;
    

    复制代码这是因为 JavaScript 引擎在扫描代码发现变量声明时,要么将它们提升到作用域顶部(遇到 var 声明),要么将声明放在 TDZ 中(遇到 let 和 const 声明)。访问 TDZ 中的变量会触发运行时错误。只有执行过变量声明语句后,变量才会从 TDZ 中移出,然后方可访问。

    • 不允许重复声明

    内部的数据有了let声明过之后不允许重复声明

    for循环的处理

    var funcs = [];
    for (var i = 0; i < 3; i++) {
    //for (let i = 0; i < 3; i++) {
    	console.log(i);
      funcs[i] = (function(i){
          return function() {
              console.log(i);
          }
      }(i))
    }
    funcs[0](); // let输出的结果是0;var输出的结果是3
    

    for (var i = 0; i < 3; i++) {
         var c = "123";//一次123
    //   let c = "123";//三次123
    
         console.log(c);
    }
    

    使用let

    var funcs = [];
    for (let i = 0; i < 3; i++) {
      funcs[i] = function () {
          console.log(i);
      };
    }
    funcs[0](); // 0
    funcs[1](); // 1
    funcs[2](); // 2
    

    分解:

    (let i = 0) {
      funcs[0] = function() {
          console.log(i)
      };
    }
    
    (let i = 1) {
      funcs[1] = function() {
          console.log(i)
      };
    }
    
    (let i = 2) {
      funcs[2] = function() {
          console.log(i)
      };
    };
    
    let value = 1;
    console.log(window.value); //undefined
    

    再比较const和let的区别:

    1.const定义衡量:
    不可以重新赋值,但是可以给对象的属相重新赋值.

    const data = {
      value: 1
    }
    // 没有问题
    data.value = 2;
    data.num = 3;
     报错
    data = {}; // X   Uncaught TypeError: Assignment to constant variable.(分配恒定的变量)
    

    优点:const 意味着该标识符不能被重新赋值。
    让它在代码中的使用尽可能的清晰。使用一个变量对应代表一个东西.

    2.let 在定义后可能还会修改,可变,越来越多的被使用在循环和算法上面。

    ES6兼容性问题?bable转义成ES5,用例:

    需要安装 ES5的bable: npm install babel-core@5

    C:UsersAdministrator ode_modulesabel-core

    目录里面我们找到babel的浏览器版本browser.js(未压缩版)和browser.min.js(压缩版)
    我们把browser.min.js引入(文件位置的路径要确保正确)。并且设置第二个script标签的type为”text/babel”。

    babel转义具体实现:

    if (false) {
      let a = 1;
    //  var a=1;//如果直接将let改成var,直接编译成 var,打印的结果肯定是 undefined
      var _a = 1;//然而 Babel 很聪明,它编译成了内层变量名不一致
    }
    console.log(a); // Uncaught ReferenceError: a is not defined
    
    // const 的修改值时报错,以及重复声明报错怎么实现的呢?
    // 其实就是在编译的时候直接给你报错
  • 相关阅读:
    haslayout详解
    linux定时任务-cron
    linux安装SVN
    linux java配置
    KVM virsh常用命令篇
    KVM创建虚拟机
    KVM和远程管理工具virt-manager
    mysql 基础命令
    json在线工具
    mvn简单命令
  • 原文地址:https://www.cnblogs.com/missme-lina/p/10187995.html
Copyright © 2020-2023  润新知