如何在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

它们无法合并，您必须手动重新映射它们，例如dectructure media_mode，然后将其中的“图像”拉出，然后将其余对象作为“ ... 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”：“景观”，
        “ logo”：“ a.png”，
        “ meta_information”：{“ image”：“ b.png”}
    }
您可以执行类似合并的操作。
const newObj = {
    ...商人，
    “ meta_information”：{“ image”：“ b.png”}
}

Answer 6

您无法将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运算符

   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)