ES6的心得

1.let、const与var的区别

(1) var 与function相同，在声明变量和函数时都会被提升

console.log(a); // undefined console.log(fun); // undefined var a = 520; function fun() { console.log("this is fun"); }

（2）let与const没有变量提升

console.log(a); // error console.log(b); // error let a = 520; const b = 250;

(3)let和const会将变量限制在所在代码块里

{ var a = 1; let b = 2; const c = 3; console.log(a, b, c); // 123 } console.log(a); // 1 console.log(b); // error console.log(c); // error // if for while switch 等代码块均适用 for (let i = 0; i < 5; i++) { setTimeout(() => { console.log(`第 ${i} 次`); // 0 1 2 3 4 i = "本次结束" console.log(i); // "本次结束" * 5 }); } /* 1. let可以将for中的i限制在每次的循环代码块中，使得setTimeout可以打印出正确i 2. 修改i的值不会影响for的继续循环，{}里面的作用域相当于for的子作用域 */

(4) const申明的变量不可修改

const a = 5; const arr = [1, 2, 3]; const obj = {name: "nick"}; arr[0] = 4; // [4, 2, 3] obj.name = "judy"; // {name: "judy"} a = 3; // error arr = [1, 2] // error obj = {name: "judy"}; // error

 

2. 数组和对象解构

(1) 数组解构

// 对应取出 let [a, b, c] = ["aa", "bb", "cc"]; // a="aa" b="bb" c="cc" let [d] = ["aa", "bb", "cc"]; // d="aa" let [d, , f] = ["aa", "bb", "cc"]; // d="aa" f="cc" // 嵌套解构 let [foo, [[bar], baz]] = [1, [[2], 3]]; // foo=1 bar=2 baz=3 let [a, [b], d] = [1, [2, 3], 4];// a=1 b=2 c=4 // ...填充 let [head, ...tail] = [1, 2, 3, 4]; // head=1 tail=[2, 3, 4] let [x, y, ...z] = ['a']; // x="a" y=undefined z=[] // 默认值 let [a, b = "bb"] = ["aa"]; // a="aa" b="bb" let [a = "aa", b = "bb"] = [null, undefined]; // a=null b="bb" // 只有undefined值会使用默认值 // 用于变量交换 let a = 1; let b = 2; [b, a] = [a, b]; // a=2 b=1

 

注：

数组解构即给“左边数组”每个index位置的变量 赋 “右边数组”对应index位置的值由于是根据index赋值的，所以顺序很关键

(2) 对象解构

// 对应取出 let {aa, bb} = {aa: "aa", bb: "bb"}; aa; // "aa" bb; // "bb" ({bb, aa} = {aa: "aa", bb: "bb"}); // aa bb已存在，不用再次申明，用()防止左边的{}被当作代码块处理 aa; // "aa" bb; // "bb" // 取出内置对象的方法 let {sin, cos} = Math; sin(0); // 0 sin(Math.PI / 2); // 1 let {log} = console; log("hello judy!"); // hello judy! // 将值赋给不同名变量 let {aa: cc, bb: dd} = {aa: "aa", bb: "bb"}; cc; // "aa" dd; // "bb" // 同名变量赋值相当于下面的简写 ({aa: aa, bb: bb} = {aa: "aa", bb: "bb"}";

注：

对象解构即给“左边对象”每个key对应的值作为变量 赋 “右边对象”对应key的值；“左边对象”key默认有同名值，所以可以不写由于是更具key赋值的，所以顺序无关

(3) 复合解构

let {"1": name} = [22, "nick"]; // name="nick"

 

强烈推进：阮一峰 ES6入门