使用javascript es6更新对象数组

Question

is there any other way to write update an item in array of object other than below code?

const updateTodo = (list, updated) => {
   const index = list.findIndex(item => item.id === update.id)
   return [
   ...list.slice(0,index),
   updated,
   ...list.slice(index+1)
   ]
}

Wait, is above function even working? https://jsbin.com/sifihocija/2/edit?js,console

Answer 1

The way you are doing it, is the right way to do it. However it is not working for you because in your case updated is an array and not an object and hence you only need to access the id of the first element of the array

const updateTodo = (list, updated) => {

   const index = list.findIndex(item => return item.id === updated[0].id)

   return [
   ...list.slice(0,index),
   updated[0],
   ...list.slice(index+1)
   ]
}

JSBIN

However I prefer the library immutability-helper to perform any updates on the data you can do that like

import update from 'immutability-helper';
const updateTodo = (list, updated) => {
const index = list.findIndex(item => return item.id === updated[0].id)
   return update(list, {
        [index]: {
              $set: updated[0];
        }

   })
}

One advantage of using immutabilty-helper is that its gives more control when the data is highly nested

Answer 2

The simplest way to update(addition/deletion) an array is to use splice method.

it takes the first argument as the index, second as the no of elements you want to remove and next arguments for the addition.

Answer 3

You are doing to much. No need to manipulate the array if you know the index.

const items = [{id: 1, value: 1}, {id: 2, value: 2}, {id: 3, value: 3}];
items[2] = {id: 4, value: 4};
console.log(items); //last element changed

if you care about no side effects copy the array before

const items = [{id: 1, value: 1}, {id: 2, value: 2}, {id: 3, value: 3}];
const copy = items.slice();
copy[2] = {id: 4, value: 4};
return copy;