ES6: 对象的拓展

属性的简洁表示法

ES6允许直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。

const foo = 'bar'; const baz = {foo}; baz // {foo: "bar"} // 等同于 const baz = {foo: foo}; function f(x, y) { return {x, y}; } // 等同于 function f(x, y) { return {x: x, y: y}; } f(1, 2) // Object {x: 1, y: 2}

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

const o = { method() { return "Hello!"; } }; // 等同于 const o = { method: function() { return "Hello!"; } };

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

function getPoint() { const x = 1; const y = 10; return {x, y}; } getPoint() // {x:1, y:10}

属性名表达式

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

// 方法一 obj.foo = true; // 方法二 obj['a' + 'bc'] = 123;

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

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

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

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

let propKey = 'foo'; let obj = { [propKey]: true, ['a' + 'bc']: 123 }; let lastWord = 'last word'; const a = { 'first word': 'hello', [lastWord]: 'world' }; a['first word'] // "hello" a[lastWord] // "world" a['last word'] // "world"

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

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

注意，属性名表达式如果是一个对象，默认情况下会自动将对象转为字符串[object Object]，这一点要特别小心。

Object.is()

ES6提出Same-value equality（同值相等）算法，用来解决这个问题。Object.is就是部署这个算法的新方法。它用来比较两个值是否严格相等，与严格比较运算符===的行为基本一致。

Object.is('foo', 'foo') // true Object.is({}, {}) // false

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

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

Object.assign()

Object.assign方法用于对象的合并，将源对象source的所有可枚举属性，复制到目标对象target。

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

Object.assign方法的第一个参数是目标对象，后面的参数都是源对象。

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

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

Object.assign方法实行的是浅拷贝

也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。

const obj1 = {a: {b: 1}}; const obj2 = Object.assign({}, obj1); obj1.a.b = 2; obj2.a.b // 2

上面代码中，源对象obj1的a属性的值是一个对象，Object.assign拷贝得到的是这个对象的引用。这个对象的任何变化，都会反映到目标对象上面。

同名属性的替换

对于这种嵌套的对象，一旦遇到同名属性，Object.assign的处理方法是替换，而不是添加。

const target = { a: { b: 'c', d: 'e' } } const source = { a: { b: 'hello' } } Object.assign(target, source) // { a: { b: 'hello' } }

数组的处理

Object.assign可以用来处理数组，但是会把数组视为对象。

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

取值函数的处理

Object.assign只能进行值的复制，如果要复制的值是一个取值函数，那么将求值后再复制。

const source = { get foo() { return 1 } }; const target = {}; Object.assign(target, source) // { foo: 1 }

Object.assign()常见用途

为对象添加属性

class Point { constructor(x, y) { Object.assign(this, {x, y}); } }

为对象添加方法

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

克隆对象

function clone(origin) { return Object.assign({}, origin); }

合并多个对象

const merge = (target, ...sources) => Object.assign(target, ...sources);

为属性指定默认值

const DEFAULTS = { logLevel: 0, outputFormat: 'html' }; function processContent(options) { options = Object.assign({}, DEFAULTS, options); console.log(options); // ... }