Javascript：在不改变数组的情况下更改数组中元素的值

Question

假设我有一个表单中的数组：

const array = [{id: 1, title: "this"}, {id: 2, title: "that"}];

我想更改给定对象中一个元素的值。因此，例如，我的输出是这样的：

[{id: 1, title: "this"}, {id: 2, title: "foo foo foo"}];

我将一个具有两个属性的对象传递给我的函数。第一个属性是我要修改的对象的id，第二个属性是新标题：

[2, "foo foo foo"]

我可以使用以下代码找到正确对象的索引：

index = array.findIndex(item => item.id === arr[0]);

但我不知道如何更改元素并将其替换为我的新标题 (arr[1])。

我想更改第二个对象中的标题元素而不改变数组。非常感谢任何建议。

编辑：对于“不改变数组”的混淆感到抱歉。我的意思是我不希望返回的数组只是原始数组的突变，而是一个新数组。也许“不改变状态”会是一个更好的词选择。

例如，如果我要像这样返回一个数组： 返回 [...状态] 这将给我一个新数组（尽管没有更改），而不会改变原始数组。

Answer 1

如果没有……变异它，你就不能真正改变一个对象。您需要该对象的副本。假设复制数组不会花费太多，您可以执行以下操作：

const arr = [{id: 1, title: "this"}, {id: 2, title: "that"}];
const a2 = arr.map(i => i.id == 2 ? Object.assign({}, i, {title: 'foo foo foo'}): i)

console.log("original: ", arr)
console.log("with changes: ", a2)

在这种情况下，您正在复制原始对象，但更改后的对象除外，它会获取更改后的副本并保留原始对象。

Answer 2

您可以使用Array.map 函数来遍历数组并返回新数组。在map函数中，检查id是否与id passed in the arguments of the function相同。如果条件为真，则使用...(spread operators) 创建一个新对象。

const arr = [{id: 1, title: "this"}, {id: 2, title: "that"}];

var change = (id, title) => {
  return arr.map(obj => {
    if (obj.id === id) {
      return {...obj, title};
    }
    return obj;
  });
}

var arr2 = change(2, "foo foo foo");

console.log("original: ", arr);
console.log("with changes: ", arr2);

Answer 3

const array = [{
    id: 1,
    title: "this"
}, {
    id: 2,
    title: "that"
}];

function replaceTitle(oldArray, [itemId, newTitle]) {
    let newArray = JSON.parse(JSON.stringify(oldArray));
    (newArray.find(({id}) => id === itemId) || {}).title = newTitle;
    return newArray;
}

const newArray = replaceTitle(array, [2, 'foo foo foo']);
console.log('ORIGINAL', array);
console.log('UPDATED', newArray);

Answer 4

你没有改变数组。您正在更改数组中包含的对象的属性。该数组存储对您的对象的引用。

如果您想更改数组中的对象但仍想保留原始对象，则必须对存储在数组中的所有对象进行深度复制。