es6对象的扩展、对象的新增方法

es6对象的扩展、对象的新增方法

属性的简写

const obj = {foo} => const obj = {foo:foo};
let s = {getName(){}} => let s = {getName:function(){}}
1
2

属性名的表达式

let prop = foo;
let obj = {
	s:1
	[prop]:true
}
console.log(obj.s);
console.log(obj[prop])
1
2
3
4
5
6
7

属性的可枚举属性，和遍历

        let obj = {
            name:'james',
            age:18
        };        console.log(Object.getOwnPropertyDescriptor(obj,'name'));
1
2
3
4

enumerable就是是否可枚举的属性

目前，有四个操作会忽略enumerable为false的属性。
for…in循环：只遍历对象自身的和继承的可枚举的属性，这就是为什么我们使用for in循环时必须加上判断循环出的属性名是否是当前对象的还是继承父元素的。

        for (const key in object) {
            if (Object.hasOwnProperty.call(object, key)) {
                const element = object[key];
            }
        }
1
2
3
4
5

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

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

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

super关键字

我们知道，this关键字总是指向函数所在的当前对象，ES6 又新增了另一个类似的关键字super，指向当前对象的原型对象。

const proto = {
  foo: 'hello'
};

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

Object.setPrototypeOf(obj, proto);
obj.find() // "hello"
1
2
3
4
5
6
7
8
9
10
11
12
13

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

对象新增的方法

• Object.is()，ES5 比较两个值是否相等，只有两个运算符：相等运算符（）和严格相等运算符（=）。它们都有缺点，前者会自动转换数据类型，后者的NaN不等于自身，以及+0等于-0。JavaScript 缺乏一种运算，在所有环境中，只要两个值是一样的，它们就应该相等。
  Object.is()与===基本相同，不同之处只有两个：一是+0不等于-0，二是NaN等于自身。
• Object.assign()，Object.assign()方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target），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}
1
2
3
4
5

如果只有一个参数，Object.assign()会直接返回该参数。

const obj = {a: 1};
Object.assign(obj) === obj // true
1
2

如果目标对象不是对象就会先转成对象，由于undefined和null无法转成对象，所以如果它们作为参数，就会报错，如果非对象参数出现在源对象的位置（即非首参数），那么处理规则有所不同。首先，这些参数都会转成对象，如果无法转成对象，就会跳过。这意味着，如果undefined和null不在首参数，就不会报错。
Object.assign()有很多功能例如，浅拷贝、为对象添加属性等

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

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

Object.getOwnPropertyDescriptors(obj)
// { foo:
//    { value: 123,
//      writable: true,
//      enumerable: true,
//      configurable: true },
//   bar:
//    { get: [Function: get bar],
//      set: undefined,
//      enumerable: true,
//      configurable: true } }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

• Object.setPrototypeOf()
  为一个对象设置原型，Object.setPrototypeOf(目标对象,源对象);当目标对象不是对象时会自动转成对象，但当目标对象是undefined或者null，因为它们不能转为对象所以会报错。

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
1
2
3
4
5
6
7
8
9
10

• Object.getPrototypeOf()
  该方法与Object.setPrototypeOf方法配套，用于读取一个对象的原型对象，和setPrototypeOf()一样，不是对象转对象，undefined和null会报错。
• Object.keys()，Object.values()，Object.entries() ，Object.fromEntries()
  ES5 引入了Object.keys方法，返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键名。
  Object.values方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值。
  Object.entries()方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值对数组。
  Object.fromEntries()方法是Object.entries()的逆操作，用于将一个键值对数组转为对象。

console.log(
    Object.fromEntries(
        [
            ['key',1],
            ['key2',2]
        ]
    )
)
VM266:1 {key: 1, key2: 2}
1
2
3
4
5
6
7
8
9

• Object.hasOwn()
  JavaScript 对象的属性分成两种：自身的属性和继承的属性。对象实例有一个hasOwnProperty()方法，可以判断某个属性是否为原生属性。ES2022 在Object对象上面新增了一个静态方法Object.hasOwn()，也可以判断是否为自身的属性。
  Object.hasOwn()可以接受两个参数，第一个是所要判断的对象，第二个是属性名。

参考网站，阮老师