美文网首页
理解es6中的Object.assign()

理解es6中的Object.assign()

作者: 殖民_FE | 来源:发表于2017-09-08 14:48 被阅读0次

    在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中的Object.assign()

          本文链接:https://www.haomeiwen.com/subject/yyggjxtx.html