Skip to main content

Деструктурирующее присваивание

Деструктуризация позволяет разбивать объект или массив на переменные при присвоении.

Полный синтаксис для объекта:

let {prop : varName = defaultValue, ...rest} = object

Полный синтаксис для массива:

let [item1 = defaultValue, item2, ...rest] = array

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

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

let arr = ["Ilya", "Kantor"]; // у нас есть массив с именем и фамилией
let [firstName, surname] = arr; // деструктурирующее присваивание

💥 «Деструктуризация» не означает «разрушение».

Работает с любым перебираемым объектом с правой стороны​

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

Присваивайте чему угодно с левой стороны​

let user = {};
[user.name, user.surname] = "Ilya Kantor".split(' ');
alert(user.name, user.surname); // Ilya Kantor

Цикл с .entries()​

let user = {
  name: "John",
  age: 30
};

for (let [key, value] of Object.entries(user)) { // цикл по ключам и значениям
  alert(`${key}:${value}`); // name:John, затем age:30
}

Трюк обмена переменных​

let guest = "Jane";
let admin = "Pete";

[guest, admin] = [admin, guest];// Давайте поменяем местами значения: сделаем guest = "Pete", а admin = "Jane"
alert(`${guest} ${admin}`); // Pete Jane (успешно заменено!)

Остаточные параметры «…»​

let [name1, name2, ...rest] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];
// rest это массив элементов, начиная с 3-го
alert(rest[0]); // Consul
alert(rest[1]); // of the Roman Republic
alert(rest.length); // 2

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

Если мы хотим, чтобы значение «по умолчанию» заменило отсутствующее, мы можем указать его с помощью =

// значения по умолчанию
let [name = "Guest", surname = "Anonymous"] = ["Julius"];

alert(name);    // Julius (из массива)
alert(surname); // Anonymous (значение по умолчанию)

Значения по умолчанию могут быть гораздо более сложными выражениями или даже функциями. Они выполняются, только если значения отсутствуют.

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

Деструктурирующее присваивание также работает с объектами.

let options = {
  title: "Menu",
  width: 100,
  height: 200
};

// { sourceProperty: targetVariable }
let {width: w, height: h, title} = options;

// width -> w
// height -> h
// title -> title

alert(title);  // Menu
alert(w);      // 100
alert(h);      // 200

Остаток объекта «…»​

let options = {
  title: "Menu",
  height: 200,
  width: 100
};

// title = свойство с именем title
// rest = объект с остальными свойствами
let {title, ...rest} = options;

// сейчас title="Menu", rest={height: 200, width: 100}
alert(rest.height);  // 200
alert(rest.width);   // 100

Умные параметры функций​

function showMenu(title = "Untitled", width = 200, height = 100, items = []) {
  // ...
}

🚀 Источник: https://learn.javascript.ru/destructuring-assignment