如何在javascript中合並兩個嵌套對象

Question

我嘗試使用這種方式合並，但它創建了兩個不同的meta_information和meta_information.image鍵

merchant = Object.assign(merchant, media_mode)

我試過這種方式，但它不起作用

var media_mode = {
    "featured_media_square" : "square",
    "featured_media_landscape" :"landscape",
    "logo" : "a.png",
    "meta_information.image" : "b.png"  
}

var merchant = {meta_information : {image : ""}}

我想得到這樣的結果

merchant = {
    "featured_media_square" : "square",
     "featured_media_landscape" : "landscape",
     "logo" : "a.png",
     "meta_information" : {"image" : "b.png"}  
}

Answer 1

 var media_mode = { "featured_media_square" : "square", "featured_media_landscape":"landscape", "logo":"a.png", "meta_information.image":"b.png" } var merchant = {meta_information:{image:""}}; for (var key in media_mode) { var kn = key.split("."); for (var key2 in merchant) { if (kn[0] === key2) { var tmp = media_mode[key]; media_mode[kn[0]] = {}; media_mode[kn[0]][kn[1]] = tmp; delete media_mode[key] } } } console.log(media_mode); 

ECMA5版本。

Answer 2

他們不能合並，你必須手動重新映射它們，例如desctructure media_mode，並從中拉出“image”，然后將對象的其余部分稱為“... rest”，然后將它們放在精確的模型中要求

 var media_mode = { featured_media_square: "square", featured_media_landscape: "landscape", logo: "a.png", "meta_information.image": "b.png", }; var { "meta_information.image": image, ...rest } = media_mode; merchant = { ...rest, meta_information: { image }, }; console.log(merchant); 

ES5按要求提供

 var media_mode = { featured_media_square: "square", featured_media_landscape: "landscape", logo: "a.png", "meta_information.image": "b.png", }; const image = media_mode["meta_information.image"]; var merchant = Object.assign({}, media_mode, { meta_information: { image: image }, }); console.log(merchant); 

請注意，在此解決方案中，鍵“meta_information.image”仍保留在結果中，如果您堅持要刪除它，只需運行

delete merchant["meta_information.image"]

Answer 3

我嘗試使用這種方式合並，但它創建了兩個不同的meta_information和meta_information.image鍵

因為它們是兩個不同的鍵。

除非鍵與===匹配，否則meta_information和meta_information.image將不會合並/覆蓋。

在JavaScript中，您提供的內容無法直接使用。

Answer 4

 var media_mode = { "featured_media_square" : "square", "featured_media_landscape":"landscape", "logo":"a.png", "meta_information.image":"b.png" } var merchant = {meta_information:{image:""}}; var merged = {...media_mode, ...merchant}; console.log(merged); 

完全按照您的預期工作。

Answer 5

你有像這樣的對象
商人= {
“featured_media_square”：“square”，
“featured_media_landscape”： “風景”，
“標識”：“a.png”
“meta_information”：{“image”：“b.png”}
}
您可以執行類似合並的操作。
const newObj = {
...商人，
“meta_information”：{“image”：“b.png”}
}

Answer 6

您無法將meta_information.image與具有結構meta_information: { image: '' }的嵌套對象合並meta_information: { image: '' } 。 JavaScript本身無法做到這一點 - 您必須以編程方式執行此操作。 如果要使用ES5方法將它們合並，最簡單的方法是使用像您嘗試的Object.assign ，然后只需刪除您不想要的密鑰。

 const media_mode = { featured_media_square: 'square', featured_media_landscape: 'landscape', logo: 'a.png', 'meta_information.image': 'b.png' } const merchant = { meta_information: { image: 'b.png' } } Object.assign(merchant, media_mode); delete merchant['meta_information.image']; console.log(merchant); 

Answer 7

我們可以使用Spread Operator

  var media_mode = { "featured_media_square" : "square", "featured_media_landscape":"landscape", "logo":"a.png", "meta_information.image":"b.png" } var merchant = {meta_information:{image:""}}; var merged = {...media_mode,...merchant}; console.log(merged)