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

 

目录

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时，不会合并,如代码

var foo = Object.defineProperty({}, "name", {
    value: "foo",
    enumerable: false
})
console.log(foo.name);    //"foo"
var target = {
    name: "target"
}
Object.assign(target, foo);
console.log(target.name);    //"target"

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

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

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 = Object.create({a: "A"}, {
    b: {
        value: "B",
        enumerable: true
    }
});
console.log(Object.keys(obj));  //["b"]
console.log(Object.values(obj));    //["B"]

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

var obj = {a:12,b:{aa:123,bb:456}}

Object.keys(obj)  // ["a", "b"]

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

Object.values(obj)

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

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

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

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 }