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的值！

3：解构赋值学习

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

以前，为变量赋值，只能直接指定值：let a = 1;let b = 2;let c = 3；ES6允许写成这样：let [a, b, c] = [1, 2, 3]；上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。

本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。

let [foo, [[bar], baz]] = [1, [[2], 3]];foo // 1bar // 2baz // 3let [ , , third] = ["foo", "bar", "baz"];third // "baz"let [x, , y] = [1, 2, 3];x // 1y // 3let [head, ...tail] = [1, 2, 3, 4];head // 1tail // [2, 3, 4]let [x, y, ...z] = ['a'];x // "a"y // undefinedz // []

如果解构不成功，变量的值就等于undefined

let [foo] = [];let [bar, foo] = [1];

以上两种情况都属于解构不成功，foo的值都会等于undefined

 

转载于:https://www.cnblogs.com/dcy521/p/11296388.html