ECMAScript 6（14）对象的新增方法

r囧r小猫 2021-09-19 15:40 411阅读 0赞

**目录**

1.  判断两个变量是否相等 Object.is()

2.  合并对象属性 Object.assign()

2.1  解释

2.2  属性覆盖

2.3  可枚举

2.4  参数一必须是对象或者可以转为对象

2.5  其他参数会隐式转换为对象，并且将可枚举属性添加进去

2.6  这种拷贝方法是浅拷贝

2.7  对setter和getter不会正确生效

3.  Object.getOwnPropertyDescriptors()  返回描述对象

4.  \_\_proto\_\_属性（前后各两个下划线）

5.  Object.setPrototypeOf()，Object.getPrototypeOf()

5.1 Object.setPrototypeOf方法设置一个对象的原型对象。

5.2 Object.getPrototypeOf方法读取一个对象的原型对象。

6.  获取对象所有key  (Object.keys())

7.  获取对象所有值(Object.values())

8.  获取对象所有key和value (Object.entries())

9.  键值对数组转为对象 Object.fromEntries()

--------------------

## 1.  判断两个变量是否相等 Object.is() ##

> Object.is(value1, value2)

简单的说, 就是判断2个值是否相等, 相等返回true, 不等返回false.

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

它与严格比较运算符（===）的行为基本一致, 但是又不太一样.

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

## 2.  合并对象属性 Object.assign() ##

### 2.1  解释 ###

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

> Object.assign(target, …sources)

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

###  2.2  属性覆盖 ###

同名属性，参数位置靠后者覆盖靠前者。

var foo = {
        name: "1"
    }
    var target = {
        name: "target"
    }
    Object.assign(target, foo);
    console.log(target.name);    //"1"

### 2.3  可枚举 ###

具体来说，就是该属性enumerable值为false时，不会合并,如代码

### 2.4  参数一必须是对象或者可以转为对象 ###

参数一如果不是对象，那么至少要能转为对象,

var num = Object.assign(1);
    console.log(num);    //Number {[[PrimitiveValue]]: 1}
    
    //作为对比
    new Number(1);    //Number {[[PrimitiveValue]]: 1}

var num = Object.assign(1);
    typeof num; //"object"
    Object.assign(num, {name: "obj"});
    num.name;   //"obj"
    num + 10;   //11
    Object.prototype.toString.call(num);    //"[object Number]"

基本类型里，参数不能是 `null` 和 `undefined` 。函数也不行

### 2.5  其他参数会隐式转换为对象，并且将可枚举属性添加进去 ###

### 2.6  这种拷贝方法是浅拷贝 ###

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

### 2.7  对setter和getter不会正确生效 ###

## 3.  Object.getOwnPropertyDescriptors()  返回描述对象 ##

返回指定对象所有自身属性（非继承属性）的描述对象

Object.getOwnPropertyDescriptors(obj)

示例方法 :

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

## 4.  `__proto__`属性（前后各两个下划线） ##

用来读取或设置当前对象的`prototype`对象。

**prototype：**

1.  显式原型；
2.  函数专有（因为需要通过函数来创建实例）；
3.  指向函数的原型对象；
4.  默认情况下（未改变指向目标），有constructor属性，指向函数本身，即Fun.prototype.constructor === Fun为true；
5.  当改变了prototype的情况下，例如Child和Father都是函数，然后 Child.prototype = new Father() ；
6.  那么Child的prototype指向Father的实例，而Father的实例因为不是函数，因此只有 \_\_proto\_\_ 属性，因此Child.prototype也只有\_\_proto\_\_属性；
7.  又因为Father的实例只有\_\_proto\_\_属性，且该属性指向Father的prototype属性，因此Child.prototype.\_\_proto\_\_ == Father.prototype的值为true；

**\_\_proto\_\_：**

1.  隐式原型；
2.  根据ECMA定义 ‘to the value of its constructor’s “prototype” ’ —-指向创建这个对象的函数的显式原型；
3.  因此 (new Fun()).\_\_proto\_\_ === Fun.prototype 的值为true；

更多原型链知识请参考 :

1.对象有属性\_\_proto\_\_,指向该对象的构造函数的原型对象。  
2.方法除了有属性\_\_proto\_\_,还有属性prototype，prototype指向该方法的原型对象。

[https://www.zhihu.com/question/34183746][https_www.zhihu.com_question_34183746]

![e83bca5f1d1e6bf359d1f75727968c11_hd.jpg][]

## 5.  Object.setPrototypeOf()，Object.getPrototypeOf() ##

### `5.1 Object.setPrototypeOf`方法设置一个对象的原型对象。 ###

Object.setPrototypeOf(object, prototype)

示例代码

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

![2019052910133935.png][]

### `5.2 Object.getPrototypeOf`方法读取一个对象的原型对象。 ###

Object.getPrototypeOf(obj);

示例代码

function Foo() {
      // ...
    }
    
    const foo = new Foo();
    
    Object.getPrototypeOf(foo) 
    // {constructor: ƒ}constructor: ƒ Foo()__proto__: Object

参数不是对象自动转为对象

Object.getPrototypeOf(1)
    // Number {0, constructor: ƒ, toExponential: ƒ, toFixed: ƒ, toPrecision: ƒ, …}
    
    Object.getPrototypeOf('foo')
    // String {"", constructor: ƒ, anchor: ƒ, big: ƒ, blink: ƒ, …}
    
    Object.getPrototypeOf(true)
    // Boolean {[[PrimitiveValue]]: false}
    
    Object.getPrototypeOf(1) === Number.prototype // true
    Object.getPrototypeOf('foo') === String.prototype // true
    Object.getPrototypeOf(true) === Boolean.prototype // true

## 6.  获取对象所有key  (Object.keys()) ##

> Object.keys(obj)

获取obj对象，非原型链上，enumberable的值为true的所有属性的key，依次放到数组中并返回该数组。

`undefined`或`null`，它们无法转为对象,会报错

该方法都是获取对象的第一层的值,嵌套对象不会获取

var obj = {a:12,b:{aa:123,bb:456}}
    
    Object.keys(obj)  // ["a", "b"]

## 7.  获取对象所有值(Object.values()) ##

> Object.values(obj)

获取obj对象，非原型链上，enumberable的值为true的所有属性的key，依次放到数组中并返回该数组。

属性名为数值的属性，是按照数值大小，从小到大遍历的

const obj = { 100: 'a', 2: 'b', 7: 'c' };
    Object.values(obj)
    // ["b", "c", "a"]

## 8.  获取对象所有key和value (Object.entries()) ##

> Object.entries(obj)

对非原型链，以及enumerable值为true的才有效。

会自动过滤属性名为 Symbol 值的属性。

返回一个数组，数组的每个元素是一个key+val组合。

返回数组的每个元素也是一个数组，下标为0的地方为key，下标为1的为value。

var obj = Object.create({a: "A"}, {
        b: {
            value: "B",
            enumerable: true
        },
        c: {
            value: "C",
            enumerable: true
        }
    });
    console.log(Object.entries(obj));   //[["b", "B"], ["c", "C"]]

## 9.  键值对数组转为对象 `Object.fromEntries()` ##

`Object.fromEntries()`方法是`Object.entries()`的逆操作，用于将一个键值对数组转为对象。

可用于Map 解构转为对象

const entries = new Map([
      ['foo', 'bar'],
      ['baz', 42]
    ]);
    
    Object.fromEntries(entries)
    // { foo: "bar", baz: 42 }

[https_www.zhihu.com_question_34183746]: https://www.zhihu.com/question/34183746
[e83bca5f1d1e6bf359d1f75727968c11_hd.jpg]: /images/20210726/84bfe165f00148bb99d0adddcfcbd4c0.png
[2019052910133935.png]: /images/20210726/84461536ce5846ceabb6c81ad446ef8a.png