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]）。

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

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

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

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

＆＃13;

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);

＆＃13;

Answer 3

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

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

Answer 4

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

＆＃13;

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);

＆＃13;

Javascript：更改数组中元素的值而不改变数组

4 个答案: