使用spread运算符更新包含对象的数组

Question

我有一个包含javascript/typescript中对象的数组.

let array = [{id:1,name:'One'}, {id:2, name:'Two'}, {id:3, name: 'Three'}]

如何更新第二个元素的名称(ID为2)并使用javascript spread(...)运算符将数组复制到新数组？

Answer 1

您可以使用混合.map和...扩展运算符

您可以在创建新阵列后设置该值

let array = [{id:1,name:'One'}, {id:2, name:'Two'}, {id:3, name: 'Three'}];

let array2 = array.map(a => {return {...a}})

array2.find(a => a.id == 2).name = "Not Two";

console.log(array);
console.log(array2);

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

或者你可以在.map

let array = [{id:1,name:'One'}, {id:2, name:'Two'}, {id:3, name: 'Three'}];

let array2 = array.map(a => {
  var returnValue = {...a};

  if (a.id == 2) {
    returnValue.name = "Not Two";
  }

  return returnValue
})


console.log(array);
console.log(array2);

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

Answer 2

使用 Spred Operator，您可以使用以下方法更新特定数组值

let array = [
  { id: 1, name: "One" },
  { id: 2, name: "Two" },
  { id: 3, name: "Three" },
];
const label = "name";
const newValue = "Two Updated";
// Errow comes if index was string, so make sure it was integer
const index = 1; // second element, 

const updatedArray = [
  ...array.slice(0, index),
  {
    // here update data value
    ...array[index],
    [label]: newValue,
  },
  ...array.slice(index + 1),
];

console.log(updatedArray);