Оператор распространения в Javascript и React

Базовый вводный / повторный курс о том, как работают операторы спреда в JS и React!

Что такое оператор спреда?

Оператор распространения {…} или […] - это метод манипуляции, используемый для итераций, таких как массивы или объекты, для их расширения, при этом вместо них используется 0+ аргументов. Это неразрушающий метод, что означает, что исходная итерация, для которой был вызван метод, не будет изменена. Он может заменить вредоносные методы манипуляции, такие как .concat() и .splice() . Давайте посмотрим, как это работает.

let jungle_reptiles = ['Python', 'Chameleon']
let jungle_birds = ['Tucan', 'Parrot']
let joined_array = [...jungle_reptiles,...jungle_birds]
console.log(joined_array)
// => ['Python', 'Chameleon', 'Tucan', 'Parrot']
console.log(jungle_birds)
// => ['Tucan', 'Parrot']
console.log(jungle_reptiles)
// => ['Python', 'Chameleon']

Как видите, исходный массив остался прежним, но все еще использовал свое содержимое для объединения двух и формирования нового. Что, если бы мы захотели скопировать содержимое этого нового joined_array и сохранить его в другом?

let joined_array = ['Python', 'Chameleon', 'Tucan', 'Parrot']
let joined_array2 = [...joined_array]
console.log(joined_array2)
// => ['Python', 'Chameleon', 'Tucan', 'Parrot']
console.log(joined_array)
// => ['Python', 'Chameleon', 'Tucan', 'Parrot']

joined_array2 = ['Tiger', ...joined_array]
console.log(joined_array2)
// => ['Tiger', 'Python', 'Chameleon', 'Tucan', 'Parrot']
console.log(joined_array)
// => ['Python', 'Chameleon', 'Tucan', 'Parrot']

Под капотом у обоих этих массивов есть два разных места в памяти, поэтому исходный массив не подвергается манипуляциям. Что произойдет, если вместо этого мы установим обе переменные прямо равными друг другу и будем использовать метод .unshift() вместо оператора распространения при добавлении 'Tiger'?

let joined_array = ['Python', 'Chameleon', 'Tucan', 'Parrot']
let joined_array2 = joined_array
joined_array2.unshift('Tiger')
console.log(joined_array)
// => ['Tiger', 'Python', 'Chameleon', 'Tucan', 'Parrot']
console.log(joined_array2)
// => ['Tiger', 'Python', 'Chameleon', 'Tucan', 'Parrot']

Поскольку и joined_array2, и joined_array занимали одно и то же место в памяти, использование разрушающего метода для одного повлияло на другое. Вот как выглядит оператор распространения, когда мы используем его с объектами!

let celebrity = {
  name: 'Ariana Grande',
  occupation: 'Pop Star'
}
let updated_celeb = {
  ...celebrity,
  age: 26
}
console.log(updated_celeb)
// => { name: 'Ariana Grande', occupation: 'Pop Star', age: 26 }
console.log(celebrity)
// => { name: 'Ariana Grande', occupation: 'Pop Star' }

В React вы можете использовать оператор распространения во многих случаях, например, если вы хотите обновить свое состояние! Например, предположим, что у вас есть приложение, в котором каждый раз, когда пользователь заполняет форму, которая состоит только из отправки своего любимого животного, и у вас есть начальное состояние, установленное на массив, который в конечном итоге будет содержать все новые записи. Мы могли бы реализовать оператор распространения следующим образом:

addAnimal(newAnimal) {
  let newAnimal = [...this.state.animals, newAnimal]
    this.setState({
      animals: newAnimal
   })
}

В основном мы говорим о том, чтобы присвоить новому значению statea его исходные значения, плюс те, которые пользователь добавляет с формой. В подобных случаях лучше всего использовать такие методы, как оператор распространения, потому что у вас всегда будет копия исходной итерации, независимо от того, насколько сильно вы манипулируете ею с помощью оператора распространения. Если вы хотите прочитать дополнительную документацию о том, как работает этот замечательный метод, перейдите по ссылкам ниже!

Удачного кодирования!