对象的扩展！

属性的简洁表示法

ES6允许直接写入变量和函数作为对象的属性和方法。

js
var foo = 'bar';
var baz = {foo};
baz // {foo: 'bar'}

// 等同于
var baz = { foo: foo };

上面的代码表明，ES6允许在对象中只写属性名，不写属性值。这时，属性于等于属性名所代表的变量。

js
function f (x, y) {
  return {x, y};
}

// 等同于
function f (x, y) {
  return {
    x: x,
    y: y
  };
}

f(1, 2) // Object {x: 1, y: 2}

除了属性简写，方法也可以简写。

js
var o = {
  method () {
    return 'hello!';
  }
}

// 等同于
var o = {
  method: function () {
    return 'hello!';
  }
}

这种写法用于函数的返回值会非常方便。

js
function getPoint () {
  var x = 1;
  var y = 10;

  return {x, y};
}

getPoint() // {x: 1, y: 2}

CommonJS模块输出变量就非常适合这个简洁写法。

js
var ms = {};

function getItem (key) {
  return key in ms ? ms[key] : null;
}

function setItem (key, value) {
  ms[key] = value;
}

function clear () {
  ms = {};
}

module.exports = { getItem, setItem, clear };
// 等同于
module.exports = {
  getItem: getItem,
  setItem: setItem,
  clear: clear
}

属性的赋值器（setter）和取值器（getter）事实上也采用了这种写法。

js
var cart = {
  _wheels: 4,

  get wheels () {
    return this._wheels;
  }

  set wheels (value) {
    if (value < this._wheels) {
      throw new Error('数值太小了！');
    }
    this._wheels = value;
  }
}

注意，简洁写法中属性名总是字符串，这会导致一些看上去比较奇怪的结果。

js
var obj = {
  class () {}
}
// 等同于
var obj = {
  'class': function () {}
}

上面的代码中，class是字符串，所以不会因为它属于关键字而导致语法解析报错。

如果某个方法的值是一个Generator函数，则其前面需要加上星号。

js
var obj = {
  * m () {
    yield 'hello world!';
  }
}

属性名表达式

JavaScript语言定义对象的属性有两种方法。

js
// 方法一
obj.foo = true;

// 方法二
obj['a' + 'bc'] = 123;

上面的方法一是用标识符作为属性名；方法二是用表达式作为属性名，这时要将表达式放在方括号内。

但是，如果使用字面量方式定义对象（使用大括号），在ES5只能使用方法一（标识符）定义属性。

js
var obj = {
  foo: true,
  abc: 123
}

ES6允许字面量定义对象时使用表达式作为对象的属性名，即把表达式放在方括号内。

js
let proKey = 'foo';

let obj = {
  [proKey]: true,
  ['a' + 'bc']: 123
}

下面是另一个例子：

js
var lastWord = 'last word';

var a = {
  'first word': 'hello',
  [latWord]: 'world'
};

a['first word'] // 'hello'
a[lastWord] // 'world'
a['last word'] // 'world'

表达式还可以用于定义方法名。

js
let obj = {
  ['h' + 'ello'] () {
    return 'hi';
  }
}

obj.hello() // hi

注意，属性名表达式与简洁表示法不能同时使用，否则会报错。

js
// 报错
var foo = 'bar';
var bar = 'abc';
var baz = { [bar] };
// SyntaxError: Unexpected token }

// 正确
var foo = 'bar';
var baz = { [foo]: 'abc' }

方法的name属性

函数的name属性返回函数名。对象方法也是函数，因此也有name属性。

js
var person = {
  sayName: function () {
    console.log(this.name);
  },

  get firstName () {
    return 'Nicholas';
  }
}

person.sayName.name // 'sayName'
person.firstName.name // 'get firstName'

上面的代码中，方法的name属性返回函数名（即方法名）。如果使用了取值函数，则会在方法名前加上get。如果是存值函数，方法名的前面会加上set。

有两种特殊情况：bind方法创造的函数，name属性返回“bound”加上原函数名；Function构造函数创造的函数，name属性返回“anonymous”。

js
(new Function()).name // 'anonymous'

var doSomething = function () {
  // ...
};
doSomething.bind().name // 'bound doSomething'

如果对象的方法是一个Symbol值，那么name属性返回的是这个Symbol值的描述。

js
const key1 = Symbol('description');
const key2 = Symbol();

let obj = {
  [key1] () {},
  [key2] () {}
}

obj[key1].name // '[description]'
obj[key2].name // ''

上面的代码中，key1对应的Symbol值有描述，key2没有。

Object.is()

Object.is()用来比较两个值是否严格相等。它与严格比较运算符（===）的行为基本一致。

js
Object.is('foo', 'foo') // true

Object.is({}, {}) // false

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

js
+0 === -0 // true
NaN === NaN // false

Object.is(+0, -0) // false
Object.is(NaN, NaN) // true

Object.assign()

Object.assign方法用来将源对象（source）的所有可枚举属性复制到目标对象（target）。它至少需要两个对象作为参数，第一个参数是目标对象，后面的参数都是源对象。只要有一个参数不是对象，就会抛出TypeError错误。

js
var target = { a: 1 };

var source1 = { b: 2 };
var source2 = { c: 3 };

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

注意，如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。

Object.assign方法只复制自身属性，不可枚举的属性（enumerable为false)和继承的属性不会被复制。

js
Object.assign(
  {b: 'c'},
  Object.defineProperty({}, 'invisible', {
    enumerable: false,
    value: 'hello'
  })
)

// {b: c}

上面的代码中，Object.assign方法要复制的对象只有一个不可枚举的属于invisible，这个属性并没有被复制进去。

属性名为Symbol值的属性，也会被Object.assign方法复制。

对于嵌套的对象，Object.assign方法的处理方法是替换，而不是添加。

js
var target = {
  a: {
    b: 'c',
    d: 'e'
  }
};

var source = {
  a: {
    b: 'hello'
  }
};

Object.assign(target, source) // { a: { b: 'hello' } }

上面的代码中，target对象的a属性被source对象的a属性整个替换掉了，不会得到{ a: { b: 'hello', d: 'e' } }这样的结果。这通常不是开发者想要的，需要特别小心。有一些函数库提供Object.assign的定制版本（比如Lodash的_.defaultsDeep方法），可以解决深复制的问题。

注意，Object.assign方法也可用于处理数组，但是会将其视为对象。

js
Object.assign([1, 2, 3], [4, 5]) // [4, 5, 3]

上面的代码中，Object.assign把数组视为属性为名0、1、2的对象，因此目标数组的0号属于会覆盖源数组的0号属于1。

Object.assign方法有很多用处。

为对象添加属性
```
js
class Point {
  constructor (x, y) {
    Object.assign(this, {x, y});
  }
}
```
上面的方法通过assign方法将x属性和y属性添加到了Point类的对象实例。

为对象添加方法

js
Object.assign(SomeClass.prototype, {
  someMethod (arg1, arg2) { ... },
  anotherMethod () { ... }
})

// 等同于下面的写法
SomeClass.prototype.someMethod = function (arg1, arg2) { ... };
SomeClass.prototype.anotherMethod = function () { ... };

上面的代码使用了对象属性的简洁表示法，直接将两个函数放在大括号中，再使用assign方法添加到SomeClass.prototype中。

克隆对象
```
js
function clone (origin) {
  return Object.assign({}, origin);
}
```
上面的代码将原始对象复制到一个空对象，就得到了原始对象的克隆。

不过，采用这种方法克隆，只能克隆原始对象自身的值，不能克隆它继承的值。如果想要保持继承链，可以采用下面的代码。
```
js
function clone (origin) {
  let originProto = Object.getPrototype(origin);
  return Object.assign(Object.create(originProto), origin);
}
```
合并多个对象

将多个对象合并到某个对象。
```
js
const merge = (target, ...sources) => Object.assign(target, ...sources);
```
如果希望合并后返回一个新对象，可以改写上面的函数，对一个空对象合并。
```
js
const merge = (...sources) => Object.assign({}, ...source);
```
为属性指定默认值
```
js
const DEFAULTS = {
  logLevel: 0,
  outputFormat: 'html'
};

function processContent (options) {
  let options = Object.assign({}, DEFAULTS, options);
}
```
上面的代码中，DEFAULS对象是默认值，options对象是用户提供的参数，Object.assign方法将DEFAULTS和options合并成一个新对象，如果两者有同名属性，则options的属性值会覆盖DEFAULTS的属性值。

注意，由于存在深复制的问题，DEFAULTS对象和options对象所有属性的值都只能是简单类型，而不能指向另一个对象。否则，将导致DEFAULTS对象的该属性不起作用。

属性的可枚举性

对象的每个属性都有一个描述对象（Descriptor），用于控制该属性的行为。Object.getOwnPropertyDescriptor方法可以获取该属性的描述对象。

js
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新增了2个操作，会忽略enumerable为false的属性。

Object.assign()：只复制对象自身的可枚举属性。
Reflect.enumerate()：返回所有for...in循环会遍历的属性。

这5个操作中，只有for...in和Reflect.enumerate()会返回继承的属性。实际上，引入enumerable属性的最初目的，就是让某些属性可以规避掉for...in操作。比如，对象原型的toString方法，以及数组的length属性，就是通过这种手段而不会被for...in遍历到。

js
Object.getOwnPropertyDescriptor(Object.prototype, 'toString').enumerable // false

Object.getOwnPropertyDescriptor([], 'length').enumerable // false

另外，ES6规定，所有class的原型方法都是不可枚举的。

js
Object.getOwnPropertyDescriptor(class { foo () {} }.prototye, 'foo').enumerable // false

总得来说，操作中引入继承的属性会让问题复杂化，大多数时候，我们只关心对象自身的属性。所以，尽量不要用for...in循环，而用Object.keys()代替。

属性的遍历

ES6一共有6种方法可以遍历对象的属性。

for...in: 循环遍历对象自身的和继承的可枚举属性（不含Symbol属性）。
Object.keys(obj)：返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含Symbol属性）。
Object.getOwnPropertyNames(obj)：返回一个数组，包含对象自身的所有（不含Symbol属性，但是包括不可枚举属性）。
Object.getOwnPropertySymbols(obj)：返回一个数组，包含对象自身的所有Symbol属性。
Reflect.ownKeys(obj)：返回一个数组，包含对象自身的所有属性，不管属性名是Symbol或字符串，也不管是否可枚举。
Reflect.enumerate(obj)：返回一个Iterator对象，遍历对象自身和继承的所有可枚举属性（不包含Symbol属性），与for...in循环相同。

以上6种方法遍历对象的属性遵守同样的遍历次序规则。

首先遍历所有属性名为数值的属性，按照数字排序。
其次遍历所有属性名为字符串的属性，按照生成时间排序。
最后遍历所有属性名为Symbol值的属性，按照生成时间排序。

js
Reflect.ownKeys({ [Symbol()]: 0, b: 0, 10: 0, 2: 0, a: 0 })
// ['2', '10', 'b', 'a', Symbol()]

上面的代码中，Reflect.ownKeys()返回一个数组，包含了参数对象的所有属性。这个数组的属性次序是这样的：首先是数值属性2和10，其次是字符串属性b和a，最后是Symbol属性。

proto属性，Object.setPrototypeOf()，Object.getPrototypeOf()

proto属性

__proto__属性（前后各两个下划线）用来读取或设置当前对象的prototype对象。目前，所有浏览器（包括IE11）都部署了这个属性。

js
// ES6的写法
var obj = {
  method: function () { ... }
}
obj.__proto__ = someOtherObj;

// ES5的写法
var obj = Object.create(someOtherObj);
obj.method = function () { ... }

该属性没有写入ES6的正文，而是写入了附录，原因是__proto__前后的双下划线说明它本质上是一个内部属性，而不是一个正式对外的API，只是由于浏览器广泛支持，才被加入了ES6。标准明确规定，只有浏览器必须部署这个属性，其他运行环境不一定要部署，而且新的代码最好认为这个属性是不存在的。因此，不论从语义的角度，还是从兼容性的角度，都不要使用这个属性，而是使用Object.setPrototypeOf()（写操作）、Object.getPrototypeOf()（读操作）或Object.create()（生成操作）代替。

在实现上，__proto__调用的是Object.prototype.__proto__，具体实现如下：

js
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__属性，则该属性的值就是对象的原型。

js
Object.getPrototypeOf({
  __proto__: null
}) // null

Object.setPrototypeOf()

Object.setPrototypeOf()的作用与__proto__相同，同样是设置一个对象的prototype对象。它是ES6正式推荐的设置原型对象的方法。

js
// 格式
Object.setPrototypeOf(object, prototype)

// 用法
var o = Object.setPrototypeOf({}, null);

// 该方法等同于
function (obj, proto) {
  obj.__proto__ = proto;
  return obj;
}

// 例子
let proto = {};
let obj = {x: 10};
Object.setPrototypeOf(obj, proto);

proto.y = 20;
proto.z = 40;

obj.x // 10
obj.y // 20
obj.z // 40

上面的例子将proto对象设置为obj对象的原型，所以从obj对象可以读取proto对象的属性。

Object.getPrototypeOf()

该方法与setPrototypeOf()配套，用于读取一个对象的prototype对象。

js
// 格式
Object.getPrototypeOf(obj);

// 例子
function Rectangle () {}

var rec = new Rectangle();

Object.getPrototypeOf(rec) === Rectangle.prototype // true

Object.setPrototypeOf(rec, Object.prototype);

Object.getPrototypeOf(rec) === Rectangle.prototype // false

对象的扩展运算符

目前，ES7有一个提案（https://github.com/sebmarkbage/ecmascript-rest-spread）,将rest参数/扩展运算符（...）引入对象。Babel转码器已经支持这项功能。

rest参数

rest参数用于从一个对象取值，相当于将所有可遍历但尚未被读取的属性，分配到指定的对象上。所有的键及其值都会复制到新对象上。

js
let { x, y, ...z } = {x: 1, y: 2, a: 3, b: 4};
x // 1
y // 2
z // {a: 3, b: 4}

上面的代码中，变量z是rest参数所在的对象。它获取等号右边所有尚未读取的键（a和b），将它们及其值复制过来。

注意，rest参数的复制是浅复制，即如果一个键的值是复合类型的值（数组、对象、函数），那么rest参数复制的是这个值的引用，而不是这个值的副本。

js
let obj = { a: {b: 1} };
let { ...x } = obj;
obj.a.b = 2;
x.a.b // 2

上面的代码中，x是rest参数，复制了对象obj的a属性。a属性引用了一个对象，修改这个对象的值会影响到rest参数对它的引用。

另外，rest参数不会复制继承自原型对象的属性。

js
let o1 = { a: 1 }
let o2 = { b: 2 }
o2.__proto__ = o1
let o3 = { ...o2 }
o3 // { b: 2 }

上面的代码中，对象o3是o2的复制，但是只复制了o2自身的属性，没有复制其原型对象o1的属性。

扩展运算算

扩展运算符用于取出参数对象的所有可遍历属性，复制到当前对象中。

js
let z = { a: 3, b: 4 };
let n = { ...z }
n // {a: 3, b: 4}

这等同于使用Object.assign方法。

js
let aClone = { ... a };
// 等同于
let aClone = object.assign({}, a)

扩展运算符可用于合并两个对象。

js
let ab = { ...a, ...b }

扩展运算符还可以用于自定义属性，会在新对象中覆盖掉原有参数。

js
let aWithOverrides = { ...a, x: 1, y: 2 };
// 等同于
let aWithOverrides = { ...a, ...{x: 1, y: 2} };
// 等同于
let x = 1, y = 2, aWithOverrides = { ...a, x, y };
// 等同于
let aWithOverrides = Object.assign({}, a, {x: 1, y: 2});

上面的代码中，a对象的x属性和y属性复制到新对象后会被覆盖掉。

如果把自定义属性放在扩展运算符前面，就变成了设置新对象的默认属性值。

js
let aWithDefaults = {x: 1, y: 2, ...a};
// 等同于
let aWithDefaults = Object.assign({}, {x: 1, y: 2}, a);
// 等同于
let aWithDefaults = Object.assign({x: 1, y: 2}, a);

扩展运算符的参数对象中，如果朋取值函数get，那么这个函数是会执行的。

js
// 并不会抛出错误，因为x属性只是被定义，但未被执行
let aWithGetter = {
  ...a,
  get x () {
    throws new Error('not thrown yet');
  }
};

// 会抛出错误，因为x属性被执行了
let runtimeError = {
  ...a,
  ...{
    get x () {
      throws new Error('thrown now');
    }
  }
}

如果扩展运算符的参数是null或undefined，则会被忽略，不会报错。

js
let emptyObject = { ...null, ...undefined }; // 不会报错

以上，摘抄自阮一峰老师的《ES6标准入门》

JavaScript ES6

函数的扩展（下）

第7种数据类型：Symbol