Comment on page
02 语法的扩展
ES6 对语法进行了大量扩展，包括且不限于字符串、正则、数值、函数、数组、对象的扩展等，此篇总结 ES6 新增的一些常用的新语法，一起来学习新姿势。
ES6 加强了对 Unicode 的支持，并且扩展了字符串对象。
JavaScript 内部，字符以 UTF-16 的格式储存， 每个字符固定为 2 个字节。但只限于码点在
\u0000~\uFFFF 之间的字符。对于 Unicode 码点大于 0xFFFF 的字符，需要 2 个字符，也就是 4 个字节存储。同时如果在 \u 后面码点大于 0xFFFF，需要加上花括号才能正确显示，如
\u{20BB7}。// 大括号表示法与 UTF-16 等价
'\u{1F680}' === '\uD83D\uDE80'
有了这种表示法之后，JavaScript 共有 6 种方法可以表示一个字符。
'z' === 'z' // true
'\172' === 'z' // true
'\x7A' === 'z' // true
'\u007A' === 'z' // true
'\u{7A}' === 'z' // true
对于 4 个字节的字符，JavaScript 不能正确处理，字符串长度会被误判为 2，而且 charAt 方法无法读取整个字符，charCodeAt 方法只能分别返回前 2 个字节和后 2 个字节的值。
ES6 提供了 codePointAt 方法，能够正确处理 4 个字节储存的字符，返回一个字符的码点。
codePointAt 方法是测试一个字符是由 2 个字节还是 4 个字节组成的最简单方法。
function is32Bit(c) {
return c.codePointAt(0) > 0xffff
}
于此同时，ES6 提供了 String.fromCodePoint 方法，作用同 codePointAt 相反，新方法可以识别大于 0xFFFF 的字符，弥补了 String.fromCharCode 方法的不足。
String.fromCodePoint(0x20bb7)
String.fromCodePoint(0x78, 0x1f680, 0x79) === 'x\uD83D\uDE80y' // true
上面的代码中，如果 String.fromCharCode 方法有多个参数，则它们会被合并成一个字符串返回。
注意：fromCodePoint 方法定义在 String 对象上，而 codePointAt 方法定义在字符串的实例对象上。
ES6 为字符串添加了遍历器接口，使得字符串可以由 for...of 循环遍历。同时，遍历器的最大优点是可以识别大于 0xFFFF 的码点，传统的 for 循环无法识别这样的码点。
var text = String.fromCodePoint(0x20bb7)
for (let i of text) {
console.log(i) // '𠮷'
}
ES6 新增 3 种新方法用来判断一个字符串是否包含在另一个字符串中。
- includes()：返回布尔值，表示是否找到了参数字符串。
- startsWith()：返回布尔值，表示参数字符串是否在源字符串的头部。
- endsWith()：返回布尔值，表示参数字符串是否在源字符串的尾部。
注意：使用第二个参数 n 时，endsWith 针对前 n 个字符，而其他两个方法针对从第 n 个位置到字符串结束位置之间的字符。
repeat 方法返回一个新字符串，表示将原字符串重复 n 次。如果参数是字符串，则会先转换成数字。
'na'.repeat('3') // 'nanana'
这两个方法用于字符串长度补全。padStart() 用于头部补全，padEnd() 用于尾部补全。如果省略第二个参数，则会用空格来补全。
'x'.padStart(5, 'ab') // 'ababx'
'x'.padEnd(5, 'ab') // 'xabab'
'x'.padStart(4) // ' x'
padStart 的常见用途是为数值补全指定位数和提示字符串格式。
'1'.padStart(10, '0') // '0000000001'
'09-12'.padStart(10, 'YYYY-MM-DD') // 'YYYY-09-12'
模板字符串可以紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能（tagged template）。
标签模板是函数调用的一种特殊形式。整个表达式的返回值就是函数处理模板字符串后的返回值。
var a = 5
var b = 10
tag`Hello ${a + b} world ${a * b}`
// 等同于 tag(['Hello ', ' world ', ''], 15, 50);
标签函数的第一个参数是数组，数组成员是模板字符串中那些没有变量替换的部分，变量替换只发生在数组的成员之间。
ES6 为正则添加了新的修饰符：u 修饰符、y 修饰符、s 修饰符和 sticky 属性、flags 属性。关于这部分内容，等深入学习正则时再做总结。
JavaScript 语言的正则表达式只支持先行断言（lookahead）和先行否定断言（negative lookahead），不支持后行断言（lookbehind）和后行否定断言（negative lookbehind）。目前，有一个引入后行断言提案被提出，其中 V8 引擎已经支持。
“先行断言”指的是，x 只有在 y 前面才匹配，必须写成
/x(?=y)/ 的形式。比如，只匹配百分号之前的数字，要写成 /\d+(?=%)/。“先行否定断言”指的是，x 只有不在 y 前面才匹配，必须写成 /x(?!y)/ 的形式。比如，只匹配不在百分号之前的数字，要写成 /\d+(?!%)/。;/\d+(?=%)/.exec('100% of US presidents have been male') // ["100"]
;/\d+(?!%)/.exec('that’s all 44 of them') // ["44"]
“后行断言”正好与“先行断言”相反，x 只有在 y 后面才匹配，必须写成
/(?<=y)x/ 的形式，比如，只匹配美元符号之后的数字，要写成 /(?<=\$)\d+/。“后行否定断言”则与“先行否定断言”相反，x 只有不在 y 后面才匹配，必须写成 /(?<!y)x/ 的形式。比如，只匹配不在美元符号后面的数字，要写成 /(?<!\$)\d+/。;/(?<=\$)\d+/.exec('Benjamin Franklin is on the $100 bill') // ["100"]
;/(?<!\$)\d+/.exec('it’s is worth about €90') // ["90"]
“先行断言”和“后行断言”中括号部分都是不计入返回结果的：
const RE_DOLLAR_PREFIX = /(?<=\$)foo/g
'$foo %foo foo'.replace(RE_DOLLAR_PREFIX, 'bar') // '$bar %foo foo'
“后行断言”的实现需要先匹配
/(?<=y)x/ 的 x，然后再回到左边匹配 y 的部分。这种“先右后左”的执行顺序与所有其他正则操作相反，导致了一些不符合预期的结果。;/(?<=(\d+)(\d+))$/.exec('1053') // ["", "1", "053"]
;/^(\d+)(\d+)$/.exec('1053') // ["1053", "105", "3"]
其次，“后行断言”的反斜杠引用也与通常的顺序相反，必须放在对应的括号之前。
;/(?<=(o)d\1)r/.exec('hodor') // null
;/(?<=\1d(o))r/.exec('hodor') // ["r", "o"]
// 完整输出：["r", "o", index: 4, input: "hodor"]
上面的代码中，后行断言的反斜杠引用（\1）必须放在前面才可以，放在括号的后面就不会得到匹配结果。因为后行断言是先从左到右扫描，发现匹配以后再回过头从右到左完成反斜杠引用。
exec() 方法用于检索字符串中的正则表达式的匹配。如果 exec() 找到了匹配的文本，则返回一个结果数组。否则，返回 null。此数组的第 0 个元素是与正则表达式相匹配的文本，第 1 个元素是与 RegExpObject 的第 1 个子表达式相匹配的文本（如果有的话），以此类推。
除了数组元素和 length 属性之外，exec() 方法还返回两个属性。index 属性声明的是匹配文本的第一个字符的位置。input 属性则存放的是被检索的字符串 string。
在调用非全局的 RegExp 对象的 exec() 方法时，返回的数组与调用方法 String.match() 返回的数组是相同的。
但是，当 RegExpObject 是一个全局正则表达式时，exec() 的行为就稍微复杂一些。它会在 RegExpObject 的 lastIndex 属性指定的字符处开始检索字符串 string。当 exec() 找到了与表达式相匹配的文本时，在匹配后，它将把 RegExpObject 的 lastIndex 属性设置为匹配文本的最后一个字符的下一个位置。这就是说，可以通过反复调用 exec() 方法来遍历字符串中的所有匹配文本。当 exec() 再也找不到匹配的文本时，它将返回 null，并把 lastIndex 属性重置为 0。
ES6 提供了二进制和八进制数值的新写法，分别用前缀 0b（或 0B）和 0o（或 0O）表示。
如果要将使用 0b 和 0o 前缀的字符串数值转为十进制数值，要使用 Number 方法。
Number('0b111') // 7
Number('0o10') // 8
ES6 在 Number 对象上新提供了 Number.isFinite() 和 Number.isNaN() 两个方法。
Number.isFinite() 用来检查一个数值是否为有限的（finite）。
Number.isNaN() 用来检查一个值是否为 NaN。
这两个新方法与传统的全局方法 isFinite() 和 isNaN() 的区别在于，传统方法先调用 Number() 将非数值转为数值，再进行判断，而新方法只对数值有效，对于非数值一律返回 false。
这两个方法皆可在 ES5 中部署：
;(function(global) {
var global_isFinite = global.isFinite
var global_isNaN = global.isNaN
Object.defineProperty(Number, 'isFinite', {
value: function isFinite(value) {
return typeof value === 'number' && global_isFinite(value)
},
configurable: true,
enumerable: false,
writable: true
})
Object.defineProperty(Number, 'isNaN', {
value: function isNaN(value) {
return typeof value === 'number' && global_isNaN(value)
},
configurable: true,
enumerable: false,
writable: true
})
})(this)
ES6 将全局方法 parseInt() 和 parseFloat() 移植到了 Number 对象上面，行为完全保持不变。这样做的目的是逐步减少全局性方法，使得语言逐步模块化。
Number.parseInt === parseInt // true
Number.parseFloat === parseFloat // true
Number.isInteger() 用来判断一个值是否为整数。需要注意：在 JavaScript 内部，整数和浮点数是同样的储存方法，所以 3 和 3.0 被视为同一个值。
Number.isInteger(3.0) // true
ES5 可以通过下面的代码部署 Number.isInteger():
;(function(global) {
var floor = Math.floor,
isFinite = global.isFinite
Object.defineProperty(Number, 'isInteger', {
value: function isInteger(value) {
return typeof value === 'number' && isFinite(value) && floor(value) === value
},
configurable: true,
enumerable: false,
writable: true
})
})(this)
ES6 在 Number 对象上面新增一个极小的常量
Number.EPSILON，目的在于为浮点数计算设置一个误差范围。如果计算误差能够小于 Number.EPSILON，就可以认为得到了正确结果。
function withinErrorMargin(left, right) {
return Math.abs(left - right) < Number.EPSILON
}
JavaScript 能够准确表示的整数范围在 -2^53 到 2^53 之间（不含两个端点），超过这个范围就无法精确表示。
Math.pow(2, 53) // 输出：9007199254740992
9007199254740993 // 输出：9007199254740992，超出范围不再精确
9007199254740993 === 9007199254740992 // true
ES6 引入了 Number.MAX_SAFE_INTEGER 和 Number.MIN_SAFE_INTEGER 两个常量，用来表示这个范围的上下限。
Number.MAX_SAFE_INTEGER === Math.pow(2, 53) - 1 // true
Number.MIN_SAFE_INTEGER === -Number.MAX_SAFE_INTEGER // true
Number.isSafeInteger() 则是用来判断一个整数是否落在这个范围之内。
ES6 新增了一个指数运算符
**。指数运算符可以与等号结合，形成一个新的赋值运算符**=。let a = 2
a **= 3 // 8
ES6 在 Math 对象上新增了 17 个与数学相关的方法。所有这些方法都是静态方法，只能在 Math 对象上调用。
- Math.trunc 方法用于去除一个数的小数部分，返回整数部分。
- Math.sign 方法用来判断一个数到底是正数、负数，还是零。对于非数值，会先将其转换为数值。其返回值有 5 种情况。参数位正数返回 +1；参数为负数返回 -1；参数为 0 返回 0；参数为 -0 返回 -0；参数为其他值返回 NaN。
- Math.cbrt 方法用于计算一个数的立方根。
- JavaScript 的整数使用 32 位二进制形式表示，Math.clz32 方法返回一个数的 32 位无符号整数形式有多少个前导 0。
- Math.imul 方法返回两个数以 32 位带符号整数形式相乘的结果，返回的也是一个 32 位的带符号整数。大多数情况下，Math.imul(a, b) 与 a*b 的结果是相同的。
- Math.fround 方法返回一个数的单精度浮点数形式。
- Math.hypot 方法返回所有参数的平方和的平方根。
- Math.expm1(x) 返回 e-1，即 Math.exp(x)-1。
- Math.log1p(x) 方法返回 ln(1+x)，即 Math.log(1+x)。如果 x 小于 -1，则返回 NaN。
- Math.log10(x) 返回以 10 为底的 x 的对数。如果 x 小于 0，则返回 NaN。
- Math.log2(x) 返回以 2 为底的 x 的对数。如果 x 小于 0，则返回 NaN。
- Math.sinh(x) 返回 x 的双曲正弦（hyperbolic sine）
- Math.cosh(x) 返回 x 的双曲余弦（hyperbolic cosine）
- Math.tanh(x) 返回 x 的双曲正切（hyperbolic tangent）
- Math.asinh(x) 返回 x 的反双曲正弦（inverse hyperbolic sine）
- Math.acosh(x) 返回 x 的反双曲余弦（inverse hyperbolic cosine）
- Math.atanh(x) 返回 x 的反双曲正切（inverse hyperbolic tangent）
函数默认参数用法不再做介绍，不过有三点需要注意：
- 1.参数变量是默认声明的，所以不能用 let 或 const 再次声明。
- 2.参数默认值是惰性求值的。
let x = 99
function foo(p = x + 1) {
console.log(p)
}
foo() // 100
x = 100
foo() // 101
- 1.触发默认值需要严格等于 undefined （与解构赋值一样）。
函数的 length 属性的含义是该函数预期传入的参数个数。指定了默认值以后，预期传入的参数个数就不包括这个参数了，函数的 length 属性将返回没有指定默认值的参数个数。也就是说，指定了默认值后，length 属性将失真。同理，rest 参数也不会计入 length 属性。
;(function(a) {}.length) // 1
;(function(a = 5) {}.length) // 0
;(function(a, b, c = 5) {}.length) // 2
如果设置了默认值的参数不是尾参数，那么 length 属性也不再计入后面的参数。
;(function(a = 0, b, c) {}.length) // 0
利用参数默认值可以指定某一个参数不得省略，如果省略就抛出一个错误：
function throwIfMissing() {
throw new Error('Missing parameter')
}
function foo(mustBeProvided = throwIfMissing()) {
return mustBeProvided
}
foo() // Error: Missing parameter
使用 rest 参数可以取代之前使用的 arguments 对象。
// arguments变量的写法
function foo() {
return Array.prototype.slice.call(arguments).sort()
}
// rest参数的写法
const bar = (...numbers) => numbers.sort()
ES6 规定只要函数参数使用了默认值、解构赋值或者扩展运算符，那么函数内部就不能显式设定为严格模式，否则就会报错。
这样规定的原因是，函数内部的严格模式同时适用于函数体和函数参数。但是，函数执行时，先执行函数参数，然后再执行函数体。这样就有一个不合理的地方：只有从函数体之中才能知道参数是否应该以严格模式执行，但是参数却应该先于函数体执行。
有两种方法可以规避这种限制。第一种是设定全局性的严格模式，第二种是把函数包在一个无参数的立即执行函数里面。
const doSomething = (function() {
'use strict'
return function(value = 42) {
return value
}
})()
函数的 name 属性返回该函数的函数名。
如果将一个匿名函数赋值给一个变量，ES5 的 name 属性会返回空字符 串，而 ES6 的 name 属性会返回实际的函数名。
var f = function() {}
// ES5
f.name // ""
// ES6
f.name // "f"
如果将一个具名函数赋值给一个变量，则 ES5 和 ES6 的 name 属性都返回这个具名函数原本的名字。
const bar = function baz() {}
// ES5 and ES6
bar.name // "baz"
Function 构造函数返回的函数实例，name 属性的值为 anonymous。
new Function().name // "anonymous"
bind 返回的函数，name 属性值会加上 bound 前缀。
function foo() {}
foo.bind({}).name // "bound foo"
;(function() {}.bind({}).name) // "bound "
箭头函数有以下几个使用注意事项。
- 1.函数体内的 this 对象就是定义时所在的对象，而不是使用时所在的对象。
- 2.不可以当作构造函数。也就是说，不可以使用 new 命令，否则会抛出一个错误。
- 3.不可以使用 arguments 对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
- 4.不可以使用 yield 命令，因此箭头函数不能用作 Generator 函数。
使用箭头函数实现部署管道机制（pipeline）的例子，即前一个函数的输出是后一个函数的输入。
const pipeline = (...funcs) => val => funcs.reduce((a, b) => b(a), val)
const plus1 = a => a + 1
const mult2 = a => a * 2
const addThenMult = pipeline(plus1, mult2)
addThenMult(5) // 12
ES7 的一个提案提出了“函数绑定”（function bind）运算符，用来取代 call、apply、bind 调用。
函数绑定运算符是并排的双冒号（::），双冒号左边是一个对象，右边是一个函数。该运算符会自动将左边的对象作为上下文环境（即 this 对象）绑定到右边的函数上。
foo::bar
// 等同于
bar.bind(foo)
foo::bar(...arguments)
// 等同于
bar.apply(foo, arguments)
尾调用（Tail Call）是函数式编程的一个重要概念，指某个函数的最后一步是调用另一个函数。如下所示：
function f(x) {
return g(x)
}
以下情况都不属于尾调用：
// 调用函数后还有赋值操作
function a(x) {
let y = g(x)
return y
}
// 同上
function b(x) {
return g(x) + 1
}
// 最后一步 return undefined
function c(x) {
g(x)
}
尾调用之所以与其他调用不同，就在于其特殊的调用位置。
函数调用会在内存形成一个“调用记录”，又称“调用帧”（call frame），保存调用位置和内部变量等信息。如果在函数 A 的内部调用函数 B，那么在 A 的调用帧上方还会形成一个 B 的调用帧。等到 B 运行结束，将结果返回到 A，B 的调用帧才会消失。如果函数 B 内部还调用函数 C，那就还有一个 C 的调用帧，以此类推。所有的调用帧就形成一个“调用栈”（call stack）。
尾调用由于是函数的最后一步操作，所以不需要保留外层函数的调用帧，因为调用位置、内部 变量等信息都不会再用到了，直接用内层函数的调用帧取代外层函数的即可。
function f() {
let m = 1
let n = 2
return g(m + n)
}
f()
// 等同于
function f() {
return g(3)
}
f()
// 等同于
g(3)
上面的代码中，如果函数 g 不是尾调用，函数 f 就需要保存内部变量 m 和 n 的值、g 的调用位置等信息。但由于调用 g 之后，函数 f 就结束了，所以执行到最后一步，完全可以删除 f(x) 的调用帧，只保留 g(3) 的调用帧。这就叫作“尾调用优化”（Tail Call Optimization），即只保留内层函数的调用帧。如果所有函数都是尾调用，那么完全可以做到每次执行时调用帧只有一项，这将大大节省内存。这就是“尾调用优化”的意义。
注意：只有不再用到外层函数的内部变量，内层函数的调用帧才会取代外层函数的调用帧，否则就无法进行“尾调用优化”。
function addOne(a) {
var one = 1
function inner(b) {
return b + one
}
return inner(a)
}
上面的函数不会进行尾调用优化，因为内层函数 inner 用到了外层函数 addOne 的内部变量 one。
函数调用自身称为递归。如果尾调用自身就称为尾递归。
递归非常耗费内存，因为需要同时保存成百上千个调用帧，很容易发生“栈溢出”错误（stack overflow）。但对于尾递归来说，由于只存在一个调用帧，所以永远不会发生“栈溢出”错误。
下面以计算阶乘为例：
function factorial(n) {
if (n === 1) return 1
return n * factorial(n - 1)
}
factorial(5) // 120
计算 n 的阶乘，最多需要保存 n 个调用记录，复杂度为 O(n)。
如果改写成尾递归，只保留一个调用记录，则复杂度为 O(1)。
function factorial(n, total) {
if (n === 1) return total
return factorial(n - 1, n * total)
}
factorial(5, 1) // 120
再以计算 Fibonacci 数列为例，非尾调用的 Fibonacci 数列实现容易堆栈溢出：
function Fibonacci(n) {
if (n <= 1) return 1
return Fibonacci(n - 1) + Fibonacci(n - 2)
}
Fibonacci(100) // 堆栈溢出
而进行尾调用优化的 Fibonacci 数列实现如下：
function Fibonacci(n, ac1 = 1, ac2 = 1) {
if (n <= 1) return ac2
return Fibonacci(n - 1, ac2, ac1 + ac2)
}
Fibonacci(100) // 573147844013817200000
由此可见，“尾调用优化”对递归操作意义重大，所以一些函数式编程语言将其写入了语言规格。ES6 第一次明确规定，所有 ECMAScript 的实现都必须部署“尾调用优化”。这就是说，在 ES6 中，只要使用尾递归，就不会发生栈溢出，相对节省内存。
尾递归的实现往往需要改写递归函数，确保最后一步只调用自身。做到这一点的方法，就是把所有用 到的内部变量改写成函数的参数。比如上面的例子，阶乘函数 factorial 需要用到一个中间变量 total，那就把这个中间变量改写成函数的参数，这样的缺点是不太直观。
有两种方法可以解决，方法一是在尾递归函数之外再提供一个正常形式的函数：
function tailFactorial(n, total) {
if (n === 1) return total
return tailFactorial(n - 1, n * total)
}
function factorial(n) {
return tailFactorial(n, 1)
}
factorial(5) // 120
或者使用函数柯里化。函数式编程有一个概念，叫作柯里化（currying），意思是将多参数的函数转换成单参数的形式。柯里化过程中可以预先填入参数。
function currying(fn, n) {
return function(m) {
return fn.call(this, m, n)
}
}
function tailFactorial(n, total) {
if (n === 1) return total
return tailFactorial(n - 1, n * total)
}
const factorial = currying(tailFactorial, 1)
factorial(5) // 120
方法二是使用函数默认参数：
function factorial(n, total = 1) {
if (n === 1) return total
return factorial(n - 1, n * total)
}
factorial(5) // 120
总结一下，递归本质上是一种循环操作。纯粹的函数式编程语言没有循环操作命令，所有的循环都用递归实现，这就是为什么尾递归对这些语言极其重要。对于其他支持“尾调用优化”的语言（比如 Lua、ES6），只需要知道循环可以用递归代替，而一旦使用递归，就最好使用尾递归。
ES6 的尾调用优化只在严格模式下开启，正常模式下是无效的。这是因为，在正常模式下函数内部有两个变量，可以跟踪函数的调用栈。
- 1.func.arguments：返回调用时函数的参数。
- 2.func.caller：返回调用当前函数的那个函数。
尾调用优化发生时，函数的调用栈会改写，因此上面两个变量就会失真。严格模式禁用这两个变量，所以尾调用模式仅在严格模式下生效。
尾递归优化只在严格模式下生效，在正常模式下，可以自己实现尾递归优化。
function sum(x, y) {
if (y > 0) {
return sum(x + 1, y - 1)
} else {
return x
}
}
sum(1, 100000) // Uncaught RangeError: Maximum call stack size exceeded(…)
上面的递归函数，x 为累加值，y 为递归次数，递归次数过大就会报错。
蹦床函数（trampoline）可以将递归执行转为循环执行，它接受函数作为参数，只要函数执行后返回函数，就继续执 行。
然后将原来的递归函数改写为每一步返回另一个函数。
// 蹦床函数
function trampoline(f) {
while (f && f instanceof Function) {
f = f()
}
return f
}
function sum(x, y) {
if (y > 0) {
return sum.bind(null, x + 1, y - 1)
} else {
return x
}
}
trampoline(sum(1, 100000)) // 100001
然而蹦床函数并不是真正的尾递归优化，下面的实现才是：
function tco(f) {
var value
var active = false
var accumulated = []
return function accumulator() {
accumulated.push(arguments)
if (!active) {
active = true
while (accumulated.length) {
value = f.apply(this, accumulated.shift())
}
active = false
return value
}
}
}
var sum = tco(function(x, y) {
if (y > 0) {
return sum(x + 1, y - 1)
} else {
return x
}
})
sum(1, 100000) // 100001
上面的代码中，tco 函数是尾递归优化的实现，它 的奥妙就在于状态变量 active。默认情况下，这个变量是不被激活的。一旦进入尾递归优化的过程，这个变量就被激活了。然后，每一轮递归 sum 返回的都是 undefined，所以就避免了递归执行；而 accumulated 数组存放每一轮 sum 执行的参数，总是有值的，这就保证了 accumulator 函数内部的 while 循环总会执行，很巧妙地将“递归”改成了“循环”，而后一轮的参数会取代前一轮的参数，保证了调用栈只有一层。
扩展运算符（spread）如同 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。
由于扩展运算符可以展开数组，所以不再需要使用 apply 方法将数组转为函数的参数。
// ES5 的写法
Math.max.apply(null, [14, 3, 77])
// ES6 的写法
Math.max(...[14, 3, 77])
扩展运算符还可以很方便地将一个数组添加到另一个数组的尾部：
// ES5的写法
var arr1 = [0, 1, 2]
var arr2 = [3, 4, 5]
Array.prototype.push.apply(arr1, arr2)
// ES6 的写法
var arr1 = [0, 1, 2]
var arr2 = [3, 4, 5]
arr1.push(...arr2)
扩展运算符可以将字符串转为真正的数组，且能够正确识别 32 位的 Unicode 字符：
'\uD83D\uDE80'.length // 2
[...'\uD83D\uDE80'].length // 1
因此，正确返回字符串长度的函数可以像下面这样写：
function length(str) {
return [...str].length
}
凡是涉及操作 32 位 Unicode 字符的函数都有这个问题。因此，最好都用扩展运算符改写。
let str = 'x\uD83D\uDE80y'
str
.split('')
.reverse()
.join('') // 输出错误：'y\uDE80\uD83Dx'
;[...str].reverse().join('') // 输出正确： 'y\uD83D\uDE80x'
扩展运算符内部调用的是数据结构的 Iterator 接口，因此只要具有 Iterator 接口的对象，都可以使用扩展运算符，如 Map 结构。
let map = new Map([[1, 'one'], [2, 'two'], [3, 'three']])
let arr = [...map.keys()] // [1, 2, 3]
Generator 函数运行后会返回一个遍历器对象，因此也可以使用扩展运算符。
var go = function*() {
yield 1
yield 2
yield 3
}
;[...go()] // [1, 2, 3]
Array.from 方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）对象（包括 ES6 新增的数据结构 Set 和 Map）。
Array.from 相较于扩展运算符的优势是支持类数组对象，所 谓类数组对象，本质特征只有一点，即必须有 length 属性。因此，任何有 length 属性的对象，都可以通过 Array.from 方法转为数组，而这种情况扩展运算符无法转换。
Array.from 还可以接受第二个参数，作用类似于数组的 map 方法，用来对每个元素进行处理，将处理后的值放入返回的数组。
Array.from(arrayLike, x => x * x)
// 等同于
Array.from(arrayLike).map(x => x * x)
如果 map 函数里面用到了 this 关键字，还可以 传入 Array.from 第三个参数，用来绑定 this。
同扩展运算符一样，Array.from() 也可以将字符串转换为数组，并且能正确识别码点大于 \uFFFF 的字符。
Array.of 方法用于将一组值转换为数组。这个方法的主要目的是弥补数组构造函数 Array() 的不足。因为参数个数的不同会导致 Array() 的行为有差异。
Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]
Array.of 方法可以用下面的代码模拟实现：
function ArrayOf() {
return [].slice.call(arguments)
}
数组实例的 copyWithin 方法会在当前数组内部将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。
Array.prototype.copyWithin(target, (start = 0), (end = this.length))
它接受 3 个参数：
- target（必选）：从该位置开始替换数据。
- start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示倒数。
- end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。
;[1, 2, 3, 4, 5].copyWithin(0, 3) // [4, 5, 3, 4, 5]
数组实例的 find 方法和 findIndex 都是用来查找数组中的匹配项。这两个方法都可以发现 NaN，弥补了数组的 IndexOf 方法的不足。
;[NaN].indexOf(NaN) // -1
;[NaN].findIndex(y => Object.is(NaN, y)) // 0
这两个方法都可以接受第二个参数，用来绑定回调函数的 this 对象。
fill 方法使用给定值填充一个数组。该方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。
ES6 提供了 3 个新方法 entries()、keys() 和 values() 用于遍历数组。
它们都返回一个遍历器对象，可用 for...of 循环遍历。keys() 是对键名的遍历，values() 是对键值的遍历，entries() 是对键值对的遍历。
for (let index of ['a', 'b'].keys()) {
console.log(index)
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
console.log(elem)
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem)
}
// 0 "a"
// 1 "b"
如果不使用 for...of 循环，可以手动调用遍历器对象的 next 方法进行遍历。
let letter = ['a', 'b']
let entries = letter.entries()
console.log(entries.next().value) // [0, 'a']
console.log(entries.next().value) // [1, 'b']
Array.prototype.includes 方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的 includes 方法类似。
indexOf 其内部使用严格相等运算符（===）进行判断，会导致对 NaN 的误判，而 includes 方法能正确识别 NaN。
;[NaN].indexOf(NaN) // -1
;[NaN].includes(NaN) // true
数组的空位指数组的某一个位置没有任何值。空位不是 undefined，一个位置的值等于 undefined 依然是有值的。空位是没有任何值的，in 运算符可以说明这一点。
0 in [undefined, undefined, undefined] // true
0 in [, , ,] // false
上面的代码说明，第一个数组的 0 号位置是有值的，第二个数组的 0 号位置没有值。
ES5 对空位的处理很不一致，大多数情况下会忽略空位。
- forEach()、filter()、every() 和 some() 都会跳过空位。
- map()会跳过空位，但会保留这个值。