> For the complete documentation index, see [llms.txt](https://chanshiyu.gitbook.io/blog/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://chanshiyu.gitbook.io/blog/shu-zhai/es6-biao-zhun-ru-men/02-yu-fa-de-kuo-zhan.md). # 02 语法的扩展 ES6 对语法进行了大量扩展，包括且不限于字符串、正则、数值、函数、数组、对象的扩展等，此篇总结 ES6 新增的一些常用的新语法，一起来学习新姿势。 ## 字符串的扩展 ES6 加强了对 Unicode 的支持，并且扩展了字符串对象。 ### Unicode 表示法 JavaScript 内部，字符以 UTF-16 的格式储存，每个字符固定为 2 个字节。但只限于码点在 `\u0000~\uFFFF` 之间的字符。对于 Unicode 码点大于 0xFFFF 的字符，需要 2 个字符，也就是 4 个字节存储。 同时如果在 \u 后面码点大于 0xFFFF，需要加上花括号才能正确显示，如 `\u{20BB7}`。 ```javascript // 大括号表示法与 UTF-16 等价 '\u{1F680}' === '\uD83D\uDE80' ``` 有了这种表示法之后，JavaScript 共有 6 种方法可以表示一个字符。 ```javascript '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 个字节组成的最简单方法。 ```javascript function is32Bit(c) { return c.codePointAt(0) > 0xffff } ``` 于此同时，ES6 提供了 String.fromCodePoint 方法，作用同 codePointAt 相反，新方法可以识别大于 0xFFFF 的字符，弥补了 String.fromCharCode 方法的不足。 ```javascript String.fromCodePoint(0x20bb7) String.fromCodePoint(0x78, 0x1f680, 0x79) === 'x\uD83D\uDE80y' // true ``` 上面的代码中，如果 String.fromCharCode 方法有多个参数，则它们会被合并成一个字符串返回。 注意：**fromCodePoint 方法定义在 String 对象上，而 codePointAt 方法定义在字符串的实例对象上。** ### 遍历器接口 ES6 为字符串添加了遍历器接口，使得字符串可以由 for...of 循环遍历。同时，遍历器的最大优点是可以识别大于 0xFFFF 的码点，传统的 for 循环无法识别这样的码点。 ```javascript 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 次。如果参数是字符串，则会先转换成数字。 ```javascript 'na'.repeat('3') // 'nanana' ``` ### padStart()、padEnd() 这两个方法用于字符串长度补全。padStart() 用于头部补全，padEnd() 用于尾部补全。如果省略第二个参数，则会用空格来补全。 ```javascript 'x'.padStart(5, 'ab') // 'ababx' 'x'.padEnd(5, 'ab') // 'xabab' 'x'.padStart(4) // ' x' ``` padStart 的常见用途是为数值补全指定位数和提示字符串格式。 ```javascript '1'.padStart(10, '0') // '0000000001' '09-12'.padStart(10, 'YYYY-MM-DD') // 'YYYY-09-12' ``` ### 标签模板 模板字符串可以紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能（tagged template）。 标签模板是函数调用的一种特殊形式。整个表达式的返回值就是函数处理模板字符串后的返回值。 ```javascript 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+(?!%)/`。 ```javascript ;/\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 后面才匹配，必须写成 `/(? numbers.sort() ``` ### 严格模式 ES6 规定只要函数参数使用了默认值、解构赋值或者扩展运算符，那么函数内部就不能显式设定为严格模式，否则就会报错。 这样规定的原因是，函数内部的严格模式同时适用于函数体和函数参数。但是，函数执行时，先执行函数参数，然后再执行函数体。这样就有一个不合理的地方：只有从函数体之中才能知道参数是否应该以严格模式执行，但是参数却应该先于函数体执行。 有两种方法可以规避这种限制。第一种是设定全局性的严格模式，第二种是把函数包在一个无参数的立即执行函数里面。 ```javascript const doSomething = (function() { 'use strict' return function(value = 42) { return value } })() ``` ### name 属性 函数的 name 属性返回该函数的函数名。 如果将一个匿名函数赋值给一个变量，ES5 的 name 属性会返回空字符串，而 ES6 的 name 属性会返回实际的函数名。 ```javascript var f = function() {} // ES5 f.name // "" // ES6 f.name // "f" ``` 如果将一个具名函数赋值给一个变量，则 ES5 和 ES6 的 name 属性都返回这个具名函数原本的名字。 ```javascript const bar = function baz() {} // ES5 and ES6 bar.name // "baz" ``` Function 构造函数返回的函数实例，name 属性的值为 anonymous。 ```javascript new Function().name // "anonymous" ``` bind 返回的函数，name 属性值会加上 bound 前缀。 ```javascript function foo() {} foo.bind({}).name // "bound foo" ;(function() {}.bind({}).name) // "bound " ``` ### 箭头函数 箭头函数有以下几个使用注意事项。 1. 函数体内的 this 对象就是定义时所在的对象，而不是使用时所在的对象。 2. 不可以当作构造函数。也就是说，不可以使用 new 命令，否则会抛出一个错误。 3. 不可以使用 arguments 对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。 4. 不可以使用 yield 命令，因此箭头函数不能用作 Generator 函数。 使用箭头函数实现部署管道机制（pipeline）的例子，即前一个函数的输出是后一个函数的输入。 ```javascript 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 对象）绑定到右边的函数上。 ```javascript foo::bar // 等同于 bar.bind(foo) foo::bar(...arguments) // 等同于 bar.apply(foo, arguments) ``` ### 尾调用优化【重点】 #### 尾调用 尾调用（Tail Call）是函数式编程的一个重要概念，指某个函数的最后一步是调用另一个函数。如下所示： ```javascript function f(x) { return g(x) } ``` 以下情况都不属于尾调用： ```javascript // 调用函数后还有赋值操作 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）。 尾调用由于是函数的最后一步操作，所以不需要保留外层函数的调用帧，因为调用位置、内部变量等信息都不会再用到了，直接用内层函数的调用帧取代外层函数的即可。 ```javascript 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），即只保留内层函数的调用帧。如果所有函数都是尾调用，那么完全可以做到每次执行时调用帧只有一项，这将大大节省内存。这就是“尾调用优化”的意义。 注意：只有不再用到外层函数的内部变量，内层函数的调用帧才会取代外层函数的调用帧，否则就无法进行“尾调用优化”。 ```javascript function addOne(a) { var one = 1 function inner(b) { return b + one } return inner(a) } ``` 上面的函数不会进行尾调用优化，因为内层函数 inner 用到了外层函数 addOne 的内部变量 one。 #### 尾递归 函数调用自身称为递归。如果尾调用自身就称为尾递归。 递归非常耗费内存，因为需要同时保存成百上千个调用帧，很容易发生“栈溢出”错误（stack overflow）。但对于尾递归来说，由于只存在一个调用帧，所以永远不会发生“栈溢出”错误。 下面以计算阶乘为例： ```javascript function factorial(n) { if (n === 1) return 1 return n * factorial(n - 1) } factorial(5) // 120 ``` 计算 n 的阶乘，最多需要保存 n 个调用记录，复杂度为 O(n)。 如果改写成尾递归，只保留一个调用记录，则复杂度为 O(1)。 ```javascript function factorial(n, total) { if (n === 1) return total return factorial(n - 1, n * total) } factorial(5, 1) // 120 ``` 再以计算 Fibonacci 数列为例，非尾调用的 Fibonacci 数列实现容易堆栈溢出： ```javascript function Fibonacci(n) { if (n <= 1) return 1 return Fibonacci(n - 1) + Fibonacci(n - 2) } Fibonacci(100) // 堆栈溢出 ``` 而进行尾调用优化的 Fibonacci 数列实现如下： ```javascript 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，那就把这个中间变量改写成函数的参数，这样的缺点是不太直观。 有两种方法可以解决，方法一是在尾递归函数之外再提供一个正常形式的函数： ```javascript 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），意思是将多参数的函数转换成单参数的形式。柯里化过程中可以预先填入参数。 ```javascript 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 ``` 方法二是使用函数默认参数： ```javascript 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：返回调用当前函数的那个函数。 尾调用优化发生时，函数的调用栈会改写，因此上面两个变量就会失真。严格模式禁用这两个变量，所以尾调用模式仅在严格模式下生效。 #### 尾递归优化的实现 尾递归优化只在严格模式下生效，在正常模式下，可以自己实现尾递归优化。 ```javascript 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）可以将递归执行转为循环执行，它接受函数作为参数，只要函数执行后返回函数，就继续执行。 然后将原来的递归函数改写为每一步返回另一个函数。 ```javascript // 蹦床函数 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 ``` 然而蹦床函数并不是真正的尾递归优化，下面的实现才是： ```javascript 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 方法将数组转为函数的参数。 ```javascript // ES5 的写法 Math.max.apply(null, [14, 3, 77]) // ES6 的写法 Math.max(...[14, 3, 77]) ``` 扩展运算符还可以很方便地将一个数组添加到另一个数组的尾部： ```javascript // 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 字符： ```javascript '\uD83D\uDE80'.length // 2 [...'\uD83D\uDE80'].length // 1 ``` 因此，正确返回字符串长度的函数可以像下面这样写： ```javascript function length(str) { return [...str].length } ``` 凡是涉及操作 32 位 Unicode 字符的函数都有这个问题。因此，最好都用扩展运算符改写。 ```javascript let str = 'x\uD83D\uDE80y' str .split('') .reverse() .join('') // 输出错误：'y\uDE80\uD83Dx' ;[...str].reverse().join('') // 输出正确： 'y\uD83D\uDE80x' ``` 扩展运算符内部调用的是数据结构的 Iterator 接口，因此只要具有 Iterator 接口的对象，都可以使用扩展运算符，如 Map 结构。 ```javascript let map = new Map([[1, 'one'], [2, 'two'], [3, 'three']]) let arr = [...map.keys()] // [1, 2, 3] ``` Generator 函数运行后会返回一个遍历器对象，因此也可以使用扩展运算符。 ```javascript 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 方法，用来对每个元素进行处理，将处理后的值放入返回的数组。 ```javascript 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() 的行为有差异。 ```javascript Array() // [] Array(3) // [, , ,] Array(3, 11, 8) // [3, 11, 8] ``` Array.of 方法可以用下面的代码模拟实现： ```javascript function ArrayOf() { return [].slice.call(arguments) } ``` ### copyWithin() 数组实例的 copyWithin 方法会在当前数组内部将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。 ```javascript Array.prototype.copyWithin(target, (start = 0), (end = this.length)) ``` 它接受 3 个参数： * target（必选）：从该位置开始替换数据。 * start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示倒数。 * end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。 ```javascript ;[1, 2, 3, 4, 5].copyWithin(0, 3) // [4, 5, 3, 4, 5] ``` ### find() 和 findIndex() 数组实例的 find 方法和 findIndex 都是用来查找数组中的匹配项。这两个方法都可以发现 NaN，弥补了数组的 IndexOf 方法的不足。 ```javascript ;[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() 是对键值对的遍历。 ```javascript 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 方法进行遍历。 ```javascript 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。 ```javascript ;[NaN].indexOf(NaN) // -1 ;[NaN].includes(NaN) // true ``` ### 数组的空位 数组的空位指数组的某一个位置没有任何值。空位不是 undefined，一个位置的值等于 undefined 依然是有值的。空位是没有任何值的，in 运算符可以说明这一点。 ```javascript 0 in [undefined, undefined, undefined] // true 0 in [, , ,] // false ``` 上面的代码说明，第一个数组的 0 号位置是有值的，第二个数组的 0 号位置没有值。 ES5 对空位的处理很不一致，大多数情况下会忽略空位。 * forEach()、filter()、every() 和 some() 都会跳过空位。 * map()会跳过空位，但会保留这个值。 * join() 和 toString() 会将空位视为 undefined，而 undefined 和 null 会被处理成空字符串。 ES5 中空位表现如下： ```javascript ;[, '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 中空位表现如下： ```javascript 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。 ```javascript 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”。 ```javascript new Function().name // "anonymous" var doSomething = function() {} doSomething.bind().name // "bound doSomething" ``` 如果对象的方法是一个 Symbol 值，那么 name 属性返回的是这个 Symbol 值的描述。 ```javascript 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 等于自身**。 ```javascript ;+0 === -0 //true NaN === NaN // false Object.is(+0, -0) // false Object.is(NaN, NaN) // true ``` ES5 可以通过下面的代码部署 Object.is： ```javascript 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 无法转成对象，所以如果将它们作为首参数会报错，非首参数则跳过。 其他类型的值（即数值、字符串和布尔值）不在首参数也不会报错。但是，除了字符串会以数组形式复制到目标对象，其他值都不会产生效果。 ```javascript 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 可以用来处理数组，但是会把数组视为对象来处理。 ```javascript Object.assign([1, 2, 3], [4, 5]) // [4, 5, 3] ``` 上面的代码中，Object.assign 把数组视为属性名为 0、1、2 的对象，因此目标数组的 0 号属性 4 覆盖了原数组的 0 号属性 1。 Object.assign 可以用来克隆对象，不过，采用这种方法只能克隆原始对象自身的值，不能克隆它继承的值。如果想要保持继承链，可以采用下面的代码： ```javascript function clone(origin) { let originProto = Object.getPrototypeOf(origin) return Object.assign(Object.create(originProto), origin) } ``` ### 属性的可枚举性 对象的每一个属性都具有一个描述对象（Descriptor），用于控制该属性的行为。Object.getOwnPropertyDescriptor 方法可以获取该属性的描述对象。 ```javascript 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 遍历到。 ```javascript Object.getOwnPropertyDescriptor(Object.prototype, 'toString').enumerable // false Object.getOwnPropertyDescriptor([], 'length').enumerable // false ``` 另外，ES6 规定，所有 Class 的原型的方法都是不可枚举的。 ```javascript 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 值的属性，按照生成时间排序。 ```javascript 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**。 ```javascript 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 正式推荐的设置原型对象的方法。 ```javascript // 格式 Object.setPrototypeOf(object, prototype) // 等同于 function (object, prototype) { object.__proto__ = prototype return object } ``` 如果第一个参数不是对象，则会自动转为对象。但是由于返回的还是第一个参数，所以这个操作不会产生任何效果。 由于 undefined 和 null 无法转为对象，所以如果第一个参数是 undefined 或 null，就会报错。 ```javascript 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 结构。 ```javascript var obj = { foo: 'bar', baz: 42 } var map = new Map(Object.entries(obj)) map // Map { foo: "bar", baz: 42 } ``` ### 对象的扩展运算符 使用扩展运算符可以克隆对象，包括复制对象的原型： ```javascript // 写法一 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）。 ```javascript var obj = { p: 'a' } Object.getOwnPropertyDescriptor(obj, 'p') // { // value: "a", // writable: true, // enumerable: true, // configurable: true // } ``` ES2017 引入 Object.getOwnPropertyDescriptors 方法，返回指定对象所有自身属性（非继承属性）的描述对象。 ```javascript 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 传导运算符 如果读取对象内部的某个属性，往往需要判断该对象是否存在。一般做法如下： ```javascript const firstName = (message && message.body && message.body.user && message.body.user.firstName) || 'default' ``` 现有一个提案引入 “Null 传导运算符（?.）” 可以简化上面的写法： ```javascript const firstName = message?.body?.user?.firstName || 'default' ```