JavaScript中使用Array.push()按ID增改数组元素的问题

嘿，我懂你遇到的麻烦了！你现在的写法之所以每次都会新增数组元素，是因为Array.push()只会把新对象追加到数组末尾，完全没利用ID去匹配已有元素——毕竟数组是索引驱动的结构，不是键值对存储，不会自动帮你按ID查找修改。

下面给你两种可行的解决方案：

方案1：用对象代替数组（更推荐） #

如果你的核心需求是按ID管理元素，用对象存储会更直接，因为对象天然支持键值对操作，新增/修改只需要一行代码：

// 用对象存储，键就是ID
const finalObj = {};
button.addEventListener('click', function(){
  const id = 123; // 用const/let代替var，避免全局变量污染
  writeToObj(id, "Jason");
});
function writeToObj(id, name){
  // 直接赋值：ID存在则修改，不存在则新增
  finalObj[id] = { name: name };
}

这样不管点击多少次，ID为123的元素只会被更新，不会重复添加。你要取值的话直接用finalObj[123]就能拿到对应的{name: "Jason"}。

方案2：坚持用数组（适合需要数组特性的场景） #

如果你必须用数组（比如需要保持元素顺序、使用数组方法），那就要先遍历数组查找是否存在对应ID的元素，找到就修改，找不到再新增：

const finalArray = [];
button.addEventListener('click', function(){
  const id = 123;
  writeToArray(id, "Jason");
});
function writeToArray(id, name){
  // 查找数组中是否已有包含该ID的元素
  const existingItem = finalArray.find(item => {
    // 对象的键默认是字符串，所以要把id转成字符串匹配
    return Object.keys(item)[0] === String(id);
  });
  
  if (existingItem) {
    // 找到则修改对应name
    existingItem[id].name = name;
  } else {
    // 没找到则新增元素
    finalArray.push({ [id]: { name: name } });
  }
}

这里用Array.find()方法快速定位目标元素，注意要把数字ID转成字符串，因为对象的键本质都是字符串类型，避免类型不匹配导致找不到元素的问题。

小提示 #

尽量用const或let代替var，var会有变量提升和全局污染的问题，用块级作用域的变量更安全。

内容的提问来源于stack exchange，提问作者Shyngys Rakhad