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

Грамматика деструктурированияassigns

Грамматика деструктурированияassigns объектные свойства в переменные:

let {firstName, lastName} = person;

Он также может распаковывать массивы и любые другие итерируемые объекты:

let [firstName, lastName] = person;

Деструктурирование объекта

Пример

// Создание объекта
const person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// Деструктуризация
let {firstName, lastName} = person;

Попробуйте сами

Порядок свойств не важен:

Пример

// Создание объекта
const person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// Деструктуризация
let {lastName, firstName} = person;

Попробуйте сами

Примечание:

Деструктурирование не разрушительное.

Деструктурирование не изменяет исходный объект.

Значения по умолчанию объекта

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

Пример

// Создание объекта
const person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// Деструктуризация
let {firstName, lastName, country = "US"} = person;

Попробуйте сами

Аллиасы свойств объекта

Пример

// Создание объекта
const person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// Деструктуризация
let {lastName: name} = person;

Попробуйте сами

Деструктурирование строки

Одним из zastosowań деструктурирования является распаковка символов строки.

Пример

// Создание строки
let name = "W3Schools";
// Деструктуризация
let [a1, a2, a3, a4, a5] = name;

Попробуйте сами

Примечание:

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

Деструктурирование массива

Мы можем извлечь переменные массива в свои переменные:

Пример

// Создание массива
const fruits = ["Bananas", "Oranges", "Apples", "Mangos"];
// Деструктуризация
let [fruit1, fruit2] = fruits;

Попробуйте сами

Пропуск значений массива

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

Пример

// Создание массива
const fruits = ["Bananas", "Oranges", "Apples", "Mangos"];
// Деструктуризация
let [fruit1,,,fruit2] = fruits;

Попробуйте сами

Позиции массива

Мы можем извлечь значения из конкретных позиций массива:

Пример

// Создание массива
const fruits = ["Bananas", "Oranges", "Apples", "Mangos"];
// Деструктуризация
let {[0]: fruit1, [1]: fruit2} = fruits;

Попробуйте сами

Оставшиеся свойства

Можна использовать оставшиеся свойства в конце деструктурирования грамматики.

Эта грамматика хранит все оставшиеся значения в новый массив:

Пример

// Создание массива
const numbers = [10, 20, 30, 40, 50, 60, 70];
// Деструктуризация
const [a, b, ...rest] = numbers;

Попробуйте сами

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

Пример

// Создание Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);
// Деструктуризация
let text = "";
for (const [key, value] of fruits) {
  text += key + " is " + value;
}

Попробуйте сами

Обмен значениями переменных JavaScript

可以使用 деструктуризационного присваивания для обмена значениями двух переменных:

Пример

let firstName = "Bill";
let lastName = "Gates";
// Деструктуризация
[firstName, lastName] = [lastName, firstName];

Попробуйте сами