zoukankan      html  css  js  c++  java
  • ES6-let声明变量

    在es6中除了var还可以用let申明变量,并且建议使用let而不要再使用var,两者有以下区别:

    1.let不能重复声明变量

    var name = 'tom';

    var name = 'jack';

    console.log(name);

    输出:jack。不会报错

    let name = 'tom';

    let name = 'jack';

    console.log(name);

    报错,Identifier 'name' has already been declared

    2.let申明的变量不会做预处理变量提升

    console.log(name);

    var name = 'tom';

    输出:undefined。不会报错

    console.log(name);

    let name = 'tom';

    报错,Cannot access 'name' before initialization

    3.let只在块级作用域内有效

    if(true){

      var name = 'tom';

    }

    console.log(name );

    输出:tom

    if(true){

      let name = 'tom';

    }

    console.log(name );

    报错,name is not defined

    这个特性可以在循环遍历加监听的时候十分好用。比如这样一个需求,有n个button,在点击button的时候输出这个button的下标是第几个

    当使用var的时候:

    let btns = document.getElementByTagName('button');

    for(var i =0;i<btns.length;i++){

      var btn = btn[i];

      btn.onclick=function(){

        alert(i);

      }

    }

    输出:不管点击那个button输出的都是最后一个button的下标,因为for循环是在我们点击按钮之前就已经全部执行完了的,而使用var没有块级作用域,也就是是说所有的i都是一个,它的值就是最后一次循环i的值。以前解决这个问题是使用闭包的方式:

    let btns = document.getElementByTagName('button');

    for(var i =0;i<btns.length;i++){

      var btn = btn[i];

      function(i){

        btn.onClick=function(){

          alert(i);

        }

      }(i);

    }

    这种方式的原理是,每一次循环都会生成一个函数,而在btn.onClick=function(){alert(i);}声明的回调函数里面使用了外部函数的变量i所有产生了闭包,将当前的i保存起来,在后面回调函数出发的时候打印的就是当前闭包中保存的i;

    如果用let来申明i则可以简单解决这个问题:

    let btns = document.getElementByTagName('button');

    for(let i =0;i<btns.length;i++){

      var btn = btn[i];

      btn.onclick=function(){

        alert(i);

      }

    }

    因为每次循环都有一次块级作用域产生,而用let声明的变量只能在当前的块级作用域中使用,所以最后回调的时候使用的i就是当前循环次数下的块级作用域下的i,就不会向var声明一样,使用的都是同一个i了。

  • 相关阅读:
    http 协议相关问题
    网卡中断及多队列
    Visual Studio Code 配置C/C++环境
    C++通用框架和库
    命令行的艺术
    NetScaler Logs Collection Guide
    C++性能榨汁机之无锁编程
    Codeforces 839E Mother of Dragons【__builtin_popcount()的使用】
    C/C++中__builtin_popcount()的使用及原理
    Codeforces 839D Winter is here【数学:容斥原理】
  • 原文地址:https://www.cnblogs.com/maycpou/p/12325586.html
Copyright © 2011-2022 走看看