JavaScript--ES6学习笔记

注：学习一下JavaScript的ES6语法！每天总结学习内容！

一：基础语法学习

1：ES6 新增了let和const命令，用来声明变量和常量。它的用法类似于var，但是let所声明的变量，只在let命令所在的代码块内有效，而我们平时用的var是全局都有效，看以下代码：

$(document).ready(function() {
      {
          var a = 1;
          let b = 2;
      }
      console.log(a); //打印：1
      console.log(b); //报错：b is not defined
  })

注：上面代码在代码块之中，分别用var和let声明了两个变量。然后在代码块之外调用这两个变量，结果let声明的变量报错，var声明的变量返回了正确的值。这表明，let声明的变量只在它所在的代码块有效。

2：关于let和var的经典问题（在循环内用var和let声明的区别）首先定义三个按钮如下：

<input type="button" value="按钮0" />
<input type="button" value="按钮1" />
<input type="button" value="按钮2" />

注：我想做的事情很简单，就是点击按钮0弹出0，点击按钮1弹出1，点击按钮2就弹出2，就这么简单！然后就直接写下以下JavaScript代码：

$(document).ready(function() {
                let btnAll = $(":input[type='button']"); //获取所有的按钮
                for (var i = 0; i < btnAll.length; i++) {
                    btnAll[i].onclick = function() {
                        alert(i);
                    }
                }
            })

想的还是非常完美的！但三次弹出的都是3，理想很美好，现实很残酷啊............................................................................................................

但是将var改为let就得到我想要的结果！为什么会这样呢？再来说一下var和let吧：

ES5中的var：它的作用域是函数级别的，也就是在函数里定义一个i，在里边任何一个地方都可以访问，甭管循环里边还是外边，都可以访问

ES6中的let：它是块级作用就级别的，也就是在当前代码块内有效，块简单就可以理解为一对花括号

个人理解：在上边js代码中，整个ready空间中就一个i，i的值一旦改变，那就全部改变，也就是说无论循环多少次，都是一个i的值在发生改变，反而用let为什么就可以呢？因为let是块级的，也就是说，它只在for循环内有效，每次循环，都有一个新的i产生，循环多少次，就有多少新的i产生！所以：用var声明，永远只有一个i，最后弹出的就是循环完i最后的值；用let声明，每次弹出的都是新的i，值就是当前循环i的值！

明天接着学习，接着补充！

JavaScript--ES6学习笔记

猜你喜欢