如何在对象数组中查找并替换一个对象

Question

我有一个像这样的对象数组。

 [{
    "id": 1,
    "name": "January",
    "abc": abc,
    "xyz": xyz
}, {
    "id": 2,
    "name": "February",
    "abc": abc,
    "xyz": xyz
}]

我想用不同的对象替换id为2的对象，并且想让我的对象按照这样的方式呈现。

 [{
    "id": 1,
    "name": "January",
    "abc": abc,
    "xyz": xyz
}, {
    "id": 2,
    "name": "New month",
    "abc": 1234abc,
    "xyz": someVlaue
}]

如何以 TypeScript 或 JavaScript 的高效方式进行操作。

- Roster

Answer 1

实现这个有不同的方式。

1. 通过使用Object.assign()方法。它返回修改后的目标对象。

const data = [{
    "id": 1,
    "name": "January",
    "abc": "abc",
    "xyz": "xyz"
}, {
    "id": 2,
    "name": "February",
    "abc": "abc",
    "xyz": "xyz"
}];

const target = data.find((obj) => obj.id === 2);

const source = {
  id: 2,
  name: 'New Month',
  abc: 'abc123',
  xyz: 'someValue'
};

Object.assign(target, source);

console.log( data );

使用 array.map() 方法可以创建一个新数组，其中包含对调用数组中每个元素应用提供的函数所产生结果的引用。

const data = [{"id": 1,"name": "January","abc": "abc","xyz": "xyz"}, {"id": 2,"name": "February","abc": "abc","xyz": "xyz"}];

const modifiedObj = {"id": 2,"name": "New month","abc": "1234abc","xyz": "someVlaue"};

const result = data.map((item) => item.id === modifiedObj.id ? modifiedObj : item);

console.log(result);

- Rohìt Jíndal

Answer 2

const arr =  [{
  "id": 1,
  "name": "January",
  "abc": "abc",
  "xyz": "xyz"
}, {
  "id": 2,
  "name": "February",
  "abc": "abc",
  "xyz": "xyz"
}]

const index = arr.findIndex(entry => entry.id === 2);
arr[index] = {id: 2, name: "New month", abc: "1234abc", xyz: "someVlaue"} // (sic)

- JS Chewy

---

你的回答可以通过添加更多支持信息来改进。请[编辑]以添加进一步细节，例如引用或文档，以便他人可以确认你的回答是否正确。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community

Answer 3

看起来这篇文章已经很好地解释了。顶部的答案解释了如何使用find()和findIndex()函数，应该可以帮助您实现您想要做的事情。 在JavaScript对象数组中按id查找对象 编辑： 忘记替换部分了。 基于JavaScript数组中的id替换特定对象

- Mizzy

Answer 4

你可以按如下方式使用Object.assign()与find()一起使用：

const data = [{
    "id": 1,
    "name": "January",
    "abc": "abc",
    "xyz": "xyz"
}, {
    "id": 2,
    "name": "February",
    "abc": "abc",
    "xyz": "xyz"
}];

Object.assign(
    //find the desired object
    data.find(({id,name,abc,xyz}) => id === 2),
    //pass these new values 
    {name:"New Month",abc:"abc123",xyz:"someValue"}
);

console.log( data );

- PeterKA

Answer 5

替换对象的另一种方法：

const data = [{"id": 1,"name": "January","abc": "abc","xyz": "xyz"}, {"id": 2,"name": "February","abc": "abc","xyz": "xyz"}];

const newObj = {"id": 2,"name": "New month","abc": "1234abc","xyz": "someVlaue"};
const targetId = 2;

const result = data.map((obj) => obj.id === targetId ? newObj : obj);
console.log(result);

.as-console-wrapper{min-height: 100%!important; top: 0}

- A1exandr Belan

Answer 6

可以使用赋值操作，但也可以使用查找操作然后更新值。如果您的数据结构与您所拥有的完全相同，则如果您不想改变原始值，则赋值将起作用。但是，如果您的值中有任何对象，则最好使用此方法，除非您还要在更改之前进行整个对象的深层复制。

const data = [{
    "id": 1,
    "name": "January",
    "abc": "abc",
    "xyz": "xyz"
}, {
    "id": 2,
    "name": "February",
    "abc": "abc",
    "xyz": "xyz"
}];

const element = data.find(el => el.id === 2)
element.xyz = "WHATERVER"
console.log(data)

- terpinmd