本文介绍如何将一维数值数组的元素依次映射为对象数组中每个对象的新属性值，使用 map() 创建新数组或 foreach() 原地更新，兼顾函数式编程规范与实际性能需求。
本文介绍如何将一维数值数组的元素依次映射为对象数组中每个对象的新属性值，使用 map() 创建新数组或 foreach() 原地更新，兼顾函数式编程规范与实际性能需求。
在前端开发中，常需将平行结构的数据（如索引数组、状态码数组、ID 列表等）动态注入到对象数组中，为其添加语义化字段（如 index、id、status）。该操作本质是基于索引的双数组对齐合并，核心在于利用数组方法的回调参数 i（当前索引）同步访问两个数组对应位置的值。
✅ 推荐方案：使用 map()（纯函数式，安全可预测）
map() 是最符合现代 JavaScript 实践的方式——它不修改原数组，返回一个全新数组，避免副作用，利于调试与状态管理（如 React 中的不可变更新）：
const tab = [1, 2, 3];
const values = [
{ key1: "a", key2: "b", key3: "c" },
{ key1: "d", key2: "e", key3: "f" },
{ key1: "g", key2: "h", key3: "i" }
];
const merged = values.map((obj, i) => ({
...obj,
index: tab[i]
}));
console.log(merged);
// [
// { key1: "a", key2: "b", key3: "c", index: 1 },
// { key1: "d", key2: "e", key3: "f", index: 2 },
// { key1: "g", key2: "h", key3: "i", index: 3 }
// ]
? 关键点说明：
- 解构赋值 {...obj} 确保原对象属性完整保留；
- tab[i] 利用 map 回调的第二个参数 i 实现精准索引对齐；
- 若 tab 长度小于 values，未匹配索引处 tab[i] 将为 undefined —— 可通过 tab[i] ?? null 提供默认值。
⚠️ 替代方案：使用 forEach()（原地更新，节省内存）
当明确需要复用原数组引用（如 Vue 响应式依赖追踪、或处理超大数组且内存敏感），可用 forEach() 直接赋值：
values.forEach((item, i) => {
item.index = tab[i];
});
// values 已被修改，无需重新赋值
⚠️ 注意事项：
- 此操作会直接修改原对象，若对象被其他变量引用，将产生隐式副作用；
- 不适用于 Object.freeze() 或 const 声明的不可变对象（会静默失败或抛错）；
- 在严格模式下对不可扩展对象添加属性会抛出 TypeError。
? 进阶建议
-
长度校验：生产环境建议预先检查数组长度一致性：
if (tab.length !== values.length) { console.warn(`Array length mismatch: tab(${tab.length}) ≠ values(${values.length})`); } -
泛化封装：可封装为可复用工具函数：
const mergeByIndex = (objects, values, key = 'index') => objects.map((obj, i) => ({ ...obj, [key]: values[i] })); // 使用：mergeByIndex(values, tab, 'id')
掌握这种基于索引的合并模式，能高效应对表格行数据增强、列表项状态绑定、批量 API 响应补全等典型场景，是构建健壮数据流的关键基础能力。
