1.ES6 let

ES6 新增了let命令,用来声明变量。

和var区别:

1、它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效;
2、var 存在变量提升,let不会存在变量提升;

案例:

  for(var i=0;i<=3;i++){
    console.log('i == '+ i);
  }
  console.log('i == '+ i); // 结果:i == 4,var变量作用域提升

  for(let j=0;j<=3;j++) {
    // let j = '123'; // 如果这里声明了let j,下面输出的是'123'
    console.log('j == ' + j);
  }
  console.log('j == ' + j); // j is not defined (let 块级作用域,代码块内有效)

案例2


<html>
  <head>
    <titile>let</title>
    <meta charset="utf-8" />
    <script>
      window.onload = function(){
        var inputEl = document.getElementsByTagName('input')
        for(var i = 0; i < inputEl.length; i++){
            inputEl[i].onclick = function(){
              alert(i);  // 结果都是3
            }
        }
      
        // 解决 var 定义i每次结果都是3的方案:
        for(var i = 0; i < inputEl.length; i++){
          // 使用函数代码块包裹 讲i作为函数参数传入
          (function(i){
             inputEl[i].onclick = function(){
              alert(i);  // 结果是1、2、3
            }
          })(i);
        }
      
        // 使用let解决
        for(let i = 0; i < inputEl.length; i++){
            inputEl[i].onclick = function(){
              alert(i);  // 结果是1、2、3
            }
        }
      }
    </script>
  </head>
  <body>
    <input type="button" value="按钮1"/>
    <input type="button" value="按钮2"/>
    <input type="button" value="按钮3"/>
  </body>
</html>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • let和const let命令 let用法类似var,但是所声明的变凉,只在let命令所在的代码块内有效 for循...
    李诺哦阅读 410评论 0 1
  • 基本都是从阮一峰大神的文档中摘录的重点,链接:http://es6.ruanyifeng.com/?search=...
    立的flag一直在倒阅读 367评论 0 0
  • ES5 只有两种声明变量的方法:var命令和function命令。ES6 添加let、const、import和c...
    我就是z阅读 907评论 0 1
  • 基本用法 let 和const是ES6新增的两种,声明变量的方法,用法与var 类似,但都有各自的特点和用途。 l...
    王阿王阅读 292评论 0 0
  • 1、let命令 基本用法 let用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内...
    开车去环游世界阅读 583评论 0 0

友情链接更多精彩内容