我有 2 个数组，我想在 javascript 中创建一个对象数组 [重复]答案

【问题标题】：I have 2 array and I want to make a single array of object in javascript [duplicate]我有 2 个数组，我想在 javascript 中创建一个对象数组 [重复]
【发布时间】：2021-08-17 11:37:56
【问题描述】：

const array1 = ['US', 'AG','In'] // (country code array)
const array2 = ['flagIconUS','flagIconAG','flagIconIN']

结果：

const array3 = [
  { code: "US", icon: "flagIconUS" },
  { code: "AG", icon: "flagIconAG" },
  { code: "IN", icon: "flagIconIN" },
];

【问题讨论】：

你想匹配的元素在两个数组中是否有相同的index？我的意思是按相同的顺序？
既然已经可以使用类似 ID 的短代码，为什么还要使用数组。使用Object.entries 等，对象似乎更容易从中检索内容，并且在需要时也易于迭代。
Map 2 array into 1 array object
到目前为止，您尝试了哪些方法来自行解决此问题？一个简单的for 循环就足以获得预期的输出......
这能回答你的问题吗？ Map 2 array into 1 array object

标签： javascript arrays ecmascript-6

【解决方案1】：

这是map的简单单行代码

const array1 = ["US", "AG", "In"];
const array2 = ["flagIconUS", "flagIconAG", "flagIconIN"];

const result = array1.map((code, i) => ({ code, icon: array2[i] }));
console.log(result);

【讨论】：

尺寸不匹配会怎样？
根据OP的问题和预期结果。如果存在不匹配，那么 OP 会在问题本身中特别提到它。
是的，您完全回答了这个问题。但我想知道搜索此内容的人也可以详细说明边缘情况。
@AntonKrug 我非常感谢您的关注，但看到我们有一种情况，我的回答会自动涵盖它。假设array1 的长度是2 和array2 的长度是3，那么结果将是一个包含2 个对象的数组，因为它将迭代到2 个并且不包括第三个元素。现在第二种情况是array1长度为3，array2为2，在这种情况下，结果将显示3个元素，icon将是undefined，我认为这是预期的。所以我认为这是双赢的局面......如果我遗漏了什么，请在这里补充......
@AntonKrug 请检查我的解决方案stackoverflow.com/questions/68816660/…

【解决方案2】：

使用Array.prototype.reduce()

const array1 = ["US", "AG", "In"];
const array2 = ["flagIconUS", "flagIconAG", "flagIconIN"];

const result = array1.reduce((acc,item,index)=>{
   return acc.concat({code:item,icon:array2[index]})
},[]);
console.log(result);

【讨论】：

【解决方案3】：

你可以像这样使用Array.from：

const array1 = ["US", "AG", "In"]; // (country code array)
const array2 = ["flagIconUS", "flagIconAG", "flagIconIN"];

const array3 = Array.from(
  { length: 3 },
  (_, i) => ({ code: array1[i], icon: array2[i] })
);

console.log(array3);

此解决方案的一个优点：它不使用一个特定数组作为起点，并且在数组长度不匹配的情况下允许更多选项，因为您可以自己设置结果数组的长度（而不是硬编码3 就像我一样）。

以array1 中一项多余的项目为例：

const array1 = ["US", "AG", "In", "superfluous"]; // (country code array)
const array2 = ["flagIconUS", "flagIconAG", "flagIconIN"];

const array3 = Array.from(
  { length: Math.min(array1.length, array2.length) },
  (_, i) => ({ code: array1[i], icon: array2[i] })
);

console.log(array3);

当array2 中有一项多余的项目时，相同的代码有效：

const array1 = ["US", "AG", "In"]; // (country code array)
const array2 = ["flagIconUS", "flagIconAG", "flagIconIN", "superfluous"];

const array3 = Array.from(
  { length: Math.min(array1.length, array2.length) },
  (_, i) => ({ code: array1[i], icon: array2[i] })
);

console.log(array3);

【讨论】：

如果你使用{ length: array1.length }那不是动态的

【解决方案4】：

Array.reduce 实现

逻辑

使用Array.from(Array(Math.max(array1.length, array2.length)) 创建一个从0 到3 的数组。这将创建一个从 0 开始到第一个和第二个数组的最大值的数组。在我们的例子中，它是 3。
reduce 这个数组，reducer 函数内的当前值将是0, 1 and 2。这些是我们需要的索引。

使用第一个数组中的键和第二个数组中的图标推送到累加器数组。

const array1 = ['US', 'AG', 'In', 'UK']; // (country code array)
const array2 = ['flagIconUS', 'flagIconAG', 'flagIconIN'];
const array3 = Array.from(Array(Math.max(array1.length, array2.length))
                .keys()).reduce((acc, curr) => {
                  acc.push({
                    code: array1[curr] || '',
                    icon: array2[curr] || '',
                  })
                  return acc;
                }, []);
console.log(array3);

Array.map 实现。

逻辑

使用与前面提到的相同逻辑生成一个数组。
从此生成的数组运行Array.map 函数。
返回来自array1 的代码和来自array2 的图标，索引来自上述数组。

const array1 = ['US', 'AG', 'In', 'UK'];
const array2 = ['flagIconUS', 'flagIconAG', 'flagIconIN'];
const array3 = Array.from(Array(Math.max(array1.length, array2.length)).keys()).map((index) => ({
                  code: array1[index] || '',
                  icon: array2[index] || '',
                }));
console.log(array3);

【讨论】：