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了。

  • 相关阅读:
    1058 A+B in Hogwarts (20)
    1036. Boys vs Girls (25)
    1035 Password (20)
    1027 Colors in Mars (20)
    1009. Product of Polynomials (25)
    1006. Sign In and Sign Out
    1005 Spell It Right (20)
    1046 Shortest Distance (20)
    ViewPager页面滑动,滑动到最后一页,再往后滑动则执行一个事件
    IIS7.0上传文件限制的解决方法
  • 原文地址:https://www.cnblogs.com/maycpou/p/12325586.html
Copyright © 2011-2022 走看看