ES6 对象的扩展

属性的简洁表示法

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

var foo = 'bar'
var baz = {foo}

baz // {foo: 'bar'}

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

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

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

// 等同于

function f(x, y) {
    return {x: x, y: y}
}

方法也可以简写

var o = {
    method() {
        return 'hello'
    }
}

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

属性名表达式

JavaScript定义对象的属性有两种方式：

• obj.foo = true
• obj['a' + 'bc'] = 123

方法一直接使用标识符作为属性名

方法二使用表达式作为属性名

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

es6 允许字面量定义对象时用方法二（表达式作为对象的属性名）

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

// 报错
var foo = 'bar'
var bar = 'abc'
var baz = { [foo] }

属性名表达式如果是一个对象，默认情况下会自动将对象转为字符串[object，object]，如果一个对象的两个属性都是对象的话，前者会被后者覆盖，因为都是[object，object]属性。

方法的name属性

函数的name属性返回函数名

如果对象的方法使用了getter和setter，则name属性不是在该方法上，而是在该方法属性的描述对象的get和set属性上。

有两种特殊情况：

• bind方法创造的函数，name属性返回'bound'加上原函数的名字
• Function构造函数创造的函数，name属性返回'anonymous'

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

Object.is()

ES5 比较两个值是否相等，只有两个运算符：相等运算符（==）和严格相等运算符（===），前者会自动转换数据类型，后者的NaN不等于自身，-0等于+0。

Object.is()方法用于判断两个值是否严格相等。

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

Object.assign()

基本用法

Object.assign()方法用于将源对象的所有可枚举属性复制到目标对象

var target = {a: 1}
var sourcel1 = {b: 2}
var sourcel2 = {c: 3}

Object.assign(target, sourcel1, sourcel2)
target // {a: 1, b: 2, c: 3}

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

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

var target = {a: 1, b: 1}
var source1 = {b: 2, c: 2}
var source2 = {c: 3}

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

只有一个参数，Object.assign会直接返回该参数，如果该参数不是对象，则会先转成对象，再返回。

由于undefined和null无法转换为对象，所以如果他们作为参数就会报错。

如果非对象参数出现在源对象的位置（即非首参数），那么处理规则将有所不同。首先，这些参数会转换成对象，如果无法转换成对象，则会跳过。（字符串会以数组形式复制到目标对象中，因为只有字符串的包装对象会产生可以枚举的属性）

Object.assign复制的属性是有限制的，只复制源对象自身属性（不复制继承属性），也不复制不可枚举的属性（enumerable: false）

注意点

Object.assign方法实行的复制是浅复制，而不是深复制。也就是说源对象某个属性的值是对象，那么目标对象复制得到的是这个对象的引用

var obg1 = {a: {b: 1}}
var obj2 = Object.assign({}, obj1)

obj1.a.b = 2
obj2.a.b  // 2

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

var target = {a: {b: 'c', d: 'e'}}
var source = {a: {b: 'hello'}}

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

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

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

常见用途

对象添加属性

对象添加方法

克隆对象

合并多个对象

属性指定默认值

const DEFAULTS = {
    logLevel: 0,
    outputFormat: 'html'
}

function processContent(options) {
    options = Object.assign(DEFAULTS, options)
    console.log(options)
}
// DEFAULTS 就是默认值

属性的可枚举性

对象的每个属性都具有一个描述对象（Descriptor）,用于控制该属性的行为。

Object.getOwnPropertyDescriptor方法可以获取该属性的描述对象

let obj = {foo: '123'}
Object.getOwnPropertyDescriptor(obj, 'foo')

//{
//    value: "123"
//    writable: true
//    enumerable: true
//    configurable: true
//}

描述对象的enumerable属性称为“可枚举性”如果该属性为fasle，就表示某些操作会忽略当前属性。

ES5 有三个操作会忽略enumerable为false的属性

• for...in循环：只遍历对象自身的和可继承的可枚举属性
• Object.keys()：返回对象自身的所有可枚举属性的键名
• JSON.stringify()：只串行化对象自身的可枚举属性

ES6 新增了一个操作Object.assign()，会忽略enumerable为false的属性，只复制对象自身的可枚举属性。

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

尽量少用for...in循环，而使用Object.keys()代替

属性的遍历

ES6 共有5种方法可以遍历对象的属性：

for...in

循环遍历对象自身的和继承的可枚举属性（不含Symbol属性）

Object.keys(obj)

返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含Symbol属性）

Object.getOwnPropertyNames(obj)

返回一个数组，包含对象自身的所有Symbol属性

Reflect.ownKeys(obj)

返回一个数组，包含对象自身的所有属性，不管属性名是Symbol还是字符串，也不管是否可枚举

以上五种方法，遍历对象的属性时遵守同样的属性遍历次序规则：

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

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

__proto__属性

用来读取或设置当前对象的prototype对象，指向对象的原型。不建议使用，因为这是内部属性

Object.setPrototypeOf()

设置原型链对象的方法

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

// 用法
Object.setPrototypeOf({}, null)

例子：

let proto = {}
let obj = {x: 10}
Object.setPrototypeOf(obj, proto)

proto.y = 20
proto.z = 40

obj.y // 20
obj.z // 40

如果第一个参数不是对象，则会自动转为对象。但由于返回的还是第一个参数，所以这个操作不会产生任何效果。

由于undefined和null无法转换为对象，所以如果第一个参数时undefined或null就会报错。

Object.getPrototypeOf()

Object.getPrototypeOf方法用于读取一个对象的prototype对象。

// 格式
Object.getPrototypeOf(obj)

如果参数不是对象，则会被自动转换为对象。

如果参数是undefined或null则会报错。

Object.keys()

Object.keys方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键名。

var obj = {foo: 'bar', baz: '42'}
Object.keys(obj)
// ['foo', 'baz']

可搭配for...in使用

Object.values()

Object.values方法返回一个数组，成员是参与对象自身的（不含继承的）所有可遍历（enumerable）属性的键值。

var obj = {foo: 'bar', baz: '42'}
Object.values(obj)
// ['bar', 42]

返回数组的成员顺序，与本章的“属性的遍历”保持一致

Object.values方法只返回自身的可遍历属性，原型的属性除非显式设置enumerable为true

Object.values方法会过滤属性名为Symbol值的属性

Object.values({[Symbol()]: 123, foo: 'abc'})
// ["abc"]

如果参数是一个字符串，则会返回各个字符组成的数组

Object.values('foo')
// ["f", "o", "o"]

字符串会先转化为类数组对象，字符串的每个值就是该对象的属性

如果参数不是对象，Object.values会将其先转化为对象，由于数值和布尔值的包装对象都不会为实例添加非继承属性，所有Object.values会返回空数组。

Object.entries()

Object.entries方法返回一个数组，成员是参与对象自身的（不含继承的）所有可遍历（enumerable）属性的键值对数组。

var obj = {foo: 'bar', baz: 42}
Object.entries(obj)

// [["foo", "bar"], ["baz", 42]]

除了返回值不同，该方法与Object.values基本一致

如果原对象的属性名是一个Symbol值，该属性会被忽略。

Object.entries的基本用途是遍历对象的属性

Object.entries还可以将对象转换为真正的map结构

var obj = {foo: 'bar', baz: 42}
var map = new Map(Object.entries(obj))
map // Map(2) {foo: "bar", baz: 42}

对象的扩展运算符

解构赋值：

对象的解构赋值用于从一个对象取值，相当于将所有可遍历的、但尚未被读取的属性分配到指定的对象上面。

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

由于解构赋值要求等号右边是一个对象，所有如果等号右边是undefined或null就会报错，因为他们无法转换为对象。

解构赋值必须是最后一个参数，否则就会报错。

解构赋值是浅复制（如果一个键的值是复合类型的值（数组， 对象， 函数）那么解构赋值复制的是这个值的引用，而不是这个值的副本）

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

obj.a.b = 2;
x.a.b // 2

解构赋值不会复制继承自原型对象的属性

let o1 = {a: 1};
let o2 = {b: 2};
o2.__proto__ = o1;

let {...o3} = o2;
o3 // {b: 2}
o3.a // undefined

扩展运算符

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

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

这样复制等同于Object.assign()方法（浅复制）。

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

深复制的方法：

// 方法一
const clone1 = {
    __proto__: Object.getPrototypeOf(obj),
    ...obj
}

// 方法二
const clone2 = Object.assign(
    Object.create(Object.getPrototypeOf(obj)),
    obj
)

扩展运算符可用于合并对象：

let ab = {...a, ...b};
// 等同于
let ab = Object.assign({}, a, b);

如果用户自定义的属性放在扩展运算符后面，则扩展运算符内部的同名属性会被覆盖。（可修改现有对象的部分属性）

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

对象的扩展运算符后可以带有表达式

const obj = {
    ...(x > 1 ? {a: 1} : {}),
    b: 2
}

对象的扩展运算符后面是一个空对象，则没有任何效果

扩展运算符的参数是null或undefined，则这两个值会被忽略，不会报错

let obj = {...null, ...undefined}; // 不报错

扩展运算符的参数中如果有取值函数get，这个函数将会被执行。

Object.getOwnPropertyDescriptors()

ES5的 Object.getOwnPropertyDescriptor()方法用来返回某个对象属性的描述对象。

let obj = {p: 'a'};
Object.getOwnPropertyDescriptor(obj, 'p');
// {value: "a", writable: true, enumerable: true, configurable: true}

ES2017引入了Object.getOwnPropertyDescriptors()方法，返回指定对象的所有自身属性（非继承属性）的描述对象。

const obj = {
    foo: 123,
    get bar() {return 'abc'}
};
Object.getOwnPropertyDescriptors(obj);

{
    foo: {value: 123, writable: true, enumerable: true, configurable: true}
    bar: {set: undefined, enumerable: true, configurable: true, get: bar()}
}

该方法主要为了解决Object.assign()无法正确复制get和set属性的问题。Object.assign()方法复制的是属性的值，而不会复制它背后的赋值方法或取值方法。

Object.getOwnPropertyDescriptors()方法配合Object.defineProperties()方法可解决此问题。

Object.defineProperties() 方法直接在一个对象上定义新的属性或修改现有属性，并返回该对象。

const source = {
    set foo(value) {
        console.log(value)
    }
};
const target2 = {};
Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source));
Object.getOwnPropertyDescriptor(target2, 'foo');
// {get: undefined, enumerable: true, configurable: true, set: foo()}

Object.getOwnPropertyDescriptors()方法的另一个用处是，配合Object.create()方法将对象的属性克隆到一个新对象。这属于前复制

const clone = Object.create(Object.getPrototypeOf(obj),
Object.getOwnPropertyDescriptors(obj));

// 或者
const shallowClone = (obj) => Object.create(
    Object.getPrototypeOf(obj),
    Object.getOwnPropertyDescriptors(obj)
)

另外，Object.getOwnPropertyDescriptors()方法可以实现一个对象继承另一个对象。

const obj = Object.create(
    prot,
    Object.getOwnPropertyDescriptors({
        foo: 123
    })
)

Object.getOwnPropertyDescriptors()方法也可以用来实现mixin模式。

Null传导运算符

用于简化非空判断的书写

const name = message?.body?.user?.name || '123';

// 等同于

const name = (message
    && message.body
    && message.body.user
    && message.body.user.name) || '123';

Null传导运算符的4种用法：

• obj?.prop: 读取对象属性
• obj?.[expr]: 同上
• func?.(...args): 函数或对象方法的调用
• new C?.(...args): 构造函数的调用