理解es6中的Object.assign()

在es6中提供了一个新的方法,非常方便,Object.assign();

使用assign主要是为了简化对象的混入(mixin)。混入是指的在一个对象中引用另一个对象的属性或方法。

assing可以把一个对象的属性和方法完整的转copy到另外一个对象中。
在es5中复制一个对象,需要很长的一段代码,而es6完全解决了这个问题:

var p = {
        name : "lisi",
        age : 20,
        friends : ['张三', '李四']
    }
    var p1 = {};
    Object.assign(p1, p); //则p1中就有了与p相同的属性和方法.  p1是接受者,p是提供者
    console.log(p1);
    //这种copy是浅copy,也就是说如果属性值是对象的话,只是copy的对象的地址值(引用)
    console.log(p1.friends == p.friends);  //true   p1和p的friends同事指向了同一个数组。
    p.friends.push("王五");
    console.log(p1.friends); //['张三', '李四', '王五']

由此可以看出,复制的对象与被复制的对象是同步的,不管你修改的是复制的对象还是被复制对象的值,都是同步体现的!当然添加属性的时候也是适用的!

assign方法可以接受任意多的提供者。意味着后面提供者的同名属性和覆盖前面提供者的属性值。

 var p = {
        name : "lisi",
        age : 20,
        friends : ['张三', '李四']
    }
    var p1 = {
        name : 'zs',
    }
    var p2 = {};
    Object.assign(p2, p, p1); //p和p1都是提供者
    console.log(p2.name); // zs

通过上面的代码可以看出,当出现多个参数的时候,后面提供者的同名属性和覆盖前面提供者的属性值。(覆盖的作用)

还有一种情况,如下:

var p = {
        name : "lisi",
        age : 20,
        friends : ['张三', '李四']
    }
    var p1 = {
        age1 : 30,
    };
    Object.assign(p1, p); //则p1中就有了与p相同的属性和方法.  p1是接受者,p是提供者
    console.log(p1);  //Object {  {age1: 30, name: "lisi", age: 20, friends: Array(3),}
    //这种copy是浅copy,也就是说如果属性值是对象的话,只是copy的对象的地址值(引用)
 
 五']

如果接收的对象里面存在了某个属性,提供者的属性就会被添加到接受对象的后面;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 属性的简洁表示法 ES6允许直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。 上面代码表明,ES6允...
    呼呼哥阅读 7,961评论 0 2
  • 1.属性的简洁表示法 允许直接写入变量和函数 上面代码表明,ES6 允许在对象之中,直接写变量。这时,属性名为变量...
    雨飞飞雨阅读 4,842评论 0 3
  • 一、ES6简介 ​ 历时将近6年的时间来制定的新 ECMAScript 标准 ECMAScript 6(亦称 ...
    一岁一枯荣_阅读 11,270评论 8 25
  • 三,字符串扩展 3.1 Unicode表示法 ES6 做出了改进,只要将码点放入大括号,就能正确解读该字符。有了这...
    eastbaby阅读 5,455评论 0 8
  • [TOC] 参考阮一峰的ECMAScript 6 入门参考深入浅出ES6 let和const let和const都...
    郭子web阅读 5,782评论 0 1