将数组值添加到另一个数组中每个对象的教程

本教程旨在解决如何将一个数组中的值，按照索引顺序，作为新属性添加到另一个数组中的每个对象。我们将分析常见的错误做法（如使用嵌套循环导致笛卡尔积），并提供一种高效、准确的解决方案，该方案基于两个数组长度相同且元素按索引一一对应的假设，以实现数据的精确合并。

在前端开发或数据处理中，我们经常会遇到需要将不同来源的数据进行合并的场景。一个常见的需求是，我们有一个包含多个对象的数组，以及另一个包含一系列值的数组，目标是将第二个数组中的每个值作为新属性添加到第一个数组中对应位置的对象上。

常见误区：使用嵌套循环

初学者在尝试解决此类问题时，往往会倾向于使用嵌套循环。这种方法看似直观，但在处理“一对一”数据合并时，它会产生意想不到的“多对多”结果，即笛卡尔积。

让我们通过一个示例来理解这个问题。假设我们有以下两个数组：

const closed_status = [
  { "project_no": 5, "priority": 3, "s_status": "S8", "project_Status": "closed" },
  { "project_no": 8, "priority": 1, "s_status": "S5", "project_Status": "closed" },
  { "project_no": 12, "priority": 2, "s_status": "S2", "project_Status": "closed" }
];

const str = [
  "Value 1",
  "Value 2",
  "Value 3",
];

如果我们的目标是将 str 数组中的第一个值添加到 closed_status 数组的第一个对象，第二个值添加到第二个对象，依此类推，那么下面的嵌套循环代码将无法实现预期：

let result = [];
closed_status.forEach((obj) => {
  str.forEach((newValue) => {
    // 这里的扩展运算符 {...obj} 创建了对象的浅拷贝
    result.push({ ...obj, newValue });
  });
});

上述代码的执行结果会是 closed_status 中的每个对象都与 str 中的所有值进行组合，导致 result 数组的长度是 closed_status.length * str.length。例如，closed_status 的第一个对象会分别与 "Value 1", "Value 2", "Value 3" 组合，生成三个新对象，这显然不是我们期望的“一对一”映射。

正确的解决方案：基于索引的迭代

要实现“一对一”的数据合并，最直接且高效的方法是利用数组的索引。前提是两个数组的长度相同，并且它们之间的对应关系是基于索引的。

即构数智人

即构数智人是由即构科技推出的AI虚拟数字人视频创作平台，支持数字人形象定制、短视频创作、数字人直播等。

36

查看详情

// 假设 closed_status 和 str 数组的长度始终相同
for (let i = 0; i < closed_status.length; i++) {
    // 为 closed_status 数组中索引为 i 的对象添加一个名为 newValue 的属性，
    // 其值为 str 数组中索引为 i 的元素
    closed_status[i].newValue = str[i];
}

这段代码通过一个简单的 for 循环，遍历 closed_status 数组的每一个元素。在每次迭代中，它使用当前的索引 i 来同时访问 closed_status 数组中的对象和 str 数组中的值，并将 str[i] 赋值给 closed_status[i] 对象的一个新属性 newValue。

执行上述代码后，closed_status 数组将被修改为我们期望的结构：

[
  { "project_no": 5, "priority": 3, "s_status": "S8", "project_Status": "closed", "newValue": "Value 1" },
  { "project_no": 8, "priority": 1, "s_status": "S5", "project_Status": "closed", "newValue": "Value 2" },
  { "project_no": 12, "priority": 2, "s_status": "S2", "project_Status": "closed", "newValue": "Value 3" }
]

使用 map 方法（创建新数组）

如果不想直接修改原始的 closed_status 数组，而是希望生成一个新的数组，可以使用 Array.prototype.map() 方法。这同样需要基于索引的对应关系。

const updated_closed_status = closed_status.map((obj, index) => {
  // 创建原始对象的浅拷贝，并添加新属性
  return { ...obj, newValue: str[index] };
});

这种方法的好处是保持了原始数据的不可变性，closed_status 数组保持不变，而 updated_closed_status 包含了合并后的新数据。

注意事项

1. 数组长度匹配： 上述解决方案的核心假设是两个数组 closed_status 和 str 具有相同的长度。如果长度不匹配，例如 str 比 closed_status 短，那么在 for 循环中访问 str[i] 可能会得到 undefined，导致新属性的值为 undefined。如果 str 比 closed_status 长，那么 str 中多余的值将不会被使用。
2. 数据对应关系： 这种方法依赖于元素在两个数组中的顺序是匹配的。如果它们的顺序不对应，即使长度相同，合并后的数据也可能不符合预期。
3. 性能： 单循环（无论是 for 循环还是 map）的时间复杂度是 O(n)，其中 n 是数组的长度，这比嵌套循环的 O(n*m) 效率更高。
4. 修改原数组 vs. 创建新数组： for 循环会直接修改 closed_status 数组，而 map 方法会返回一个包含修改后对象的新数组，不改变原数组。根据具体需求选择合适的方法。

总结

当需要将一个数组中的值，以“一对一”的方式添加到另一个数组的每个对象中时，关键在于理解并利用数组的索引进行精确匹配。避免使用会导致笛卡尔积的嵌套循环。通过一个简单的 for 循环或 map 方法，结合索引访问，可以高效且准确地完成数据合并任务，同时需要注意两个数组的长度和顺序匹配是实现正确合并的前提。

以上就是将数组值添加到另一个数组中每个对象的教程的详细内容，更多请关注php中文网其它相关文章！