02 语法的扩展

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+/。“后行否定断言”则与“先行否定断言”相反,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

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)

函数的扩展

默认参数

函数默认参数用法不再做介绍,不过有三点需要注意:

  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 参数

使用 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 "

箭头函数

箭头函数有以下几个使用注意事项。

  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

绑定 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 的尾调用优化只在严格模式下开启,正常模式下是无效的。这是因为,在正常模式下函数内部有两个变量,可以跟踪函数的调用栈。

  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.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 种方法可以遍历对象的属性:

  1. for...in 循环遍历对象自身的和继承的可枚举属性(不含 Symbol 属性)

  2. Object.keys(obj) 返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含 Symbol 属性)

  3. Object.getOwnPropertyNames(obj) 返回一个数组,包含对象自身的所有属性(不含 Symbol 属性,但是包括不可枚举属性)

  4. Object.getOwnPropertySymbols(obj) 返回一个数组,包含对象自身的所有 Symbol 属性

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

最后更新于