《ECMAScript6入门》读书笔记（一）

《ECMAScript6入门》读书笔记

《JavaScript高级程序设计》中学习了前八章，后面是一些 DOM 相关的知识，现在开始学习 ES6 语法。

《ECMAScript6入门》 作者：阮一峰。

第1章 ECMAScript6 简介

ES6 既是一个历史名词，也是一个泛指，含义是5.1版以后的 JavaScript 的下一代标准，涵盖了ES2015、ES2016、ES2017等等。

Babel 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码。
ESLint 用于静态检查代码的语法和风格；Mocha 则是一个测试框架。

第2章 let 和 const 命令

let 命令

let 命令只在其所在的代码块内有效。

{
  let a = 10;
  var b = 1;
}

console.log(a); // ReferenceError: a is not defined.
console.log(b); // 1

前面闭包中有说：闭包只能取得函数中任何变量的最后一个值。

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

使用 let 声明的变量仅在块级作用域内有效。

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

其实 i 仅在当前循环有效。每循环一次就是一个新的变量。

1.不存在变量提升：var 命令会发生“变量提升”现象，即变量可以在声明之前使用，值为 undefined；let 变量声明前使用会报错。

console.log(c); // ReferenceError: a is not defined.
console.log(d); // undefined

let c;
var d;

2.暂时性死区：在代码块内，使用 let 命令声明变量之前，该变量都是不可用的。

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

暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。

3.不允许重复声明：let 不允许在相同作用域内，重复声明同一个变量。也不能在函数内部重新声明参数。

块级作用域

ES5 只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景。
第一种场景，内层变量可能会覆盖外层变量；第二种场景，用来计数的循环变量泄露为全局变量。

let 实际上为 JavaScript 新增了块级作用域。

function f1() {
  let n = 5;
  if (true) {
    let n = 10;
  }
  console.log(n); // 5
}

内部代码块可以定义外层作用域的同名变量；外层作用域无法读取内层作用域的变量，也不受内层代码块的影响。

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

const 命令

const声明一个只读的常量。一旦声明，就必须立即初始化，常量的值不能改变。

const PI = 3.1415;
console.log(PI); // 3.1415
PI = 3; // TypeError: Assignment to constant variable.
const foo; // SyntaxError: Missing initializer in const declaration

const 的作用域与 let 命令相同：只在声明所在的块级作用域内有效。
const 命令声明的常量也是不提升；同样存在暂时性死区，只能在声明的位置后面使用；并且不可重复声明。

本质：const 其实是变量指向的内存地址不得改动。
对于简单类型的数据（数值、字符串、布尔值），等同于常量。但对于复合类型的数据（主要是对象和数组），变量保存的只是一个指针，const 只能保证这个指针是固定的。

const foo = {};
// 为 foo 添加一个属性，可以成功
foo.prop = 123;
foo.prop // 123
// 将 foo 指向另一个对象，就会报错
foo = {}; // TypeError: "foo" is read-only

如果真的想将对象冻结，应该使用 Object.freeze 方法。

const foo = Object.freeze({});
// 常规模式时，下面一行不起作用；
// 严格模式时，该行会报错
foo.prop = 123;

顶层对象的属性

顶层对象，在浏览器环境指的是window对象，在 Node 指的是global对象。ES5 中，顶层对象的属性与全局变量是等价的。

window.a = 1;
console.log(a); // 1
b = 2;
console.log(window.b); // 2

ES6 规定 let、const、class 命令声明的全局变量，不属于顶层对象的属性。

var a = 1;
// 如果在 Node 的 REPL 环境，可以写成 global.a
// 或者采用通用方法，写成 this.a
console.log(window.a) // 1
let b = 1;
console.log(window.b) // undefined

第3章 变量的解构赋值

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

数组的解构赋值

let [a, b, c] = [1, 2, 3];

上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。

// 右边比左边少，解构不成功，值为 undefined
let [bar, foo] = [1]; // undefined,undefined
// 右边比左边多，不完全解构
let [x, y] = [1, 2, 3]; //1,2

默认值：解构赋值允许指定默认值。

let [x, y = 'b'] = ['a']; // 'a','b'
let [x, y = 'b'] = ['a', undefined]; // 'a','b'
// 只有数组成员 严格等于 undefined 时，默认值才会生效
let [x = 1] = [null]; // null

对象的解构赋值

解构不仅可以用于数组，还可以用于对象。

let { bar, foo } = { foo: "aaa", bar: "bbb" }; //"aaa","bbb"
let { baz } = { foo: "aaa", bar: "bbb" }; // undefined

对象的属性没有次序；变量必须与属性同名，才能取到正确的值。

变量名与属性名不一致:真正被赋值的是后者，而不是前者。

let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
console.log(baz); // "aaa"

对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。

实际上，对象的解构时下面形式的简写：

let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" }; // 完整形式
let { foo     , bar      } = { foo: "aaa", bar: "bbb" }; // 简写形式

嵌套赋值：

let obj = {};
let arr = [];
({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true });
console.log(obj); // {prop:123}
console.log(arr); // [true]

对象的解构也可以指定默认值。同样严格等于 undefined 才生效。

let {x = 3} = {};
console.log(x); // 3
let {x: y = 3} = {};
console.log(y); // 3

如果要将一个已经声明的变量用于解构赋值，必须用括号包裹，不能让花括号处于行首。

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

字符串的解构赋值

字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。

// 字符串可以看做数组进行结构
const [a, b, c, d, e] = 'hello';    // a:"h", b:"e", c:"l", d:"l", e:"o",
// 字符串作为类数组对象，拥有length属性。
let {length : len} = 'hello';       // len:5

数值和布尔值的解构赋值

数值和布尔值也能进行解构，两者会先转为对象，剩下的就是匹配对象中的方法

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

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

// undefined和null不能转为对象，没有属性
let { prop: x } = undefined;     // TypeError
let { prop: y } = null;          // TypeError

函数参数的解构赋值

函数的参数也可以使用解构赋值。

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

函数 add() 的参数不是数组，而是[x,y] = [1,2]的解构，在函数内部，x和y可以直接访问，不需要索引。

函数参数的解构也可以使用默认值。

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]

下面代码是为函数 move() 的参数指定默认值。

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] - 无参数，默认值生效

圆括号问题

ES6 规定，但凡有可能产生歧义，就不能使用圆括号。以下3种情况下不能用圆括号：

1.变量声明语句

let [(a)] = [1];
let {x: (c)} = {};
let { o: ({ p: p }) } = { o: { p: 2 } };

2.函数参数

function f([(z)]) { return z; }
function f([z,(x)]) { return x; }

3.赋值语句的模式

[(b)] = [3]; // 正确，数组的解构赋值根据索引来，与括号无关
({ p: (d) } = {}); // 正确，p 是模式，但 d 不是模式。

用途

1.交换变量的值

let x = 1;
let y = 2;
[x, y] = [y, x];

2.从函数返回多个值

// 返回一个数组
function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();
// 返回一个对象
function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();

3.函数参数的定义

// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);
// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});

4.提取JSON数据

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};
let { id, status, data: number } = jsonData;
console.log(id, status, number);
// 42, "OK", [867, 5309]

5.函数参数的默认值

jQuery.ajax = function (url, {
  async = true,
  beforeSend = function () {},
  cache = true,
  complete = function () {},
  crossDomain = false,
  global = true,
  // ... more config
}) {
  // ... do stuff
};

指定参数的默认值，就避免了在函数体内部再写var foo = config.foo || 'default foo';这样的语句。

6.遍历 Map 结构

任何部署了Iterator接口的对象，都可以用for...of循环遍历。Map结构原生支持Iterator接口，配合变量的解构赋值，获取键名和键值就非常方便。

const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');

for (let [key, value] of map) {
  console.log(key + " is " + value);
}
// first is hello
// second is world

// 如果只想获取键名或键值，可以写成下面这样。
for (let [key] of map) { ... }// 获取键名
for (let [,value] of map) { ...}// 获取键值

7.输入模块的指定方法

加载模块时，往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。

const { SourceMapConsumer, SourceNode } = require("source-map");