JavaScript Destructuring Assignment

Объект и Массив - это две часто используемые структуры данных JavaScript.

С помощью объектов вы можете создавать сущности, хранящие данные по ключу. С помощью массивов вы можете собирать данные в упорядоченную коллекцию.

В случае передачи их в функцию, она может потребовать объект и массив не как целое, а некоторые отдельные части.

Литеральные выражения объекта и массива позволяют создавать ад hoc пакеты. Вот синтаксис:

const x = [1, 2, 3, 4, 5];

Операция деструктуризации - это уникальный синтаксис, который помогает "распаковывать" объекты или массивы в группы переменных. Деструктуризация также может эффективно работать со сложными функциями, значениями по умолчанию и другими.

Деструктивное присваивание использует следующий синтаксис:

Javascript arrays destructuring

const x = [1, 2, 3, 4, 5]; const [y, z] = x; console.log(y); // 1 console.log(z); // 2

Вы можете найти аналогичные функции и в других языках. Например, в Python или Perl.

Теперь давайте посмотрим на пример деструктуризации массива в переменные:

Javascript arrays destructuring

// we have an array with the name and surname let arr = ["John", "Doe"]; // destructuring assignment // sets firstname = arr[0] // and surname = arr[1] let [firstname, surname] = arr; console.log(firstname); // John console.log(surname); // Doe

В результате можно работать с переменными вместо членов массива.

Это будет работать еще лучше, если вы совместите его с split или другими методами, возвращающими массив:

let [firstName, surname] = "John Doe".split(' ');

Обратите внимание, что деструктуризация не то же самое, что и "деструктивная".

Мы называем это деструктуризацией, потому что она "деструктурирует" путем копирования элементов в переменные.

Вот более короткий способ записи:

// let [firstName, surname] = arr;
let firstName = arr[0];
let surname = arr[1];

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

Javascript arrays destructuring

// second element is not needed let [name, age , profession] = ["David", "23", "programmer"]; console.log(profession); // programmer

Это может работать с любым итерируемым элементом справа:

let [a, b, c] = "abc"; // ["a", "b", "c"]
let [one, two, three] = new Set([1, 2, 3]);

Кроме того, вы можете использовать любые присваиваемые элементы слева.

Например, свойство объекта:

Javascript arrays destructuring

let user = {}; [user.name, user.surname] = "John Doe".split(' '); console.log(user.name); // John

Еще одна полезная вещь - это возможность использовать метод Object.entries(obj) с деструктуризацией для перебора ключей и значений объекта.

Вот пример:

Javascript object entries method with destructuring

let user = { name: "Maria", age: 25 }; // loop over keys-and-values for (let [key, value] of Object.entries(user)) { console.log(`${key}:${value}`); // name:Maria, then age:25 }

Оставшийся ‘…’

Если вам нужно получить не только первые значения, но и собрать все последующие, у вас есть возможность добавить еще один параметр для получения “остальных”, просто используя три точки “…”, вот так:

Javascript arrays rest

let [name1, name2, ...rest] = ["John", "Doe", "doctor", "surgeon"]; console.log(name1); // John console.log(name2); // Doe // Note that type of `rest` is Array. console.log(rest[0]); // doctor console.log(rest[1]); // surgeon console.log(rest.length); // 2

Значения по умолчанию

В случае, если в массиве меньше значений, чем переменных в присваивании, ошибки не произойдет. Отсутствующие значения будут считаться неопределенными:

Javascript arrays rest

let [firstName, surname] = []; console.log(firstName); // undefined console.log(surname); // undefined

Если вы хотите значение по умолчанию для замены пропущенного, используйте знак =, как это:

Javascript arrays rest

// default values let [name = "David", surname = "Smith"] = ["Peter"]; console.log(name); // Peter (from array) console.log(surname); // Smith (default used)

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

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

let {  var1,  var2} = {  var1: …,  var2: …}

Справа находится существующий объект, который необходимо разделить на переменные. Слева - шаблон для сопоставления свойств. Знак три точки {...} включает группу имен переменных.

Вот пример: