Javascriptのオブジェクトは、私は2つのjsを持って

Question

をマージする方法を、私は唯一のオブジェクト2の葉値で最初のJavaScriptのオブジェクトを更新し、

const first = { 
    obj1: { f11: "new_value", f12: "v12" }, 
    obj2: { f21: "v21" }, 
    obj3: { f: { ff: { fff: "v"} } } 
} 

UPD得ることができます

const first = { 
    obj1: { f11: "v11", f12: "v12" }, 
    obj2: { f21: "v21" } 
} 

const second = { 
    obj1: { f11: "new_value" }, 
    obj3: { f: { ff: { fff: "v"} } } 
} 

オブジェクト：私はObject.assignを試みたが、結果は

です

const first = { 
    obj1: { f11: "new_value" }, 
    obj2: { f21: "v21" }, 
    obj3: { f: { ff: { fff: "v"} } } 
} 

いくつかの内部フィールドが緩んでいます

Answer 1

これは、深いマージが必要です。 jqueryでは$ .extendを使用できます。

Javascriptのと同等です：

あなたはタイプをチェックして、新しい値を割り当てることによって、再帰的なアプローチを使用することができます

const first = { 
 
    obj1: { f11: "v11", f12: "v12" }, 
 
    obj2: { f21: "v21" } 
 
} 
 

 
const second = { 
 
    obj1: { f11: "new_value" }, 
 
    obj3: { f: { ff: { fff: "v"} } } 
 
} 
 

 
function extend(){ 
 
    for(var i=1; i<arguments.length; i++) 
 
     for(var key in arguments[i]) 
 
      if(arguments[i].hasOwnProperty(key)) { 
 
       if (typeof arguments[0][key] === 'object' 
 
        && typeof arguments[i][key] === 'object') 
 
       \t \t \t \t extend(arguments[0][key], arguments[i][key]); 
 
       else 
 
        arguments[0][key] = arguments[i][key]; 
 
      } 
 
    return arguments[0]; 
 
} 
 

 
console.log("Merged object is: " + JSON.stringify(extend(first, second)))

Answer 2

。

function merge(source, target) { 
 
    Object.keys(source).forEach(function (key) { 
 
     if (!source[key] && typeof source[key] === 'object') { 
 
      target[key] = target[key] || (Array.isArray(source[key]) ? [] : {}); 
 
      return merge(source[key], target[key]); 
 
     } 
 
     target[key] = source[key]; 
 
    }); 
 
} 
 

 
const first = { obj1: { f11: "v11", f12: "v12" }, obj2: { f21: "v21" } }, 
 
     second = { obj1: { f11: "new_value" }, obj3: { f: { ff: { fff: "v"} } } }; 
 

 
merge(second, first); 
 
console.log(first);

.as-console-wrapper { max-height: 100% !important; top: 0; }