读阮老师的摘录笔记^_^

一，let／const

1.1 let

let所声明的变量，只在let命令所在的代码块内有效。
for循环还有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域。

for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);
}
// abc
// abc
// abc

var命令会发生”变量提升“现象，即变量可以在声明之前使用，值为undefined。let命令改变了语法行为，它所声明的变量一定要在声明后使用，否则报错，不存在变量提升。

暂时性死区（temporal dead zone，简称 TDZ）
只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。总之，在代码块内，使用let命令声明变量之前，该变量都是不可用的。

var tmp = 123;

if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}

“暂时性死区”也意味着typeof不再是一个百分之百安全的操作。

typeof x; // ReferenceError
let x;

作为比较，如果一个变量根本没有被声明，使用typeof反而不会报错。typeof undeclared_variable // "undefined" 所以，在没有let之前，typeof运算符是百分之百安全的，永远不会报错。现在这一点不成立了。
另外下面的代码也会报错，与var的行为不同。

// 不报错
var x = x;
// 报错
let x = x;

不允许重复声明
let不允许在相同作用域内，重复声明同一个变量。因此，不能在函数内部重新声明参数，除非在函数里面的子作用域声明。

1.2 块级作用域

ES6 允许块级作用域的任意嵌套。内层作用域可以定义和外层作用域同名的变量。块级作用域的出现，实际上使得获得广泛应用的立即执行函数表达式（IIFE）不再必要了。

ES5 规定，函数只能在顶层作用域和函数作用域之中声明，不能在块级作用域声明。但是，浏览器没有遵守这个规定，为了兼容以前的旧代码，还是支持在块级作用域之中声明函数。ES6 引入了块级作用域，明确允许在块级作用域之中声明函数，但是只在使用大括号的情况下成立，如果没有使用大括号，就会报错。ES6 规定，块级作用域之中，函数声明语句的行为类似于let，在块级作用域之外不可引用。

为了减轻因此产生的不兼容问题，ES6在附录B里面规定，浏览器的实现可以有自己的行为方式。注意这几条规定只对 ES6 的浏览器实现有效，其他环境的实现不用遵守，还是将块级作用域的函数声明当作let处理。

• 允许在块级作用域内声明函数。
• 函数声明类似于var，即会提升到全局作用域或函数作用域的头部。
• 同时，函数声明还会提升到所在的块级作用域的头部。

考虑到环境导致的行为差异太大，应该避免在块级作用域内声明函数。如果确实需要，也应该写成函数表达式，而不是函数声明语句。

注：这一部分例子看教程代码。

本质上，块级作用域是一个语句，将多个操作封装在一起，没有返回值。用do表达式（提案）可以使块级作用域可以变为表达式。

let x = do {
  let t = f();
  t * t + 1;
};

1.3 const命令

const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。

const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，不能控制指向值是否可变。因此，将一个对象声明为常量必须非常小心。

如果真的想将对象冻结，应该使用Object.freeze方法。除了将对象本身冻结，对象的属性也应该冻结。

ES5 只有两种声明变量的方法：var命令和function命令。ES6除了添加let和const命令，后面章节还会提到，另外两种声明变量的方法：import命令和class命令。所以，ES6 一共有6种声明变量的方法。

1.4 顶层对象的属性

ES5之中，顶层对象的属性与全局变量是等价的。

顶层对象的属性与全局变量挂钩，被认为是JavaScript语言最大的设计败笔之一。ES6为了改变这一点，一方面规定，为了保持兼容性，var命令和function命令声明的全局变量，依旧是顶层对象的属性；另一方面规定，let命令、const命令、class命令声明的全局变量，不属于顶层对象的属性。

1.5 global对象

ES5 的顶层对象，本身也是一个问题，因为它在各种实现里面是不统一的。

• 浏览器里面，顶层对象是window，但 Node 和 Web Worker 没有window。
• 浏览器和 Web Worker 里面，self也指向顶层对象，但是 Node 没有self。
• Node 里面，顶层对象是global，但其他环境都不支持。

同一段代码为了能够在各种环境，都能取到顶层对象，现在一般是使用this变量，但是有局限性。

• 全局环境中，this会返回顶层对象。但是，Node 模块和 ES6 模块中，this返回的是当前模块。
• 函数里面的this，如果函数不是作为对象的方法运行，而是单纯作为函数运行，this会指向顶层对象。但是，严格模式下，这时this会返回undefined。
• 不管是严格模式，还是普通模式，new Function('return this')()，总是会返回全局对象。但是，如果浏览器用了CSP（Content Security Policy，内容安全政策），那么eval、new Function这些方法都可能无法使用。

现在有一个提案，在语言标准的层面，引入global作为顶层对象。也就是说，在所有环境下，global都是存在的，都可以从它拿到顶层对象。垫片库system.global模拟了这个提案，可以在所有环境拿到global。

二，变量的解构（Destructuring）赋值

2.1 数组的解构赋值

ES6 允许写成下面这样let [a, b, c] = [1, 2, 3];。本质上，这种写法属于“模式匹配”。

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

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

另一种情况是不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组。这种情况下，解构依然可以成功。

let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4

如果等号的右边不是数组（或者严格地说，不是可遍历的结构，参见《Iterator》一章），那么将会报错。对于 Set 结构还有generator函数，也可以使用数组的解构赋值。事实上，只要某种数据结构具有 Iterator 接口，都可以采用数组形式的解构赋值。

解构赋值允许指定默认值。但是要注意条件：注意，ES6 内部使用严格相等运算符（===），判断一个位置是否有值；所以，如果一个数组成员不严格等于undefined，默认值是不会生效的。

let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x = 1] = [undefined]; x // 1
let [x = 1] = [null]; x // null

如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到的时候（等号那边是undefined），才会求值。默认值可以引用解构赋值的其他变量，但该变量必须已经声明。let [x = 1, y = x] = []; // x=1; y=1.

2.2 对象的解构赋值

对象的属性没有次序，变量必须与属性同名，才能取到正确的值。
如果变量名与属性名不一致，必须写成下面这样。
这实际上说明，对象的解构赋值是下面形式的简写（参见《对象的扩展》一章）。let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };
也就是说，对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

let { foo: baz } = { foo: "aaa", bar: "bbb" };
baz // "aaa"
foo // error: foo is not defined

上面代码中，foo是匹配的模式，baz才是变量。

与数组一样，解构也可以用于嵌套结构的对象。如果p也要作为变量赋值，可以写成下面这样。

let obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};

let { p, p: [x, { y }] } = obj;
x // "Hello"
y // "World"
p // ["Hello", {y: "World"}]

对象的解构也可以指定默认值。默认值生效的条件是，对象的属性值严格等于undefined。如果解构失败，变量的值等于undefined。如果解构模式是嵌套的对象，而且子对象所在的父属性不存在，那么将会报错。// 报错 let {foo: {bar}} = {baz: 'baz'};。

如果要将一个已经声明的变量用于解构赋值，必须非常小心。

// 错误的写法
let x;
{x} = {x: 1};
// SyntaxError: syntax error
// 正确的写法
let x;
({x} = {x: 1});

上面第一个代码的写法会报错，因为 JavaScript 引擎会将{x}理解成一个代码块，从而发生语法错误。然后代码将整个解构赋值语句，放在一个圆括号里面，就可以正确执行。

解构赋值允许等号左边的模式之中，不放置任何变量名。因此，可以写出非常古怪的赋值表达式。({} = [true, false]);

对象的解构赋值，可以很方便地将现有对象的方法，赋值到某个变量。

let { log, sin, cos } = Math;

由于数组本质是特殊的对象，因此可以对数组进行对象属性的解构。

2.3 字符串的解构赋值

字符串也可以解构赋值。这是因为字符串被转换成了一个类似数组的对象。const [a, b, c, d, e] = 'hello'; a // "h" b // "e" c // "l" d // "l" e // "o"。

类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。let {length : len} = 'hello'; len // 5。

2.4 数值和布尔值的解构赋值

解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。

let {toString: s} = 123;
s === Number.prototype.toString // true

解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错。

2.5 函数参数的解构赋值

函数参数的解构也可以使用默认值。undefined就会触发函数参数的默认值。

function add([x, y]){
  return x + y;
}
add([1, 2]); // 3

注意下面两种写法，第一种x和y等于默认值，第二种是为函数move的参数指定默认值。

//first
function move({x = 0, y = 0} = {}) {
  return [x, y];
}
move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]

//second
function move({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}
move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, undefined]
move({}); // [undefined, undefined]
move(); // [0, 0]

这个例子中是函数参数默认值可以与解构赋值的默认值，结合起来使用。

2.6 圆括号

建议只要有可能，就不要在模式中放置圆括号。

以下三种解构赋值不得使用圆括号：（a）变量声明语句 (b）函数参数 /其实也属于变量声明/（c）赋值语句的模式 /如([a]) = [5];/
这里不得使用是指整个或者一部分放置圆括号都不行。

可以使用圆括号的情况只有一种：赋值语句的非模式部分，可以使用圆括号。

[(b)] = [3]; // 正确
({ p: (d) } = {}); // 正确

上面三行语句都可以正确执行，因为首先它们都是赋值语句，而不是声明语句；其次它们的圆括号都不属于模式的一部分。第一行语句中，模式是取数组的第一个成员，跟圆括号无关；第二行语句中，模式是p，而不是d。

2.7 变量解构赋值的用途

（1）交换变量的值（2）从函数返回多个值（3）函数参数的定义（4）提取JSON数据（5）函数参数的默认值（6）遍历Map结构（7）输入模块的指定方法

在 es5 时代，如果想给一个函数默认值的话必须要这样写

var es5Fun = function (config) {
    var foo = config.foo || 'default foo'
    console.log(foo)
}

在 es6 有了结构赋值之后，传入的参数可以自动赋予默认值

const es6Fun = ({foo = 'default foo'} = {}) => {
    console.log(foo)
}