ES6 对语法进行了大量扩展，包括且不限于字符串、正则、数值、函数、数组、对象的扩展等，此篇总结 ES6 新增的一些常用的新语法，一起来学习新姿势。
字符串的扩展
ES6 加强了对 Unicode 的支持，并且扩展了字符串对象。
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' // truecodePointAt() 和 fromCodePoint()
对于 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) // '𠮷'
}includes()、startsWith()、endsWidth()
ES6 新增 3 种新方法用来判断一个字符串是否包含在另一个字符串中。
- includes()：返回布尔值，表示是否找到了参数字符串。
- startsWith()：返回布尔值，表示参数字符串是否在源字符串的头部。
- endsWith()：返回布尔值，表示参数字符串是否在源字符串的尾部。
注意：使用第二个参数 n 时，endsWith 针对前 n 个字符，而其他两个方法针对从第 n 个位置到字符串结束位置之间的字符。
repeat()
repeat 方法返回一个新字符串，表示将原字符串重复 n 次。如果参数是字符串，则会先转换成数字。
'na'.repeat('3') // 'nanana'padStart()、padEnd()
这两个方法用于字符串长度补全。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') // 8Number.isFinite()、Number.isNaN()
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)Number.parseInt()、Number.parseFloat()
ES6 将全局方法 parseInt() 和 parseFloat() 移植到了 Number 对象上面，行为完全保持不变。这样做的目的是逐步减少全局性方法，使得语言逐步模块化。
Number.parseInt === parseInt // true
Number.parseFloat === parseFloat // true
Number.isInteger()
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)Number.EPSILON
ES6 在 Number 对象上面新增一个极小的常量 Number.EPSILON，目的在于为浮点数计算设置一个误差范围。
如果计算误差能够小于 Number.EPSILON，就可以认为得到了正确结果。
function withinErrorMargin(left, right) {
return Math.abs(left - right) < Number.EPSILON
}安全整数和 Number.isSafeInteger()
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 新增了一个指数运算符 **。指数运算符可以与等号结合，形成一个新的赋值运算符**=。
Math 对象的扩展
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 的结果是相同的，即该方法等同于 (a*b)|0 的效果（超过 32 位的部分溢出）。
- 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）
函数的扩展
默认参数
函数默认参数用法不再做介绍，不过有三点需要注意：
- 参数变量是默认声明的，所以不能用 let 或 const 再次声明。
- 参数默认值是惰性求值的。
let x = 99
function foo(p = x + 1) {
console.log(p)
}
foo() // 100
x = 100
foo() // 101
- 触发默认值需要严格等于 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 parameterrest 参数
使用 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 属性
函数的 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 "箭头函数
箭头函数有以下几个使用注意事项。
- 函数体内的 this 对象就是定义时所在的对象，而不是使用时所在的对象。
- 不可以当作构造函数。也就是说，不可以使用 new 命令，否则会抛出一个错误。
- 不可以使用 arguments 对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
- 不可以使用 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
绑定 this
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 的尾调用优化只在严格模式下开启，正常模式下是无效的。这是因为，在正常模式下函数内部有两个变量，可以跟踪函数的调用栈。
- func.arguments：返回调用时函数的参数。
- 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.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.of 方法用于将一组值转换为数组。这个方法的主要目的是弥补数组构造函数 Array() 的不足。因为参数个数的不同会导致 Array() 的行为有差异。
Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]
Array.of 方法可以用下面的代码模拟实现：
function ArrayOf() {
return [].slice.call(arguments)
}copyWithin()
数组实例的 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()
数组实例的 find 方法和 findIndex 都是用来查找数组中的匹配项。这两个方法都可以发现 NaN，弥补了数组的 IndexOf 方法的不足。
;[NaN].indexOf(NaN) // -1
;[NaN].findIndex(y => Object.is(NaN, y)) // 0
这两个方法都可以接受第二个参数，用来绑定回调函数的 this 对象。
fill()
fill 方法使用给定值填充一个数组。该方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。
entries()、keys() 和 values()
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']
includes()
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()会跳过空位，但会保留这个值。
- join() 和 toString() 会将空位视为 undefined，而 undefined 和 null 会被处理成空字符串。
ES5 中空位表现如下：
;[, 'a'].forEach((x, i) => console.log(i)) // 1
;['a', , 'b'].filter(x => true) // ['a','b']
;[, 'a'].every(x => x === 'a') // true
;[, 'a'].some(x => x !== 'a') // false
;[, 'a'].map(x => 1) // [,1]
;[, 'a', undefined, null].join('#') // "#a##"
;[, 'a', undefined, null].toString() // ",a,,"ES6 明确将空位转为 undefined。具体体现在：
- Array.from 方法会将数组的空位转为 undefined。
- 扩展运算符（...）会将空位转为 undefined。
- copyWithin()会连空位一起复制。
- for...of 循环会遍历空位。
- entries()、keys()、values()、find() 和 findIndex() 会将空位处理成 undefined。
ES6 中空位表现如下：
Array.from(['a', , 'b']) // [ "a", undefined, "b" ]
;[...['a', , 'b']] // [ "a", undefined, "b" ]
;[, 'a', 'b', ,].copyWithin(2, 0) // [,"a",,"a"]
new Array(3).fill('a') // ["a","a","a"]
;[...[, 'a'].entries()] // [[0,undefined], [1,"a"]]
;[...[, 'a'].keys()] // [0,1]
;[...[, 'a'].values()] // [undefined,"a"]
;[, 'a'].find(x => true) // undefined
;[, 'a'].findIndex(x => true) // 0
let arr = [, ,]
for (let i of arr) {
console.log(1)
}
// 输出 3 次 1由于空位的处理规则非常不统一，所以建议避免出现空位。
对象的扩展
方法的 name 属性
同函数的 name 属性一样，对象方法的 name 属性也返回函数名。
如果对象的方法使用了取值函数（getter）和存值函数（setter），则 name 属性不是在该方法上面，而是在该方法属性的描述对象的 get 和 set 属性上面，返回值是方法名前加上 get 和 set。
const obj = {
get foo() {},
set foo(x) {}
}
obj.foo.name // TypeError: Cannot read property 'name' of undefined
const descriptor = Object.getOwnPropertyDescriptor(obj, 'foo')
descriptor.get.name // "get foo"
descriptor.set.name // "set foo"name 属性有两种特殊情况：bind 方法创造的函数，name 属性返回 “bound” 加上原函数的名字；Function 构造函数创造的函数，name 属性返回 “anonymous”。
new Function().name // "anonymous"
var doSomething = function() {}
doSomething.bind().name // "bound doSomething"如果对象的方法是一个 Symbol 值，那么 name 属性返回的是这个 Symbol 值的描述。
const key1 = Symbol('description')
const key2 = Symbol()
let obj = { [key1]() {}, [key2]() {} }
obj[key1].name // "[description]"
obj[key2].name // ""Object.is()
ES5 中严格相等运算符（===）有两个缺点: 一是 NaN 不等于自身，二是 +0 等于 -0。JavaScript 缺乏这样一种运算：在所有环境中，只要两个值是一样的，它们就应该相等。
ES6 提出了 “Same-value equality”（同值相等）算法用来解决这个问题。Object.is 就是部署这个算法的新方法。它用来比较两个值是否严格相等，与严格相等运算符（===）的行为基本一致。
不同之处只有两个：一是 +0 不等于 -0，二是 NaN 等于自身。
;+0 === -0 //true
NaN === NaN // false
Object.is(+0, -0) // false
Object.is(NaN, NaN) // true
ES5 可以通过下面的代码部署 Object.is：
Object.defineProperty(Object, 'is', {
value: function(x, y) {
if (x === y) {
// 针对+0 不等于 -0的情况
return x !== 0 || 1 / x === 1 / y
}
// 针对NaN的情况
return x !== x && y !== y
},
configurable: true,
enumerable: false,
writable: true
})Object.assign()
Object.assign 方法用于将源对象（source）的所有可枚举属性复制到目标对象（target）。
如果只有一个参数，Object.assign 会直接返回该参数，注意和扩展运算符不同，是相同引用。
非对象参数会先转换成对象，由于 undefined 和 null 无法转成对象，所以如果将它们作为首参数会报错，非首参数则跳过。
其他类型的值（即数值、字符串和布尔值）不在首参数也不会报错。但是，除了字符串会以数组形式复制到目标对象，其他值都不会产生效果。
Object(true) // {[[PrimitiveValue]]: true}
Object(10) // {[[PrimitiveValue]]: 10}
Object('abc') // {0: "a", 1: "b", 2: "c", length: 3, [[PrimitiveValue]]: "abc"}上面的代码中，布尔值、数值、字符串分别转成对应的包装对象，可以看到它们的原始值都在包装对象的内部属性 [[Primi-tiveValue]] 上面，这个属性是不会被 Object.assign 复制的。只有字符串的包装对象会产生可枚举的实义属性，那些属性则会被拷贝。
Object.assign 只复制源对象的自身属性，也不复制不可枚举的属性（enumer-able:false）。
注意，Object.assign 可以用来处理数组，但是会把数组视为对象来处理。
Object.assign([1, 2, 3], [4, 5]) // [4, 5, 3]
上面的代码中，Object.assign 把数组视为属性名为 0、1、2 的对象，因此目标数组的 0 号属性 4 覆盖了原数组的 0 号属性 1。
Object.assign 可以用来克隆对象，不过，采用这种方法只能克隆原始对象自身的值，不能克隆它继承的值。如果想要保持继承链，可以采用下面的代码：
function clone(origin) {
let originProto = Object.getPrototypeOf(origin)
return Object.assign(Object.create(originProto), origin)
}属性的可枚举性
对象的每一个属性都具有一个描述对象（Descriptor），用于控制该属性的行为。Object.getOwnPropertyDescriptor 方法可以获取该属性的描述对象。
let obj = { foo: 123 }
Object.getOwnPropertyDescriptor(obj, 'foo')
// {
// value: 123,
// writable: true,
// enumerable: true,
// configurable: true
// }描述对象的 enumerable 属性称为“可枚举性”，如果该属性为 false，就表示某些操作会忽略当前属性。
ES5 有 3 个操作会忽略 enumerable 为 false 的属性：
- for...in 循环：只遍历对象自身的和继承的可枚举属性。
- Object.keys()：返回对象自身的所有可枚举属性的键名。
- JSON.stringify()：只串行化对象自身的可枚举属性。
ES6 新增了 1 个操作 Object.assign()，会忽略 enumerable 为 false 的属性，只复制对象自身的可枚举属性。
上面 4 个操作之中，只有 for...in 会返回继承的属性。实际上，引入 enumerable 的最初目的就是让某些属性可以规避掉 for...in 操作。比如，对象原型的 toString 方法以及数组的 length 属性，就通过这种手段而不会被 for...in 遍历到。
Object.getOwnPropertyDescriptor(Object.prototype, 'toString').enumerable // false
Object.getOwnPropertyDescriptor([], 'length').enumerable // false
另外，ES6 规定，所有 Class 的原型的方法都是不可枚举的。
Object.getOwnPropertyDescriptor(
class {
foo() {}
}.prototype,
'foo'
).enumerable // false总的来说，操作中引入继承的属性会让问题复杂化，尽量不要用 for...in 循环，而用 Object.keys() 代替。
属性的遍历
ES6 一共有 5 种方法可以遍历对象的属性：
- for...in 循环遍历对象自身的和继承的可枚举属性（不含 Symbol 属性）
- Object.keys(obj) 返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含 Symbol 属性）
- Object.getOwnPropertyNames(obj) 返回一个数组，包含对象自身的所有属性（不含 Symbol 属性，但是包括不可枚举属性）
- Object.getOwnPropertySymbols(obj) 返回一个数组，包含对象自身的所有 Symbol 属性
- Reflect.ownKeys(obj) 返回一个数组，包含对象自身的所有属性，不管属性名是 Symbol 还是字符串，也不管是否可枚举
以上 5 种方法遍历对象的属性时都遵守同样的属性遍历次序规则：
- 首先遍历所有属性名为数值的属性，按照数字排序。
- 其次遍历所有属性名为字符串的属性，按照生成时间排序。
- 最后遍历所有属性名为 Symbol 值的属性，按照生成时间排序。
Reflect.ownKeys({ [Symbol()]: 0, b: 0, 10: 0, 2: 0, a: 0 })
// ['2', '10', 'b', 'a', Symbol()]__proto__、Object.setPrototypeOf()、Object.getPrototypeOf()
__proto__ 是一个内部属性，标准明确规定，只有浏览器必须部署这个属性，其他运行环境不一定要部署，而且新的代码最好认为这个属性是不存在的。因此，无论从语义的角度，还是从兼容性的角度，都不要使用这个属性，而是使用 Object.setPrototypeOf()（写操作）、Object.getPrototypeOf()（读操作）或 Object.create()（生成操作）代替。
在实现上，__proto** 调用的是 Object.prototype.__proto**。
Object.defineProperty(Object.prototype, '__proto__', {
get() {
let _thisObj = Object(this)
return Object.getPrototypeOf(_thisObj)
},
set(proto) {
if (this === undefined || this === null) {
throw new TypeError()
}
if (!isObject(this)) {
return undefined
}
if (!isObject(proto)) {
return undefined
}
let status = Reflect.setPrototypeOf(this, proto)
if (!status) {
throw new TypeError()
}
}
})
function isObject(value) {
return Object(value) === value
}如果一个对象本身部署了 __proto__ 属性，则该属性的值就是对象的原型。
Object.setPrototypeOf()
Object.setPrototypeOf 方法的作用与 __proto__ 相同，用来设置一个对象的 prototype 对象，返回参数对象本身。它是 ES6 正式推荐的设置原型对象的方法。
// 格式
Object.setPrototypeOf(object, prototype)
// 等同于
function (object, prototype) {
object.__proto__ = prototype
return object
}如果第一个参数不是对象，则会自动转为对象。但是由于返回的还是第一个参数，所以这个操作不会产生任何效果。
由于 undefined 和 null 无法转为对象，所以如果第一个参数是 undefined 或 null，就会报错。
Object.setPrototypeOf(1, {}) === 1 // true
Object.setPrototypeOf('foo', {}) === 'foo' // true
Object.setPrototypeOf(true, {}) === true // trueObject.getPrototypeOf()
该方法与 setPrototypeOf 方法配套，用于读取一个对象的 prototype 对象。同样，如果参数不是对象，则会被自动转为对象。
Object.keys、Object.values()、Object.entries()
Object.keys、Object.values、Object.entries 方法都返回一个数组，成员分别是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键名、键值和键值对数组。
Object.entries 方法的另一个用处是将对象转为真正的 Map 结构。
var obj = { foo: 'bar', baz: 42 }
var map = new Map(Object.entries(obj))
map // Map { foo: "bar", baz: 42 }对象的扩展运算符
使用扩展运算符可以克隆对象，包括复制对象的原型：
// 写法一
const clone1 = {
__proto__: Object.getPrototypeOf(obj),
...obj
}
// 写法二
const clone2 = Object.assign(Object.create(Object.getPrototypeOf(obj)), obj)上面的代码中，写法一的 __proto__ 属性在非浏览器的环境不一定部署，因此推荐使用写法二。
如果扩展运算符的参数是 null 或 undefined，则这两个值会被忽略，不会报错。
Object.getOwnPropertyDescriptors()
ES5 的 Object.getOwnPropertyDescriptor 方法用来返回某个对象属性的描述对象（descriptor）。
var obj = { p: 'a' }
Object.getOwnPropertyDescriptor(obj, 'p')
// {
// value: "a",
// writable: true,
// enumerable: true,
// configurable: true
// }ES2017 引入 Object.getOwnPropertyDescriptors 方法，返回指定对象所有自身属性（非继承属性）的描述对象。
const obj = {
foo: 123,
get bar() {
return 'abc'
}
}
Object.getOwnPropertyDescriptors(obj)
// {
// foo: {
// value: 123,
// writable: true,
// enumerable: true,
// configurable: true },
// bar: {
// get: [Function: bar],
// set: undefined,
// enumerable: true,
// configurable: true }
// }Null 传导运算符
如果读取对象内部的某个属性，往往需要判断该对象是否存在。一般做法如下：
const firstName = (message && message.body && message.body.user && message.body.user.firstName) || 'default'
现有一个提案引入 “Null 传导运算符（?.）” 可以简化上面的写法：
const firstName = message?.body?.user?.firstName || 'default'
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
.jpg){kind=link}
