如何用JavaScript将同键名的两个对象转为指定结构的新数组？

1. 核心实现逻辑 #

因为OBJ1和OBJ2键名完全一致，我们可以用Object.keys()获取其中一个对象的键列表，遍历每个键来生成目标数组。注意你定义的newObjectKeys是['title', 'value']，但期望输出的键是string和value，以下代码以你的期望输出为准调整：

const OBJ1 = { keyNAME: 'lalala', toto: 'bbbb', tata: 'blablabla' };
const OBJ2 = { keyNAME: 18, toto: 7, tata: null };

function createMyNewArray() {
  // 获取OBJ1的所有键（OBJ2键名一致，取任意一个即可）
  const keys = Object.keys(OBJ1);
  // 遍历键生成新数组
  return keys.map(key => ({
    string: OBJ1[key],
    value: OBJ2[key]
  }));
}

const newArray = createMyNewArray();
console.log("new Array", newArray);

运行后会得到你期望的输出：

[
  { string: "lalala", value: 18 },
  { string: "bbbb", value: 7 },
  { string: "blablabla", value: null }
]

如果要沿用你定义的newObjectKeys来指定键名，只需要修改映射逻辑：

const newObjectKeys = ['title', 'value'];

function createMyNewArray() {
  const keys = Object.keys(OBJ1);
  return keys.map(key => ({
    [newObjectKeys[0]]: OBJ1[key],
    [newObjectKeys[1]]: OBJ2[key]
  }));
}

2. 前端React代码修正 #

你的JSX代码存在语法错误，修正后如下：

{newArray.map((item, index) => (
  <div key={index}>
    <p>{item.string}</p>
    <p>{item.value}</p>
  </div>
))}

• 箭头函数直接返回JSX时，无需写return，用括号包裹内容即可
• JSX标签必须闭合（<p>要写成<p></p>）
• 列表渲染需要添加key属性，这里用索引作为临时key（实际项目中建议使用业务唯一标识）

额外说明 #

如果OBJ1和OBJ2存在键名不匹配的情况，可以在遍历前添加判断过滤：

return keys
  .filter(key => OBJ2.hasOwnProperty(key))
  .map(key => ({
    string: OBJ1[key],
    value: OBJ2[key]
  }));

内容的提问来源于stack exchange，提问作者VicWentBananas