es6中assign的用法是什麼

在es6中，assign用於物件的合併，可以將來源物件的所有可枚舉屬性複製到目標物件；若目標物件與來源物件有同名屬性，或多個來源物件有同名屬性，則後面的屬性會覆寫前面的屬性，語法為「Object.assign(...)」

#本教學操作環境：windows10系統、ECMAScript 6.0版、Dell G3電腦。

es6中assign的用法是什麼

Object.assign方法用於物件的合併，將來源物件（source）的所有的可列舉屬性（key:value）複製到目標物件（target）

例如：

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

注意： 如果目標物件與來源物件有同名屬性，或多個來源物件有同名屬性，則後面的屬性會覆寫前面的屬性。

例如：

    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}

如果只有一個參數，Object.assign會直接返回改參數,如果參數不是對象則會先轉出對象，然後在返回,由於null 與undefined 無法轉換為對象，所以如果他們作為參數就會報錯。如果非物件參數出現在來源物件的位置（意思是不是第一個參數），那麼處理規則就會有所不同。首先，這些參數都會轉換成對象，如果出現null 或undefined只要保證不再首個參數就不會報錯。

例如：

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

其他類型的值（即數值、字串和布林值）不在首參數，也不會報錯，但是字串會以數組的形式，拷貝入目標對象，其他值都不會產生效果。

    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} 并没有发生变化

當物件中只有一級屬性，沒有二級屬性的時候，此方法為深拷貝，但是物件中有物件的時候，此方法在二級屬性以後就是淺拷貝。

使用遞歸的方式實作深拷貝

    // _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 
    }

使用js實作深拷貝

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

【相關推薦：javascript影片教學、web前端】

以上是es6中assign的用法是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！