Работа с объектами и массивами с помощью Rest и Spread

Изучите два современных метода работы с массивами и объектами в JavaScript.

Вы можете развернуть массив, объект или строку, используяоператор распространения ....

Начнем с примера массива. Данный

const a = [1, 2, 3]

вы можете создать новый массив, используя

const b = [...a, 4, 5, 6]

Вы также можете создать копию массива, используя

const c = [...a]

Это также работает с объектами. Клонировать объект с помощью:

const newObj = { ...oldObj }

Используя строки, оператор распространения создает массив с каждым символом в строке:

const hey = 'hey'
const arrayized = [...hey] // ['h', 'e', 'y']

У этого оператора есть несколько довольно полезных приложений. Самый важный из них - это возможность очень простым способом использовать массив в качестве аргумента функции:

const f = (arg1, arg2) => {}
const a = [1, 2]
f(...a)

(раньше вы могли сделать это, используяf.apply(null, a)но это не так красиво и читабельно)

Вэлемент отдыхаполезно при работе сдеструктуризация массива:

const numbers = [1, 2, 3, 4, 5]
[first, second, ...others] = numbers

иэлементы распространения:

const numbers = [1, 2, 3, 4, 5]
const sum = (a, b, c, d, e) => a + b + c + d + e
const sumOfNumbers = sum(...numbers)

ES2018 вводит остальные свойства, которые такие же, но для объектов.

Остальные свойства:

const { first, second, ...others } = {
  first: 1,
  second: 2,
  third: 3,
  fourth: 4,
  fifth: 5
}

first // 1 second // 2 others // { third: 3, fourth: 4, fifth: 5 }

Распространение свойствпозволяют создать новый объект, комбинируя свойства объекта, переданного после оператора распространения:

const items = { first, second, ...others }
items //{ first: 1, second: 2, third: 3, fourth: 4, fifth: 5 }

Скачать мою бесплатнуюРуководство для начинающих по JavaScript


Больше руководств по js: