精华内容
下载资源
问答
  • let和var的区别

    2021-04-10 11:48:22
    介绍ES6中引入的let和var的区别

    很多人搞不懂Let和Var变量的区别,现总结一下。

    let是在ES6中引入的

    ES6 新增了let命令,用来声明局部变量;

    它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效,而且有暂时性死区的约束。

    先看个var的常见变量提升的面试题目:

    var a = 99;            // 全局变量a
    f();                   // f是函数,虽然定义在调用的后面,但是函数声明会提升到作用域的顶部。 
    console.log(a);        // a=>99,  此时是全局变量的a
    function f() {
      console.log(a);      // 当前的a变量是下面变量a声明提升后,默认值undefined
      var a = 10;
      console.log(a);      // a => 10
    }
    

    // 输出结果:

    undefined
    10
    99
    

    ES6可以用let定义块级作用域变量;

    在ES6之前,我们都是用var来声明变量,而且JS只有函数作用域和全局作用域,没有块级作用域,所以{}限定不了var声明变量的访问范围;

    例如:

    { 
      var i = 9;
    } 
    console.log(i);  // 9
    

    ES6新增的let,可以声明块级作用域的变量。

    { 
      let i = 9;     // i变量只在 花括号内有效!!!
    } 
    console.log(i);  // Uncaught ReferenceError: i is not defined
    

    let 配合for循环的独特应用

    let非常适合用于 for循环内部的块级作用域;

    JS中的for循环体比较特殊,每次执行都是一个全新的独立的块作用域,用let声明的变量传入到 for循环体的作用域后,不会发生改变,不受外界的影响;

    看一个常见的面试题目:

    for (var i = 0; i <10; i++) {  
      setTimeout(function() {  // 同步注册回调函数到 异步的 宏任务队列。
        console.log(i);        // 执行此代码时,同步代码for循环已经执行完成
      }, 0);
    }
    // 输出结果
    1010// 这里面的知识点: JS的事件循环机制,setTimeout的机制等
    

    如果把 var改成 let声明:

    // i虽然在全局作用域声明,但是在for循环体局部作用域中使用的时候,变量会被固定,不受外界干扰。
    for (let i = 0; i < 10; i++) { 
      setTimeout(function() {
        console.log(i);    //  i 是循环体内局部作用域,不受外界影响。
      }, 0);
    }
    // 输出结果:
    0  1  2  3  4  5  6  7  8 9
    

    let没有变量提升与暂时性死区

    用let声明的变量,不存在变量提升。而且要求必须 等let声明语句执行完之后,变量才能使用,不然会报Uncaught ReferenceError错误。

    例如:

    console.log(aicoder);    // 错误:Uncaught ReferenceError ...
    let aicoder = 'aicoder.com';
    // 这里就可以安全使用aicoder
    

    ES6 明确规定,如果区块中存在let和const命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错。

    总之,在代码块内,使用let命令声明变量之前,该变量都是不可用的。这在语法上,称为暂时性死区(temporal dead zone,简称 TDZ)。

    let变量不能重复声明

    let不允许在相同作用域内,重复声明同一个变量。否则报错:Uncaught SyntaxError: Identifier ‘XXX’ has already been declared

    例如:

    let a = 0;
    let a = 'sss';
    // Uncaught SyntaxError: Identifier 'a' has already been declared
    

    总结

    ES6的 let 让 js真正拥有了块级作用域,也是向这更安全更规范的路走,虽然加了很多约束,但是都是为了让我们更安全的使用和写代码。

    展开全文
  • let var 的区别

    2019-09-26 16:53:38
    最近很多前端的朋友去面试被问到let和var的区别,其实阮一峰老师的ES6中已经很详细介绍了let的用法和var的区别。我简单总结一下,以便各位以后面试中使用。 ES6 新增了let命令,用来声明局部变量。它的用法类似于var...

    let 和 var 的区别

    最近很多前端的朋友去面试被问到let和var的区别,其实阮一峰老师的ES6中已经很详细介绍了let的用法和var的区别。我简单总结一下,以便各位以后面试中使用。

    ES6 新增了let命令,用来声明局部变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效,而且有暂时性死区的约束。

    先看个var的常见变量提升的面试题目:

    题目1:
    var a = 99;            // 全局变量a
    f();                   // f是函数,虽然定义在调用的后面,但是函数声明会提升到作用域的顶部。 
    console.log(a);        // a=>99,  此时是全局变量的a
    function f() {
      console.log(a);      // 当前的a变量是下面变量a声明提升后,默认值undefined
      var a = 10;
      console.log(a);      // a => 10
    }
    
    // 输出结果:
    undefined
    10
    99
    
    

    ES6可以用let定义块级作用域变量

    在ES6之前,我们都是用var来声明变量,而且JS只有函数作用域和全局作用域,没有块级作用域,所以{}限定不了var声明变量的访问范围。
    例如:

    { 
      var i = 9;
    } 
    console.log(i);  // 9
    
    

    ES6新增的let,可以声明块级作用域的变量。

    { 
      let i = 9;     // i变量只在 花括号内有效!!!
    } 
    console.log(i);  // Uncaught ReferenceError: i is not defined
    
    

    let 配合for循环的独特应用

    let非常适合用于 for循环内部的块级作用域。JS中的for循环体比较特殊,每次执行都是一个全新的独立的块作用域,用let声明的变量传入到 for循环体的作用域后,不会发生改变,不受外界的影响。看一个常见的面试题目:

    for (var i = 0; i <10; i++) {  
      setTimeout(function() {  // 同步注册回调函数到 异步的 宏任务队列。
        console.log(i);        // 执行此代码时,同步代码for循环已经执行完成
      }, 0);
    }
    // 输出结果
    10   共10个
    // 这里面的知识点: JS的事件循环机制,setTimeout的机制等
    
    

    如果把 var改成 let声明:

    // i虽然在全局作用域声明,但是在for循环体局部作用域中使用的时候,变量会被固定,不受外界干扰。
    for (let i = 0; i < 10; i++) { 
      setTimeout(function() {
        console.log(i);    //  i 是循环体内局部作用域,不受外界影响。
      }, 0);
    }
    // 输出结果:
    0  1  2  3  4  5  6  7  8 9
    
    

    let没有变量提升与暂时性死区

    let声明的变量,不存在变量提升。而且要求必须 等let声明语句执行完之后,变量才能使用,不然会报Uncaught ReferenceError错误。
    例如:

    console.log(aicoder);    // 错误:Uncaught ReferenceError ...
    let aicoder = 'aicoder.com';
    // 这里就可以安全使用aicoder
    
    

    ES6 明确规定,如果区块中存在let和const命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错。
    总之,在代码块内,使用let命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称 TDZ)。

    let变量不能重复声明

    let不允许在相同作用域内,重复声明同一个变量。否则报错:Uncaught SyntaxError: Identifier 'XXX' has already been declared

    例如:

    let a = 0;
    let a = 'sss';
    // Uncaught SyntaxError: Identifier 'a' has already been declared
    
    

    总结

    var 存在变量提升 ,内部会收外部变量影响 ; 可以在同一个相同作用域,多次声明同一变量,以最近的声明为准。。。。(看清 是最近 不是最后)

    let 不存在变量提升,一个相同作用域只能声明一次, 存在类似于块级作用域 的作用域。

    ES6的let让js真正拥有了块级作用域,也是向这更安全更规范的路走,虽然加了很多约束,但是都是为了让我们更安全的使用和写代码。

    展开全文
  • let var的区别

    2019-01-07 07:37:27
    let和var的区别 var = []; for(var i = 0;i<10;i++){ a[i]= function(){ console.log(i); } } arr[6](); //10 复制代码上面代码中,变量i是var申明的,在全局范围内都有效,所以全局只有一个变量i,每一次循环...

    let和var的区别

    var = [];
    for(var i = 0;i<10;i++){
        a[i]= function(){
            console.log(i);
        }
    }
    arr[6]();   //10
    复制代码

    上面代码中,变量i是var申明的,在全局范围内都有效,所以全局只有一个变量i,每一次循环,变量的值都会发生改变,而循环内被赋值给数组a的function在运行时,会通过闭包读到这同一个变量i,导致最后一轮输出最后一轮i的值,就是10

    而如果使用let,声明的变量仅在块级作用域内有效,最后输出的是6

    var = [];
    for(let i = 0;i<10;i++){
        a[i]= function(){
            console.log(i);
        }
    }
    arr[6]();   //6
    复制代码

    上面代码中,变量i是let声明的,当前的i只在本轮循环中有效,所以每一次循环中的i都是一个新的变量,所以最后输出的是6,。 另外,for循环还有一个特别之处,就是循环语句部分是一个父作用域,而循环内部是一个单独子作用域。

    for(let i = 0;i<3;i++){
        let i ='abc';
        console.log(i)
    }
    //abc
    //abc
    //abc
    复制代码

    不存在变量提升

    var 命令会发生“变量提升”现象,即变量可以在声明之前使用,值为underfined。为了纠正这种现象,let命令改变了语法行为,他所声明的变量一定要在声明后使用,否则报错

    //var情况
    console.log(foo);   //输出underfined
    var foo;
    
    //let情况
    console.log(bar);    //报错
    let bar ;
    复制代码

    暂时性死区

    只要块级作用域内存在let命令,他所声明的变量就绑定(binding)这个区域,不在受外部的影响。

    var tmp = 123;
    if(true){
        tmp = 'abc';   //报错
        let tmp;
    }
    复制代码

    上面代码中,存在全局变量tmp,但是块级作用域内let又声明了一个局部变量tmp,导致后者绑定这个块级作用域,所以在let声明变量前,对tmp赋值会报错。

    ES6明确规定,如果区块中存在let和const变量,从一开始就形成了封闭作用域,凡是在声明之前使用这些变量,就会报错。

    总之,在代码块内,使用let命令声明变量之前,该变量都是不可用的。这在语法上叫做“暂时性死区”

    ES6规定暂时性死区和let、const语句不存在变量提升

    不允许重复声明

    let不允许在相同作用域内重复声明同一个变量

    //报错
    function(){
        let a =10;
        var a =1;
    }
    
    //报错
    function(){
        let a = 10;
        let a = 1;
    }
    复制代码

    因此,不能在函数内部重新声明参数

    function func(arg){
       let arg ;   //报错
    ]
    
    function func(arg){
       {
        let arg;  //不报错
       }
    }
    复制代码

    块级作用域

    ES5只有全局作用域和函数作用域,没有块级作用域

    第一种场景,内层变量可能会覆盖外层变量

    var tmp = new Data();
    
    function f(){
        console.log(tmp);
        if(false){
            var tmp = 'hello world'
        }
    }
    f();   //undefined
    复制代码

    上面代码的意思是,if代码块的外部使用外层的tmp变量,内层使用内层的tmp变量。但是,函数f执行后,输出结果为undefined,原因在于变量提升,导致内层的tmp变量覆盖了外层的tmp变量

    第二种场景,用来计数的循环变量泄漏为全局变量

    var s = 'hello';
    for(var i = 0;i<s.length;i++){
        console.log(s[i]);
    }
    console.log(i);   //5
    复制代码

    上面代码中,变量i只用来控制循环,但是循环结束后,它并没有消失,泄漏成了全局变量

    ES6的块级作用域

    let实际上是为javascript新增了块级作用域

    function f1(){
        let n = 5;
        if(true){
            let n = 10
        }
        console.loga(n)   //5
    }
    复制代码

    上面的函数有两个代码块,都声明了变量n,运行后输出5,。这表明外层代码块不受内层代码块的影响。如果使用var定义变量n,最后输出值就是10. ES6允许块级作用域的任意嵌套

    {{{{let insane = 'hello world'}}}}
    复制代码

    上面代码使用了四层的块级作用域。外层作用域无法读取内层作用域的变量

    {{{
        {let insane = 'hello world'}
        console.log(insane); //报错
    }}}
    复制代码

    内层作用域可以定义外层作用域的同名变量

    {{{
        let insane = 'hello world'
        {let insane = 'hello world'}
    }}}
    复制代码

    块级作用域的出现,实际上使得获得广泛应用的立即执行函数不再必要了

    块级作用域与函数声明

    function f(){
        console.log('i am outside')
    }
    (function(){
        if(false){
            functon f(){
                console.log('i an inside')
            }
        }
        f();
    }())
    复制代码

    上面代码中,会得到“i am inside”,ES6就完全不一样了,会得到“i am outside”.因为块级作用域内声明的函数类似let,对作用域之外没有影响。

    另外,还有一个需要注意的地方,考虑到环境导致的行为差异太大,应该避免在块级作用域内声明函数,如果确实需要,也应该写成函数表达式,而不是函数声明。

    //函数声明语句
    {
        let a = 'secret';
        function f(){
            return a;
        }
    }
    //函数表达式
    {
        let a = 'secret';
        let f = function(){
            return a;
        }
    }
    复制代码

    do表达式

    本质上,块级作用域是一个语句,将多个操作封装在一起,没有返回值

    {
        let f = f();
        t = t*t+1;
    }
    复制代码

    上面代码中,块级作用域将两个语句分装在一起。但是,在块级作用域以外,没有办法得到t的值,因为块级作用域不返回值,除非t是全局变量。

    do表达式,可以返回值

    let x = do{
       let t = f();
       t * t + 1;
    ]
    复制代码

    上面代码中,变量x会得到整个块级作用域的返回值

    const命令

    const命令声明一个只读的常量,一旦声明,常亮的值就不能改变

    const a = 200;
    a     //200
    
    a =600;   //报错
    复制代码

    const声明的变量不得改变值,这意味着,const一旦声明变量,就必须立即初始化,不能留到以后赋值

    const foo  
    //报错
    复制代码

    const的作用域与let相同,只在声明的块级作用域内有效

    const命令声明的常量也是不提升,同样存在暂时性死区,只能在声明的位置后面使用

    const声明的常量,也与let一样不可重复声明

    var message = 'hello';
    let age = 25;
    
    //以下两行都会报错
    const message = 'goodbye';
    const age = 30;
    复制代码

    常量foo储存的是一个地址,这个地址指向一个对象,不可变的是这个地址,即不能把foo指向另一个地址,但对象本身是可变的,所以依然可以为其添加新属性

    const foo();
    //为foo添加一个属性,可以添加
    foo.prop = 123;
    foo.prop   //123
    
    //将foo指向另一个对象,就会报错
    foo ={]     //报错
    复制代码

    下面是另一个例子

    const a = [];
    a.push('hello')   //可执行
    a.length = 0;     //可执行
    a = ['dave']      //报错
    复制代码

    上面代码中,常量a是一个数组,这个数组本身是可写的,但是如果将另一个数组赋值给a,就会报错

    如果真的想将对象冻结,应该使用 Object.freeze方法

    const foo = Object.freeze({});
    //常规模式下,下面一行不起作用
    //严格模式下,改行会报错
    foo.prop = 123;
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    复制代码

    转载于:https://juejin.im/post/5c32cc41e51d4551363f9796

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,882
精华内容 1,152
关键字:

let和var的区别