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

Цель урока

В этом уроке ты научишься:

Извлекать значения из массивов
Извлекать свойства из объектов
Использовать значения по умолчанию

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

Базовый синтаксис

let fruits = ["яблоко", "банан", "апельсин"];

let [first, second, third] = fruits;

console.log(first);  // "яблоко"
console.log(second); // "банан"
console.log(third);  // "апельсин"

Пропуск элементов

let [first, , third] = ["яблоко", "банан", "апельсин"];

console.log(first); // "яблоко"
console.log(third); // "апельсин"

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

let [a, b, c = "нет"] = [1, 2];

console.log(a); // 1
console.log(b); // 2
console.log(c); // "нет"

Rest-элемент

let [first, ...rest] = [1, 2, 3, 4, 5];

console.log(first); // 1
console.log(rest);  // [2, 3, 4, 5]

Обмен переменных

let a = 1;
let b = 2;

[a, b] = [b, a];

console.log(a); // 2
console.log(b); // 1

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

Базовый синтаксис

let user = {
  name: "Иван",
  age: 25,
  city: "Москва"
};

let { name, age, city } = user;

console.log(name); // "Иван"
console.log(age);  // 25
console.log(city); // "Москва"

Переименование

let user = {
  name: "Иван",
  age: 25
};

let { name: userName, age: userAge } = user;

console.log(userName); // "Иван"
console.log(userAge);  // 25

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

let user = {
  name: "Иван"
};

let { name, age = 18, city = "Неизвестно" } = user;

console.log(name); // "Иван"
console.log(age);  // 18
console.log(city); // "Неизвестно"

Комбинация

let user = {
  name: "Иван"
};

let { name: userName = "Гость", age: userAge = 0 } = user;

console.log(userName); // "Иван"
console.log(userAge);  // 0

Rest-свойства

let user = {
  name: "Иван",
  age: 25,
  city: "Москва",
  country: "Россия"
};

let { name, ...rest } = user;

console.log(name); // "Иван"
console.log(rest); // { age: 25, city: "Москва", country: "Россия" }

Вложенная деструктуризация

Объекты

let user = {
  name: "Иван",
  address: {
    city: "Москва",
    street: "Ленина"
  }
};

let { name, address: { city, street } } = user;

console.log(name);   // "Иван"
console.log(city);   // "Москва"
console.log(street); // "Ленина"

Массивы

let matrix = [[1, 2], [3, 4]];

let [[a, b], [c, d]] = matrix;

console.log(a, b, c, d); // 1 2 3 4

В параметрах функций

function greet({ name, age = 0 }) {
  console.log(`${name}, ${age} лет`);
}

greet({ name: "Иван", age: 25 }); // "Иван, 25 лет"
greet({ name: "Мария" });         // "Мария, 0 лет"

// С массивом
function sum([a, b, c]) {
  return a + b + c;
}

console.log(sum([1, 2, 3])); // 6