ES6 Object新方法 最全解释

 

Object对象是JS的重要核心内容，本篇文章笔者将带着大家一起熟悉下重点的ES6、ES7、ES8新方法。
 

一、Object的遍历属性

        let obj = {

            name: '李丽',

            sex: '女',

            skill: function () {}

        }

        /Object.keys遍历属性

        Object.keys(obj) //["name", "sex", "skill"]返回对象属性数组

 

        / Object.values遍历value/

        Object.values(obj) //["李丽", "女", function]返回对象属性value值数组

 

        /Object.entries遍历键值对返回数组/

        Object.entries(obj) //[['name','李丽'],['sex', '女'], ['skill',function]]返回对象键值对数组

        

         /Object.fromEntries()遍历一个键值对数组转为对象/

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

       

Object.fromEntries([
  ['foo', 'bar'],
  ['baz', 42]
])
// { foo: "bar", baz: 42 }

      该方法的主要目的，是将键值对的数据结构还原为对象，因此特别适合将 Map 结构转为对象。

// 例一
const entries = new Map([
  ['foo', 'bar'],
  ['baz', 42]
]);

Object.fromEntries(entries)
// { foo: "bar", baz: 42 }

// 例二
const map = new Map().set('foo', true).set('bar', false);
Object.fromEntries(map)
// { foo: true, bar: false }

     该方法的一个用处是配合URLSearchParams对象，将查询字符串转为对象。       

Object.fromEntries(new URLSearchParams('foo=bar&baz=qux'))
// { foo: "bar", baz: "qux" }

        /Object.getOwnPropertyNames遍历属性(枚举+不可枚举)/

        Object.getOwnPropertyNames(obj) //["a", "b", "c"]返回对象包括不可枚举的属性数组

二、Object的合并属性 Object.assign()

 该方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。它至少需要两个对象作为参数，第一个参数是目标对象，后面的参数都是源对象。

        // 对象的合并

        let obj3 = {a: 1,b: 2};

        let obj1 = {a: 1,b: 2};

        let obj2 = {a: 'a',c: 3};

        Object.assign(obj3, { c: 3

        }); //obj={a:1,b:2,c:3}

        Object.assign(obj1, obj2); //obj1={a:'a',b:2,c:3}

        Object.assign({}, obj1, obj2); //返回新对象{a:'a',b:2,c:3}

        // 数组的合并

        let arr = [1, 2, 3];

        Object.assign(arr, ['a']); //arr=['a',2,3]

 

        let arr1 = [1, 2, 3];

        let arr2 = [, , , 'a', 'b', 'c']

        Object.assign([], arr1, arr2); //返回新数组[1, 2, 3, "a", "b"]

三、Object.is() 

方法用于确定两个值是否相等。 它类似于 === 运算符， 但Object.is() 方法有一些特殊情况和使用“ === ”的结果是不一致的， 如下段代码所示：

        console.log(Object.is(0, -0)); //false

        console.log(0 === -0); //true

        console.log(Object.is(NaN, 0 / 0)); //true

        console.log(NaN === 0 / 0); //false

        console.log(Object.is(NaN, NaN)); //true

        console.log(NaN === NaN); //false   

四、语法简写

        //定义属性 

        //ES5

        var a = 1,b = 2;

        var object = {  x: a,   y: b};

        //ES6

        let x = 1;y = 2;

        let object = {x,y};

        console.log(object.x);

        //定义方法

        //ES5

        let object = {

            myFunction: function () {

                console.log("Hello World!!!");

                //Output "Hello World!!!"

            }

        };

        //ES6

        let object = {

            myFunctions() {

                console.log("Hello World!!!") // "Hello World!!!"

            }

        };

        object.myFunction();

五:Object.setPrototypeOf()  为现有对象设置原型，返回一个新对象。

Object.setPrototypeOf方法接受两个参数，第一个是现有对象，第二个是原型对象。Object.setPrototypeOf() 是给对象设置原型，是为了obj.proto = .... 这种写法更优雅，有更好的兼容性。它是 ES6 正式推荐的设置原型对象的方法。如下段代码所示：

// 格式
Object.setPrototypeOf(object, prototype)

// 用法
const o = Object.setPrototypeOf({}, null);

该方法等同于下面的函数。

function setPrototypeOf(obj, proto) {
  obj.__proto__ = proto;
  return obj;
}

下面是一个例子。

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

如果第一个参数不是对象，会自动转为对象。但是由于返回的还是第一个参数，所以这个操作不会产生任何效果。

Object.setPrototypeOf(1, {}) === 1 // true
Object.setPrototypeOf('foo', {}) === 'foo' // true
Object.setPrototypeOf(true, {}) === true // true

由于undefined和null无法转为对象，所以如果第一个参数是undefined或null，就会报错。

Object.setPrototypeOf(undefined, {})
// TypeError: Object.setPrototypeOf called on null or undefined

Object.setPrototypeOf(null, {})
// TypeError: Object.setPrototypeOf called on null or undefined

六、Object.getPrototypeOf() 

该方法与Object.setPrototypeOf方法配套，用于读取一个对象的原型对象。
例子：
 

function Rectangle() {
  // ...
}

const rec = new Rectangle();

Object.getPrototypeOf(rec) === Rectangle.prototype
// true

Object.setPrototypeOf(rec, Object.prototype);
Object.getPrototypeOf(rec) === Rectangle.prototype
// false

如果参数不是对象，会被自动转为对象。

// 等同于 Object.getPrototypeOf(Number(1))
Object.getPrototypeOf(1)
// Number {[[PrimitiveValue]]: 0}

// 等同于 Object.getPrototypeOf(String('foo'))
Object.getPrototypeOf('foo')
// String {length: 0, [[PrimitiveValue]]: ""}

// 等同于 Object.getPrototypeOf(Boolean(true))
Object.getPrototypeOf(true)
// Boolean {[[PrimitiveValue]]: false}

Object.getPrototypeOf(1) === Number.prototype // true
Object.getPrototypeOf('foo') === String.prototype // true
Object.getPrototypeOf(true) === Boolean.prototype // true

如果参数是undefined或null，它们无法转为对象，所以会报错。

Object.getPrototypeOf(null)
// TypeError: Cannot convert undefined or null to object

Object.getPrototypeOf(undefined)
// TypeError: Cannot convert undefined or null to object