Деструктуризация объектов и массивов в JavaScript ES6

Development, Java | Amber | Комментировать запись

В JavaScript ES6 (ES2015) появилась возможность извлекать данные из массивов и объектов и не тратить при этом столько усилий (в том числе на написание кода), как раньше. В этом мануале мы на нескольких примерах покажем, как это делается.

Деструктуризация массивов

Вы можете автоматически создать переменные, чьи значения отвечают элементам массива:

const names = ['Bob', 'Fred', 'Benedict'];
const [cat, dog, alligator] = names;
console.log(cat); // Bob
console.log(dog); // Fred
console.log(alligator); // Benedict

Вы можете пропустить элементы массива. Для этого поставьте запятую и не указывайте имени переменной:

const names = ['Bob', 'Fred', 'Benedict'];
const [cat, , alligator] = names;
console.log(cat); // Bob
console.log(alligator); // Benedict

Также вы можете деструктурировать часть массива, а затем поместить остаток в новый массив.

const names = ['Bob', 'Fred', 'Benedict'];
const [cat, ...rest] = names;
console.log(cat); // Bob
console.log(rest); // ["Fred", "Benedict"]

Деструктуризация объектов

Деструктуризация объектов работает немного иначе, потому что ключи не обязательно идут в определенном порядке. Потому имя новой переменной должно совпадать с именем нужного ключа объекта.

const names = {cat: 'Bob', dog: 'Fred', alligator: 'Benedict'};
const {cat, dog, alligator} = names;
console.log(cat); // Bob
console.log(dog); // Fred
console.log(alligator); // Benedict

Но и это требование можно обойти. Вот так вы можете присвоить переменным новые имена:

const names = {cat: 'Bob', dog: 'Fred', alligator: 'Benedict'};
const {cat: newCat, dog: newDog, alligator: newAlligator} = names;
console.log(newCat); // Bob
console.log(newDog); // Fred
console.log(newAlligator); // Benedict