如何在数组中定位指定对象并将其替换为新对象？

嘿，这问题我碰到好多次了，给你俩实用的JavaScript解法，看你需求选就行：

如果你需要直接改动原始数组，这种方法简单直接：

• 用findIndex()方法定位到color为green的对象的索引，它会返回第一个匹配元素的位置，找不到则返回-1
• 确认索引有效后，直接替换该位置的元素

// 你的原始数组
const arr = [ {color: "blue"}, {color: "red", size: "large"}, {color: "green", size: "medium"} ];

// 找到目标对象的索引
const greenItemIndex = arr.findIndex(item => item.color === "green");

// 找到后替换元素
if (greenItemIndex !== -1) {
  arr[greenItemIndex] = {color: "green", size: "x-large"};
}

console.log(arr);
// 输出：[ {color: "blue"}, {color: "red", size: "large"}, {color: "green", size: "x-large"} ]

要是你不想动原数组，想保持数据的不可变性，用map()会更优雅，它会遍历数组返回一个全新的数组：

• 遍历每个元素，判断当前元素的color是否为green
• 匹配的话返回你指定的新对象，不匹配就直接返回原元素

// 原始数组
const arr = [ {color: "blue"}, {color: "red", size: "large"}, {color: "green", size: "medium"} ];

// 生成新数组
const updatedArr = arr.map(item => {
  return item.color === "green" ? {color: "green", size: "x-large"} : item;
});

console.log(updatedArr);
// 输出：[ {color: "blue"}, {color: "red", size: "large"}, {color: "green", size: "x-large"} ]
// 原数组arr完全不受影响

小提示：如果数组里有多个color为green的对象，findIndex只会替换第一个，而map会把所有匹配的都替换掉，根据你的实际场景选就行~

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