简介

ES6对于对象的扩展不多，只有一些常用的简洁写法和一些新增API

在ES8中新增了对象的扩展运算符 ... 不过我们可以在Babel转译后使用它

正文

ES6中，对象的属性可以使用简洁表示法来简写

  1. let foo = 'bar'
  3. let baz = {foo}
  4. // 等同于
  5. let baz = {foo: foo}
  1. let obj = {
  2.   method () {}
  3. }
  4. // 等同于
  5. let obj = {
  6.   method: () => {}
  7. }

上面例子表明，在对象中，可以直接写变量，属性名为变量名, 属性值为变量的值，方法也同理

ES6中，对象的属性名可以使用表达式

  1. let obj = {
  2.   ['a' + 'bc']: 123,
  3.   ['h' + 'ello']() {
  4.     return 'hello world!';
  5.   }
  6. }
  7. console.log(obj.abc)
  8. // 123
  9. console.log(obj.hello())
  10. // hello world!

很好理解，js解析器会先执行属性名表达式，得到的结果作为真正的属性名，这个表达式必须用方括号包裹

ES6对象中新增了一些API，正常工作中用到的很少，这里只介绍两个最常见的

Object.assign 方法用于对象的合并，接收的参数是任意个对象，会依次把第2，3，4…个对象

合并到第一个对象上，如果有重复的属性名，后来的会覆盖先前的。

  1. let target = { a: 1, b: 1 }
  2. let source1 = { b: 2, c: 2 }
  3. let source2 = { c: 3 }
  5. Object.assign(target, source1, source2);
  6. target // {a:1, b:2, c:3}

Object.is 方法用于判断两个值是否相等

以前我们判断两个值相等可以用==和===

不过==会发生隐式转换，===无法判断NaN

Object.is与===不同之处只有两个：一是+0不等于-0，二是NaN等于自身。

  1. +0 === -0 //true
  2. NaN === NaN // false
  4. Object.is(+0, -0) // false
  5. Object.is(NaN, NaN) // true

ES8中将会支持对象的扩展运算符，这是一个还未发布的版本

不过我们早已可以使用Babel转译来使用它，并且在工作中也经常用到

  1. let z = { a: 3, b: 4 }
  2. let n = { ...z }
  3. n // { a: 3, b: 4 }

注意这段代码无法在浏览器运行，目前没有浏览器支持ES8

对象的扩展运算符通常和解构赋值配合使用，关于解构赋值，我们会在后面的章节介绍

思考

这部分内容希望你都可以手动敲一遍，独立思考

  1. const keyA = {a: 1}
  2. const keyB = {b: 2}
  4. const obj = {
  5.   [keyA]: 'aaa',
  6.   [keyB]: 'bbb'
  7. }

输出一下obj，并试着解释这个结果

Object.assign可以拷贝原型链上继承来的属性吗？可以拷贝不可枚举的属性吗？

for...in可以遍历原型链上继承来的属性吗？可以遍历不可枚举的属性吗？