ECMAScript 6学习笔记（七）对象的扩展

对象的扩展

• 1.属性的简洁表示法

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

const foo = 'bar';
const baz = {foo};
baz // {foo: "bar"}

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

• 2.属性名表达式

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

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

• 3.方法的 name 属性

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

如果对象的方法使用了取值函数（getter）和存值函数（setter），则name属性不是在该方法上面，而是该方法的属性的描述对象的get和set属性上面，返回值是方法名前加上get和set

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

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

• 4.Object.is()

用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致。
不同之处只有两个：一是+0不等于-0，二是NaN等于自身。

• 5.Object.assign()

Object.assign方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。第一个参数是目标对象，后面的参数都是源对象。
Object.assign拷贝的属性是有限制的，只拷贝源对象的自身属性（不拷贝继承属性），也不拷贝不可枚举的属性（enumerable: false）。

const target = { a: 1 };

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

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

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

注意点
（1）浅拷贝
如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。
（2）同名属性的替换
对于这种嵌套的对象，遇到同名属性，Object.assign的处理方法是替换，而不是添加。

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

（3）数组的处理

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

（4）取值函数的处理
如果要复制的值是一个取值函数，那么将求值后再复制。

const source = {
  get foo() { return 1 }
};
const target = {};

Object.assign(target, source)
// { foo: 1 }

常见用途
（1）为对象添加属性
（2）为对象添加方法
（3）克隆对象
只能克隆原始对象自身的值，不能克隆它继承的值
（4）合并多个对象
（5）为属性指定默认值

---

• 6.属性的可枚举性和遍历

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

-for…in循环：只遍历对象自身的和继承的可枚举的属性。
-Object.keys()：返回对象自身的所有可枚举的属性的键名。
-JSON.stringify()：只串行化对象自身的可枚举的属性。
-Object.assign()： 忽略enumerable为false的属性，只拷贝对象自身的可枚举的属性

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

（1）for…in

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

（2）Object.keys(obj)

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

（3）Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames返回一个数组，包含对象自身的所有属性（不含 Symbol 属性，但是包括不可枚举属性）的键名。

（4）Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols返回一个数组，包含对象自身的所有 Symbol 属性的键名。

（5）Reflect.ownKeys(obj)

Reflect.ownKeys返回一个数组，包含对象自身的所有键名，不管键名是 Symbol 或字符串，也不管是否可枚举。

以上的 5 种方法遍历对象的键名，都遵守同样的属性遍历的次序规则。

首先遍历所有数值键，按照数值升序排列。
其次遍历所有字符串键，按照加入时间升序排列。
最后遍历所有 Symbol 键，按照加入时间升序排列。

• 7.Object.getOwnPropertyDescriptors()

返回指定对象所有自身属性（非继承属性）的描述对象。
该方法的引入目的，主要是为了解决Object.assign()无法正确拷贝get属性和set属性的问题

另一个用处，是配合Object.create方法，将对象属性克隆到一个新对象。这属于浅拷贝。

可以实现一个对象继承另一个对象

也可以用来实现 Mixin（混入）模式

• 8._proto_属性，Object.setPrototypeOf()，Object.getPrototypeOf()

_proto_属性
用来读取或设置当前对象的prototype对象

Object.setPrototypeOf()
与proto相同，用来设置一个对象的prototype对象，返回参数对象本身。它是 ES6 正式推荐的设置原型对象的方法。

Object.getPrototypeOf()
该方法与Object.setPrototypeOf方法配套，用于读取一个对象的原型对象。

• 9.super 关键字

关键字super，指向当前对象的原型对象。

const proto = {
  foo: 'hello'
};

const obj = {
  find() {
    return super.foo;
  }
};

Object.setPrototypeOf(obj, proto);
obj.find() // "hello"

• 10.Object.keys()，Object.values()，Object.entries()

Object.keys()
ES5 引入了Object.keys方法，返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键名。
ES2017 引入了跟Object.keys配套的Object.values和Object.entries，作为遍历一个对象的补充手段，供for…of循环使用。

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

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

---

• 11.对象的扩展运算符

（1）解构赋值
对象的解构赋值用于从一个对象取值，相当于将所有可遍历的、但尚未被读取的属性，分配到指定的对象上面。所有的键和它们的值，都会拷贝到新对象上面。

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

扩展运算符的解构赋值，不能复制继承自原型对象的属性。

（2）扩展运算符
扩展运算符（…）用于取出参数对象的所有可遍历属性，拷贝到当前对象之中。

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

等同于使用Object.assign方法。

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

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

如果用户自定义的属性，放在扩展运算符后面，则扩展运算符内部的同名属性会被覆盖掉。

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 });

用来修改现有对象部分的属性就很方便

let newVersion = {
  ...previousVersion,
  name: 'New Name' // Override the name property
};

与数组的扩展运算符一样，对象的扩展运算符后面可以跟表达式。

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

---

• 12.Null 传导运算符
  ?.运算符，只要其中一个返回null或undefined，就不再往下运算，而是返回undefined。

const firstName = (message
  && message.body
  && message.body.user
  && message.body.user.firstName) || 'default';

//引入了“Null 传导运算符” ?.  简化上面的写法。
const firstName = message?.body?.user?.firstName || 'default';

“Null 传导运算符”有四种用法。

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

// 如果 a 是 null 或 undefined, 返回 undefined
// 否则返回 a.b.c().d
a?.b.c().d

// 如果 a 是 null 或 undefined，下面的语句不产生任何效果
// 否则执行 a.b = 42
a?.b = 42

// 如果 a 是 null 或 undefined，下面的语句不产生任何效果
delete a?.b

---