ES6 对象的扩展

1、Object.assign()

方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
注意该方法实行的是浅拷贝,而不是深拷贝。

const object1 = {
  a: 1,
  b: 2,
  c: 3
};
const object2 = Object.assign({c: 4, d: 5}, object1);
//{c: 3, d: 5, a: 1, b: 2}

用途很多;
1、为对象添加属性

class Point {
  constructor(x, y) {
    Object.assign(this, {x, y});
  }
}

2、合并多个对象

const merge =  (target, ...sources) => Object.assign(target, ...sources);

如果希望合并后返回一个新对象,可以改写上面函数,对一个空对象合并。

const merge = (...sources) => Object.assign({}, ...sources);

2、Object.is()

它用来比较两个值是否严格相等,与严格比较运算符(===)的行为基本一致。
不同之处只有两个:一是+0不等于-0,二是NaN等于自身。

+0 === -0 //true
NaN === NaN // false

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

3、Object.key() 、Object.values()、Object.entries()

这3个都会返回一个数组

var obj = { foo: 'bar', baz: 42 };
Object.keys(obj)
// ["foo", "baz"] 

var obj = { foo: 'bar', baz: 42 };
Object.values(obj)
// ["bar", 42]

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

结合for…of使用

let {keys, values, entries} = Object;
let obj = { a: 1, b: 2, c: 3 };

for (let key of keys(obj)) {
  console.log(key); // 'a', 'b', 'c'
}

for (let value of values(obj)) {
  console.log(value); // 1, 2, 3
}

for (let [key, value] of entries(obj)) {
  console.log([key, value]); // ['a', 1], ['b', 2], ['c', 3]
}

4、Object.create()

Object.create()方法创建一个新对象,使用现有的对象来提供新创建的对象的__proto__

Object.create(proto, [propertiesObject])

方法接受两个参数
proto新创建对象的原型对象;
propertiesObject可选。如果没有指定则为undefined,则是要添加到新创建对象的可枚举属性;
返回一个新对象,带着指定的原型对象和属性。
废话不多说,上例子;

var Car = function(){
     this.name  = 'car';
     this.color = 'gray'
 }
 Car.prototype = {
     getInfo(){
         return 'name:' + this.name + ' color:' + this.color
     }
 }
 var child = Object.create(Car.prototype, {
     color: {
         writable: false,       // 是否是可改写的
         configurable:true,    // 是否能够删除,是否能够被修改
         value: 'red',
         enumerable:true       //是否可以用for in 进行枚举
     },
     gender: {
         configurable:true,
         get:function () {  
             return "我是男的";    // 获取对象 gender 属性时触发的方法
         },  
         set:function (value) {  // 设置对象 gender 属性时触发的方法 
             console.log(value);
             return value;
         }    
     }
 })

 console.log(child.getInfo())   //name:undefined color:red
 console.log(child.gender)      //触发get

 child.gender = '我是女的';      //触发set

首先我们来看看Object.create时发生了什么?
Object.create()方法创建一个新对象,并使用现有的对象来提供新创建的对象的__proto__,其原理如下;

Object.create = function(obj){
	function F(){}
	F.prototype = obj
	return new F()
}

上上代码中child.name == undefined,是因为Object.create内部的新对象是new F()创建的,跟Car构造函数没有关系,想要获取name的值,改成 new Car(),就可以了。

var newCar = new Car()
var child = Object.create(newCar, {
     color: {
         writable: true,       // 是否是可改写的
         configurable:true,    // 是否能够删除,是否能够被修改
         value: 'red',
         enumerable:true       //是否可以用for in 进行枚举
     },
     gender: {
         configurable:true,
         get:function () {  
             return "我是男的";    // 获取对象 gender 属性时触发的方法
         },  
         set:function (value) {  // 设置对象 gender 属性时触发的方法 
             console.log(value);
             return value;
         }    
     }
 })
 console.log(newCar.isPrototypeOf(child));  //true

其实相当于实现了原型继承方式(注意不是原型链继承),本质上来说是对一个对象进行了浅拷贝。

猜你喜欢

转载自blog.csdn.net/qqhluckyi/article/details/83218257