细说一下 Object.assign()

Object.assign()

-- 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。 
-- 它是一个浅拷贝,如果源对象的属性是一个引用类型的,它仅仅会复制其引用值。

  1. Object.assign() 第一个参数是目标对象,后面的都是源对象。 Object.assign (target, source1,source2, source3, ...);
  2. 如果源对像与目标对象有相同的属性名,或源对象中有相同的属性名,后面的会覆盖前边的值 。
  3. 如果参数传入的不是Object,会转成Object
  4. null和undefined 不能作为参数传入,因为null和undefined 不能转成Object
  5. 如果发生的值是一个对象,Object.assign的处理方法是直接替换,而不是添加。 如下面的 a 和 b
  6. 可以为类添加方法
    
    const obj1  = {name:'小明', age:'18',education:'undergraduate'}
    const obj2 = {height:'180cm',hobby:'painting'}
    let  obj = Object.assign({},obj1, obj2)
    console.log('合并后的类:');
    console.log(JSON.stringify(obj));
    Object.assign(obj, obj, {height:'170cm'});
    console.log('修改过height后的类:');
    console.log(JSON.stringify(obj));
    Object.assign(obj, {arr:{index:1, name:'类'}}, {name:'加了一个类进去'})
    console.log(JSON.stringify(obj));
    console.log("加一个类进去后:"+obj.arr.index);

    // a. 这种修改方式,只会修改index 的值
    Object.assign(obj, Object.assign(obj.arr, {index:2}))
    console.log(JSON.stringify(obj));
    console.log("修改类index后:"+obj.arr.index);

    // b. 这种修改方式,arr只剩下index属性
    // Object.assign(obj, {arr:{index:2}}, {name:'修改类的index为:2'})
    // console.log(JSON.stringify(obj));
    // console.log("修改类index后:"+obj.arr.index);

    // Object.assign()做的是浅拷贝, 如果一个属性是新合并进来的对象,改变源对象的值,会影响合并后的值 。
    let newObj  = {type:{aa:'蔬菜'}};
    Object.assign(obj, newObj);
    console.log("合并一个含属性type的类后:"+JSON.stringify(obj));
    // c. 这种不会影响obj中的type.aa
    // Object.assign(newObj, {type:{aa:'水果'}});
    // d. 这种会影响obj中的type.aa
    newObj.type.aa = '水果';
    console.log("修改newObj中的type.aa后:"+JSON.stringify(newObj));
    console.log("修改newObj中的type.aa后:"+JSON.stringify(obj));

    // e. 用Object.assign合并一个数组的时候,会把数组当成一个属性名为index的类
    const arr1  = [1, 2, 3, 4, 5] ;  // 在Object的眼里是这样的: arr1={0:1, 1:2, 2:3,3:4, 4:5}
    const arr2 =  [8, 9, 10];        // 在Object的眼里是这样的: arr2={0:8, 1:9, 2:10}
    console.log("合并后的数组为:"+Object.assign(arr1, arr2)); // 得到的结果是:8, 9, 10, 4, 5

    // f. Object.assign() 为类添加方法
    Object.assign(UserInfo.prototype, {
      getUserName (){
        return this.name;
      },
      getUserGender (){
        return this.gender ;
      }
    })
    let user  = new UserInfo("笑笑", '女');
    console.log("userinfo中的信息为: "+ user.getUserName() +", "+user.getUserGender()); // 输出的结果为:笑笑,女


输出的结果:

ObjectAssignDemo.js:13 合并后的类:
ObjectAssignDemo.js:14 {"name":"小明","age":"18","education":"undergraduate","height":"180cm","hobby":"painting"}
ObjectAssignDemo.js:16 修改过height后的类:
ObjectAssignDemo.js:17 {"name":"小明","age":"18","education":"undergraduate","height":"170cm","hobby":"painting"}
ObjectAssignDemo.js:19 {"name":"加了一个类进去","age":"18","education":"undergraduate","height":"170cm","hobby":"painting","arr":{"index":1,"name":"类"}}
ObjectAssignDemo.js:20 加一个类进去后:1
ObjectAssignDemo.js:24 {"name":"类","age":"18","education":"undergraduate","height":"170cm","hobby":"painting","arr":{"index":2,"name":"类"},"index":2}
ObjectAssignDemo.js:25 修改类index后:2
ObjectAssignDemo.js:35 合并一个含属性type的类后:{"name":"类","age":"18","education":"undergraduate","height":"170cm","hobby":"painting","arr":{"index":2,"name":"类"},"index":2,"type":{"aa":"蔬菜"}}
ObjectAssignDemo.js:40 修改newObj中的type.aa后:{"type":{"aa":"水果"}}
ObjectAssignDemo.js:41 修改newObj中的type.aa后:{"name":"类","age":"18","education":"undergraduate","height":"170cm","hobby":"painting","arr":{"index":2,"name":"类"},"index":2,"type":{"aa":"水果"}}
ObjectAssignDemo.js:46 合并后的数组为:8,9,10,4,5
ObjectAssignDemo.js:58 userinfo中的信息为: 笑笑, 女

浅拷贝举例

let a ={id:1001};
let b = {name: 'testname', idObj: a}; 
let c = Object.assign ({}, b);
a.id = 999;  // 此时b、c 中的idObj.id 都会变成999。 这就是浅拷贝了。 用的时候一定要注意。 
console.log("cid"+ c.idObj.id+", bid"+b.idObj.id);  // 这两个都是999 

你可能感兴趣的:(细说一下 Object.assign())