如何更新对象数组中的所有匹配项？答案

【问题标题】：How to update all matches in array of objects?如何更新对象数组中的所有匹配项？
【发布时间】：2021-12-26 12:33:46
【问题描述】：

我想更新这个对象数组

var a = [{"uuid":"93161c2b-6c56-4204-b6b5-c5c3cee0f38a","answer":"none"},
{"uuid":"93161c2b-6c56-4204-b6b5-c5c3cee0f38a","answer":"none"},
{"uuid":"93161c2b-6c56-4204-b6b5-c5c3cee0f38a","answer":"none"},
{"uuid":"e468c4ff-98c8-4d53-986e-529e4a199540","answer":"none"},
{"uuid":"f71835b7-b57a-4971-9f0b-ff0474fd495e","answer":"none"},
{"uuid":"93161c2b-6c56-4204-b6b5-c5c3cee0f38a","answer":"none"}]

到

var a = [{"uuid":"93161c2b-6c56-4204-b6b5-c5c3cee0f38a","answer":"found it"},
{"uuid":"93161c2b-6c56-4204-b6b5-c5c3cee0f38a","answer":"found it"},
{"uuid":"93161c2b-6c56-4204-b6b5-c5c3cee0f38a","answer":"found it"},
{"uuid":"e468c4ff-98c8-4d53-986e-529e4a199540","answer":"none"},
{"uuid":"f71835b7-b57a-4971-9f0b-ff0474fd495e","answer":"none"},
{"uuid":"93161c2b-6c56-4204-b6b5-c5c3cee0f38a","answer":"found it"}]

这只会更新此数组中的第一个匹配项，但我需要它来更新所有匹配项。

a.find(x => x.uuid == "93161c2b-6c56-4204-b6b5-c5c3cee0f38a").answer = "found it"

我知道我可以遍历数组来更改与 uuid 匹配的每个答案，但是有更好的方法吗？

【问题讨论】：

你需要遍历数组来改变每个匹配uuid的答案。
如果 id 值基本上是随机顺序的，那么您所能做的就是使用循环或.forEach() 顺序搜索数组。您可以对数组进行排序，然后进行二进制搜索，或者（可能更好）将数组转换为从 uuid 值到具有“答案”值或您想要的任何其他值的容器对象（或对象数组）的映射。

标签： javascript arrays object

【解决方案1】：

使用forEach 循环遍历它们并更改它们的简短而简单的方法是：

var a = [{"uuid":"93161c2b-6c56-4204-b6b5-c5c3cee0f38a","answer":"none"},
{"uuid":"93161c2b-6c56-4204-b6b5-c5c3cee0f38a","answer":"none"},
{"uuid":"93161c2b-6c56-4204-b6b5-c5c3cee0f38a","answer":"none"},
{"uuid":"e468c4ff-98c8-4d53-986e-529e4a199540","answer":"none"},
{"uuid":"f71835b7-b57a-4971-9f0b-ff0474fd495e","answer":"none"},
{"uuid":"93161c2b-6c56-4204-b6b5-c5c3cee0f38a","answer":"none"}];

a.forEach((elem, idx) => {
  if (elem.uuid == "93161c2b-6c56-4204-b6b5-c5c3cee0f38a") { 
    elem.answer = "found it";
  }
});

console.log(a);

或者，您可以使用map，这是另一种有效地完成您所描述的事情的速记方式。它返回一个新数组：

var a = [{"uuid":"93161c2b-6c56-4204-b6b5-c5c3cee0f38a","answer":"none"},
{"uuid":"93161c2b-6c56-4204-b6b5-c5c3cee0f38a","answer":"none"},
{"uuid":"93161c2b-6c56-4204-b6b5-c5c3cee0f38a","answer":"none"},
{"uuid":"e468c4ff-98c8-4d53-986e-529e4a199540","answer":"none"},
{"uuid":"f71835b7-b57a-4971-9f0b-ff0474fd495e","answer":"none"},
{"uuid":"93161c2b-6c56-4204-b6b5-c5c3cee0f38a","answer":"none"}];

a = a.map(elem => elem.uuid == "93161c2b-6c56-4204-b6b5-c5c3cee0f38a" ? ({ ...elem, answer: "found it" }) : elem);

console.log(a);

请注意，这仍然会循环遍历数组，但它是一种更简洁的方法（根据您的原始数组创建一个新数组）。我使用了上面的对象传播 { ...elem } 语法，这样如果有更多属性，它也会保留对象中的其他属性。另一种更详细的方法是：

var a = [{"uuid":"93161c2b-6c56-4204-b6b5-c5c3cee0f38a","answer":"none"},
{"uuid":"93161c2b-6c56-4204-b6b5-c5c3cee0f38a","answer":"none"},
{"uuid":"93161c2b-6c56-4204-b6b5-c5c3cee0f38a","answer":"none"},
{"uuid":"e468c4ff-98c8-4d53-986e-529e4a199540","answer":"none"},
{"uuid":"f71835b7-b57a-4971-9f0b-ff0474fd495e","answer":"none"},
{"uuid":"93161c2b-6c56-4204-b6b5-c5c3cee0f38a","answer":"none"}];

a = a.map(elem => {
  if (elem.uuid == "93161c2b-6c56-4204-b6b5-c5c3cee0f38a") { 
    elem.answer = "found it";
  }
  return elem;
});

console.log(a);

【讨论】：

或.forEach()，这不会产生（非常小的）创建新数组的开销
是的@Pointy，刚刚提到那个 - 意识到它可能在这里更有效，因为只有一些项目需要突变。谢谢！

【解决方案2】：

有两种方法可以达到效果：

1) 使用 forEach：（首选方式）

var data = [{"uuid":"93161c2b-6c56-4204-b6b5-c5c3cee0f38a","answer":"none"},
{"uuid":"93161c2b-6c56-4204-b6b5-c5c3cee0f38a","answer":"none"},
{"uuid":"93161c2b-6c56-4204-b6b5-c5c3cee0f38a","answer":"none"},
{"uuid":"e468c4ff-98c8-4d53-986e-529e4a199540","answer":"none"},
{"uuid":"f71835b7-b57a-4971-9f0b-ff0474fd495e","answer":"none"},
{"uuid":"93161c2b-6c56-4204-b6b5-c5c3cee0f38a","answer":"none"}]

const updateRecord = (data, id) => {
  data.forEach((record) => {
    if(record.uuid === id){
      record.answer = 'found it'
    }
    return record
  })
  
  return data
}

console.log(updateRecord(data, "93161c2b-6c56-4204-b6b5-c5c3cee0f38a"))

2) 使用地图：

var data = [{"uuid":"93161c2b-6c56-4204-b6b5-c5c3cee0f38a","answer":"none"},
{"uuid":"93161c2b-6c56-4204-b6b5-c5c3cee0f38a","answer":"none"},
{"uuid":"93161c2b-6c56-4204-b6b5-c5c3cee0f38a","answer":"none"},
{"uuid":"e468c4ff-98c8-4d53-986e-529e4a199540","answer":"none"},
{"uuid":"f71835b7-b57a-4971-9f0b-ff0474fd495e","answer":"none"},
{"uuid":"93161c2b-6c56-4204-b6b5-c5c3cee0f38a","answer":"none"}]


const updatedData = data.map(record => record.uuid == "93161c2b-6c56-4204-b6b5-c5c3cee0f38a" ? ({ ...record, answer: "found it" }) : record);

console.log(updatedData);

【讨论】：