What is the usage of assign in es6

In es6, assign is used to merge objects. All enumerable properties of the source object can be copied to the target object; if the target object and the source object have properties with the same name, or multiple source objects have properties with the same name , then the later attributes will overwrite the previous attributes, and the syntax is "Object.assign(...)"

The operating environment of this tutorial: windows10 system, ECMAScript Version 6.0, Dell G3 computer.

What is the usage of assign in es6

The Object.assign method is used to merge objects, copying all the enumerable attributes (key:value) of the source object (source) to the target Object (target)

For example:

        const target = { a : 1 };
        const  source1 = { b: 2 };
        const  source2 = { c: 3 };
Object.assign(target,source1,source2)      // target { a:1, b:2, c:3 }

Note: If the target object and the source object have properties with the same name, or multiple source objects have properties with the same name, the later properties will overwrite the previous properties.

For example:

    const target  = {a:1,b:1};
    const source1 = { b: 2,c:2};
    const source2 = {c:3};
 Object.assign(target,source1,source2); // target {a:1,b:2,c:3}

If there is only one parameter, Object.assign will directly return the parameter. If the parameter is not an object, the object will be transferred out first and then returned. Since null and undefined cannot be converted are objects, so an error will be reported if they are used as parameters. If a non-object parameter appears in the position of the source object (meaning it is not the first parameter), then the processing rules are different. First, these parameters will be converted into objects. If null or undefined appears, as long as it is not the first parameter, no error will be reported.

For example:

   const obj = {a:1},
   Object.assign(obj)  === obj   // true   
   typeof  Object.assign(2)    // object
   Object.assign(undefined)  // 报错
   Object.assign(null)   // 报错
   Object.assign(obj,undefined)

Other types of values ​​(i.e. numeric values, strings and Boolean values) are not included in the first parameter and no error will be reported, but the string will be copied into the target in the form of an array. Object, other values ​​will have no effect.

    const v1 = 'abc';
    const v2 = true;
    const v3 = 10;
    const objCurrent = Object.assign({},v1,v2,v3);  // {0:'a',1:'b',2:'c'}; 
    // 上面代码中,v1,v2,v3分别是字符串、布尔值、数值，结果只有字符串符合目标对象（以字符串数组的形式），数值与布尔值都会被忽略。这是因为只有字符串的包装对象，会产生枚举属性。
Object.assign()的深浅拷贝问题
    const obj1 = {a: 1};
    const obj2 = {b: 2};
    const obj3 = {c: 3};
    const obj = Object.assign(obj1,obj2,obj3);
    console.log(obj);   //  {a:1,b:2,c:3}
    console.log(obj1);   //   {a:1,b:2,c:3}  原始对象也被改变啦
    const v1 ={a:1},
    const currentObj = Object.assign(JSON.parse(JSON.stringify(v1)),{e:2})
    console.log(currentObj)  // {a:1,e:2}
    console.log(v1) // {a:1} 并没有发生变化

When the object has only first-level attributes and no second-level attributes, this method is a deep copy. However, when there are objects in the object, this method is a shallow copy after the second-level attributes.

Use recursion to implement deep copy

    // _deep 深度拷贝的方法
    function  _deep(source){
        let  target;
        if (typeof source === 'object'){
            // 判断目标值是数组还是对象
            target = Array.isArray(source) ? []: {}
            for (let key in source) {
                // 指示对象自身属性中是否含有指定的属性
                if(source.hasOwnProperty[key]){
                      // 如果属性不是对象则赋值，负责递归
                      if(typeof source[key] !== 'object'){
                            target[key] = source[key]
                      }else {
                            target[key] = _deep(source[key])
                      }
                }
            }
        } else {
           target = source
        }
        // 返回目标值
        return  target 
    }

Use js to implement deep copy

    function _deepJs(_data){
        return JSON.parse(JSON.stringify(_data));
    }

[Related recommendations: javascript video tutorial, web front end】

The above is the detailed content of What is the usage of assign in es6. For more information, please follow other related articles on the PHP Chinese website!