Знание парадигм 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