Разница между этими двумя функциями, обрабатывающими состояние

Question

Я пробовал эти две функции и думал, что они делают одно и то же, но, видимо, нет.

Первая функция:

          setEatenFoodList(prevList => {
      const newList = [];
      for (let i=0 ; i<prevList.length ; i++) {
        if (i === index){
          const editedFood = prevList[i];
          editedFood.removingFade = true;
          newList.push(editedFood)
        } else {
          newList.push(prevList[i])
        }
      }
      return newList;
    })

Вторая функция:

          setEatenFoodList(prevList => {
      prevList[index].removingFade = true;
      return prevList;
    })

я не вижу разницы?

Answer 1

Первый код создает новый список с именем «newList», перебирает элементы исходного списка «prevList» и добавляет их в новый список. Если текущий индекс цикла равен переменной «index», он создает новую переменную с именем «editedFood», которая является копией элемента с этим индексом, устанавливает для свойства «removingFade» «editedFood» значение true и помещает его в «новый список». Наконец, он возвращает «newList» в качестве вывода.

Второй код проще, он напрямую изменяет «prevList», устанавливая для свойства «removingFade» элемента с индексом «index» значение true. И он возвращает исходный список «prevList» в качестве вывода.

Основное различие между двумя кодами заключается в том, что первый создает новый список, а второй изменяет исходный список.

Проще говоря: первая функция перебирает все элементы newList и помещает все внутрь newList. Вторая функция помещает все в исходный список (prevList)