ES6对象的扩展

Posted 2020-11-26 mijiujs

Object.setPrototypeOf(obj, proto)

Object.getPrototypeOf(obj)

Object.getOwnPropertyDescriptor(obj,property)

获取该属性的描述对象。描述对象的enumerable属性，称为“可枚举性”，如果该属性为false，下列操作会忽略当前属性

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

对象原型的toString方法，以及数组的length属性，就通过“可枚举性”，从而避免被for...in遍历到。

属性的遍历

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 键，按照加入时间升序排列。

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

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

super 关键字

this关键字总是指向函数所在的当前对象

super关键字总是指向当前对象的原型对象

const proto = {
  foo: ‘hello‘
};

const obj = {
  foo: ‘world‘,
  find() {
    return super.foo;
  }
};

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

super关键字表示原型对象时，只能用在对象的方法之中，用在其他地方都会报错。

目前，只有对象方法的简写法可以让 javascript 引擎确认，定义的是对象的方法。

// 报错
const obj = {
  foo: () => super.foo
}

// 报错
const obj = {
  foo: function () {
    return super.foo
  }
}

JavaScript 引擎内部，super.foo等同于Object.getPrototypeOf(this).foo（属性）或Object.getPrototypeOf(this).foo.call(this)（方法）。　

解构赋值，扩展运算符

链判断运算符

编程实务中，如果读取对象内部的某个属性，往往需要判断一下该对象是否存在。

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

ES20引入了“链判断运算符”（optional chaining operator）?.，简化上面的写法。

const firstName = message?.body?.user?.firstName || ‘default‘;

下面是判断对象方法是否存在，如果存在就立即执行的例子。

iterator.return如果有定义，就会调用该方法，否则直接返回undefined。

iterator.return?.()

Null 判断运算符 

读取对象属性的时候，如果某个属性的值是null或undefined，有时候需要为它们指定默认值。常见做法是通过||运算符指定默认值。

const headerText = response.settings.headerText || ‘Hello, world!‘;

但是属性的值如果为空字符串或false或0，默认值也会生效。

ES2020引入了一个新的 Null 判断运算符??，默认值只有在属性值为null或undefined时，才会生效。

const headerText = response.settings.headerText ?? ‘Hello, world!‘;

跟链判断运算符?.配合使用，为null或undefined的值设置默认值。

const animationDuration = response.settings?.animationDuration ?? 300;