我有一个由4个数组组成的对象,如下所示

const data = {
  arr1 : [{id: 1, name: "Mike"}, {id: 2, name: "Peter"}],
  arr2 : [{id: 6, name: "John"}, {id: 9, name: "Mary"}],
  arr3 : [{id: 5, name: "Nick"}, {id: 4, name: "Ken"}],
  arr4 : [{id: 3, name: "Kelvin"}, {id: 7, name: "Steve"}, {id: 8, name: "Hank"}]
}

然后我需要找到一个元素并更新它.以下是我try 的内容:

const updateElement = (id: number, newName: string) => {
  let idx: number;

  idx = data.arr1.findIndex((e) => e.id === id);
  if (idx !== -1) data.arr1[idx].name = newName;

  idx = data.arr2.findIndex((e) => e.id === id);
  if (idx !== -1) data.arr2[idx].name = newName;

  idx = data.arr3.findIndex((e) => e.id === id);
  if (idx !== -1) data.arr3[idx].name = newName;

  idx = data.arr4.findIndex((e) => e.id === id);
  if (idx !== -1) data.arr4[idx].name = newName;
}

有没有比我的方法更好的方法从多个数组中更新元素?假设每个数组都有相同的元素接口.

推荐答案

可以使用Object.values()flat()数组进行更新:

const data = {
  arr1 : [{id: 1, name: "Mike"}, {id: 2, name: "Peter"}],
  arr2 : [{id: 6, name: "John"}, {id: 9, name: "Mary"}],
  arr3 : [{id: 5, name: "Nick"}, {id: 4, name: "Ken"}],
  arr4 : [{id: 3, name: "Kelvin"}, {id: 7, name: "Steve"}, {id: 8, name: "Hank"}]
}
const updateElement = (id, newName) => {
  const values = Object.values(data).flat().find(ele => ele.id === id)
  if(values) values.name = newName
}
updateElement(1, 'newName')
console.log(data)

Javascript相关问答推荐

如果被1个Phaser JS抵消,我的倾斜碰撞

Python类实现的JavaScript吊坠是什么样子的?

如何从JavaScript中的公共方法调用私有方法?

功能和普通对象之间的原型污染

如何在JavaScript中通过一次单击即可举办多个活动

Next.js Next/Image图像隐含性有任何类型-如何修复?

硬币兑换运行超时

当运行d3示例代码时,没有显示任何内容

在观察框架中搜索CSV数据

jQuery s data()[storage object]在vanilla JavaScript中?'

我们如何从一个行动中分派行动

实现JS代码更改CSS元素

如何将react—flanet map添加到remixjs应用程序

如何通过将实例方法的名称传递给具有正确类型的参数的继承方法来调用实例方法?

如何在文本字段中输入变量?

如何在.NET Core中将chtml文件链接到Java脚本文件?

如何在JAVASCRIPT中合并两组对象并返回一些键

向数组中的对象添加键而不改变原始变量

如何在和IF语句中使用||和&;&;?

如何在尚未创建的鼠标悬停事件上访问和着色div?