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()会跳过空位,但会保留这个值。