es6中的assign怎么用

本篇內容介紹了“es6中的assign怎么用”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

在es6中，assign用于對象的合并，可以將源對象的所有可枚舉屬性復制到目標對象；若目標對象與源對象有同名屬性，或多個源對象有同名屬性，則后面的屬性會覆蓋前面的屬性，語法為“Object.assign(...)”

本教程操作環(huán)境：windows10系統(tǒng)、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}

如果只有一個參數(shù)，Object.assign會直接返回改參數(shù),如果參數(shù)不是對象則會先轉出對象，然后在返回,由于null 與 undefined 無法轉換為對象，所以如果他們作為參數(shù)就會報錯。如果非對象參數(shù)出現(xiàn)在源對象的位置（意思是不是第一個參數(shù)），那么處理規(guī)則有所不同。首先，這些參數(shù)都會轉成對象，如果出現(xiàn)null 或者undefined只要保證不再首個參數(shù)就不會報錯。

例如：

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

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

    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分別是字符串、布爾值、數(shù)值，結果只有字符串符合目標對象（以字符串數(shù)組的形式），數(shù)值與布爾值都會被忽略。這是因為只有字符串的包裝對象，會產(chǎn)生枚舉屬性。
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} 并沒有發(fā)生變化

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

使用遞歸的方式實現(xiàn)深拷貝

    // _deep 深度拷貝的方法
    function  _deep(source){
        let  target;
        if (typeof source === 'object'){
            // 判斷目標值是數(shù)組還是對象
            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實現(xiàn)深拷貝

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

“es6中的assign怎么用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注億速云網(wǎng)站，小編將為大家輸出更多高質量的實用文章！