Спред и деструкция в JavaScript

Знание парадигм JavaScript, начиная с ES6 — это очень важно, если мы хотим работать с современным фреймворками на подобие React.js или Vue.js, потому что они облегчают написание рутинных операций. В данном посте рассмотрим 2 очень важные операции spread и destruction.

Spread

Начнем с того, что в JavaScript версии ES6 появилась новая возможность склеивать массивы и объекты и данная операция называется spread и обозначается, как ...

это пример склеивания массива

const nums1 = [2, 3]
const nums2 = [4, 5, 6]
const numbers = [1, ...nums1, ...nums2];
console.log(numbers) //[ 1, 2, 3, 4, 5, 6 ]

это пример склеивания объекта

let params = { greet: 'hello', name: 'David' }
let hey = { name: 'James' }
const hello = { ...params, ...hey } // значение David затерется значением James
console.log(hello) //{ greet: 'hello', name: 'James' }

нужно пояснить момент с затиранием, который заключается в том, что если в объекте встречаются 2 поля с одинаковым названием, то в финальное значение обновится последним значением

Destruction

Деструкция — это операция перевода массива или объекта в отдельные именованные переменные. Данная операция была введена в синтаксис языка версии ES6 и вот как она работает

это пример деструкции массива

const numbers = [ 1, 2, 3, 4, 5, 6 ]
const [one, two, ...rest] = numbers;
console.log(one, two, rest) //1 2 [ 3, 4, 5, 6 ]

это пример деструкции объекта

const params = { greet: 'hello', name: 'David' }
const { greet, name } = params
console.log(greet, name) //hello James

Пожалуйста, оцените материал

Спред и деструкция в JavaScript