如何在对象数组中查找和更新值？

Question

我有一个对象数组。我想通过某个领域找到，然后改变它：

var item = {...}
var items = [{id:2}, {id:2}, {id:2}];

var foundItem = items.find(x => x.id == item.id);
foundItem = item;

我希望它改变原始对象。如何？ （我不在乎它是否也会出现在 Lodash 中。）

原文由 user3712353 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 findIndex 在对象的数组中查找索引并根据需要替换它：

 var item = {...}
 var items = [{id:2}, {id:2}, {id:2}];

 var foundIndex = items.findIndex(x => x.id == item.id);
 items[foundIndex] = item;

这假定唯一的 ID。如果您的 ID 重复（如您的示例中所示），则使用 forEach 可能会更好：

 items.forEach((element, index) => {
 if(element.id === item.id) {
 items[index] = item;
 }
 });

原文由 CodingIntrigue 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我最好的方法是：

 var item = {...}
var items = [{id:2}, {id:2}, {id:2}];

items[items.findIndex(el => el.id === item.id)] = item;

findIndex 参考

如果您不想用新对象替换，而是复制 item 的字段，您可以使用 Object.assign ：

Object.assign(items[items.findIndex(el => el.id === item.id)], item)

作为 .map() 的替代方案：

Object.assign(items, items.map(el => el.id === item.id? item : el))

功能方法：

不要修改数组，使用一个新的，这样就不会产生副作用

const updatedItems = items.map(el => el.id === item.id ? item : el)

笔记

如果使用得当，对对象的引用不会丢失，因此您甚至可以使用原始对象引用，而不是创建新对象引用。

 const myArr = [{ id: 1 }, { id: 2 }, { id: 9 }];
const [a, b, c] = myArr;
// modify original reference will change object in the array
a.color = 'green';
console.log(myArr[0].color); // outputs 'green'

这个问题通常发生在从数据库中消费列表，然后映射列表以生成 HTML 内容，这将修改列表的元素，然后我们需要更新列表并将其作为列表发送回数据库。

好消息是，保留了引用，因此您可以组织代码以利用它，并考虑将 list 作为具有免费身份的对象，这些身份是从 0 到 length -1 的整数 --- 。因此，每次访问对象的任何属性时，都按照 list[i] 进行操作，并且不会丢失引用，原始对象也会更改。请记住，当您的真实来源只有一个（创建的对象）时，这很有用，并且您的应用程序始终使用相同的对象（不是从数据库中多次获取并将其分配给 list 组件的使用寿命）。

坏消息是架构是错误的，如果这是你需要的，你应该通过 ids（字典）接收一个对象，比如

{
  1232: { id: 1232, ...},
  asdf234asf: { id: 'asdf234asf', ...},
  ...
}

这样，您就不会在数组中搜索，这会消耗资源。您“只需通过对象中的键访问”，这是即时且高效的。

原文由 Soldeplata Saketos 发布，翻译遵循 CC BY-SA 4.0 许可协议