Разрушение массива/объекта в JavaScript

Деструктуризация — одна из наиболее часто используемых функций JavaScript ES6. Эта замечательная функция помогает изящным образом извлекать значения из массивов или свойства объектов в их собственные переменные.

До обновления ES6, когда вам нужно распаковать значение из массива, вы можете сделать что-то вроде этого.

let randomArray = ['one', 'two', 'three', 'four'];
let firstElement = randomArray[0];
let thirdElement = randomArray[2];
console.log(firstElement);    // prints 'one'
console.log(thirdElement);    // prints 'three'

Мы можем получить тот же результат с деструктурированием массива и сделать его намного красивее.

let [firstElement, ,thirdElement] = ['one', 'two', 'three', 'four']
console.log(firstElement);   // prints 'one'
console.log(thirdElement);  // prints 'three'

Мы оставили место для второго элемента. Именно по этой причине мы получили «три» для thirdElement .
Просто чтобы уточнить,

let [firstElement, thirdElement] = ['one', 'two', 'three', 'four']
console.log(firstElement);   // prints 'one'
console.log(thirdElement);  // prints 'two' not 'three'

Теперь мы знаем, как выборочно удалять элементы, но что, если вы хотите присвоить остальные элементы определенной переменной? Мы можем деструктурировать массив следующим образом.

let [firstElement,...restElements] = ['one', 'two', 'three', 'four']
console.log(firstElement);   // prints 'one'
console.log(restElements);   // prints ['two', 'three', 'four']

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

Деструктуризация объекта работает аналогичным образом, но синтаксически мы используем фигурные скобки {}, когда нам нужно деструктурировать объект таким образом.

let userObj = {
   name: 'John Doe',
   address: {
       city: 'NYC',
       country: 'USA'
       }
   }
let {name, address} = userObj;
console.log(name);    // prints 'John Doe'
console.log(address); // prints {city: 'NYC', country: 'USA'}

Если мы сделаем это до ES6, это будет выглядеть примерно так.

let userObj = {
   name: 'John Doe',
   address: {
       city: 'NYC',
       country: 'USA'
       }
   }
let name = userObj.name;        // prints 'John Doe'
let address = userObj.address;  // prints {city: 'NYC', country: 'USA'}

Это еще не все. Узнать их можно здесь.

Спасибо за чтение. :)