ES6-标准入门·语法的扩展

数媒派

发布于 2022-12-01 11:40:23

1.1K0

发布于 2022-12-01 11:40:23

文章被收录于专栏：产品优化

语法的扩展

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' // true

codePointAt() 和 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+/.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

Number.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 新增了一个指数运算符 **。指数运算符可以与等号结合，形成一个新的赋值运算符**=。

let a = 2
a **= 3 // 8

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 的结果是相同的。
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 parameter

rest 参数

使用 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 // true

Object.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'

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法

ecmascript

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

编程算法

ecmascript