Деструктуризация — одна из наиболее часто используемых функций 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'}
Это еще не все. Узнать их можно здесь.
Спасибо за чтение. :)