如何循环利用新对象更新JavaScript对象数组的value字段？

场景说明 #

每次获取新的obj对象后，需要将数组arr中每个元素的value字段，拼接为原value值:obj中对应键的值的格式。

方案1：普通for循环生成新数组（不修改原数组） #

如果原数组是const声明无法直接修改，或者不想改动原数组，可以用普通for循环遍历并生成新数组：

// 每次获取的新obj
const newObj = {
    id:'1',
    v1: '4',
    v2: '2',
    v3: '3',
};

const originalArr = [{key:1, value: 'v1'},{key:2, value:'v2'}];
const updatedArr = [];

for (let i = 0; i < originalArr.length; i++) {
    const currentItem = originalArr[i];
    // 拼接目标格式，若obj无对应键可加默认值避免undefined
    const formattedValue = `${currentItem.value}:${newObj[currentItem.value] || 'N/A'}`;
    // 复制原对象并更新value，不影响原数组元素
    updatedArr.push({ ...currentItem, value: formattedValue });
}

console.log(updatedArr);
// 输出：[{key:1, value: 'v1:4'},{key:2, value:'v2:2'}]

方案2：forEach循环直接修改原数组 #

如果数组是let声明允许修改，用forEach遍历直接更新元素更简洁：

let arr = [{key:1, value: 'v1'},{key:2, value:'v2'}];
const newObj = {
    id:'1',
    v1: '4',
    v2: '2',
    v3: '3',
};

arr.forEach(item => {
    item.value = `${item.value}:${newObj[item.value] || 'N/A'}`;
});

console.log(arr);
// 输出：[{key:1, value: 'v1:4'},{key:2, value:'v2:2'}]

注意事项 #

• 如果newObj中可能不存在arr元素value对应的键，建议添加默认值（示例中的|| 'N/A'），避免拼接出v4:undefined这类无效内容。
• 若需要保持原数组不变，优先用方案1生成新数组；若允许修改原数组，方案2更高效。

内容的提问来源于stack exchange，提问作者think-13