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

Деструктуризация — удобный способ извлечения значений из массивов и объектов в JavaScript, позволяющий сократить код и улучшить читаемость. Рассмотрим примеры использования деструктуризации для массивов и объектов.

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

Функция quickValues вычисляет сумму и разность двух чисел:

function quickValues(a, b) {
  return [a + b, a - b];
}

Функция возвращает массив, содержащий сумму и разность. Для получения этих значений обычно присваивали бы элементы массива отдельным переменным:

const result = quickValues(42, 10);
const sum = result[0];
const sub = result[1];
console.log(sum, sub); // 52 32

Деструктуризация упрощает этот код:

const [sum, sub] = quickValues(42, 10);
console.log(sum, sub); // 52 32

Переменные sum и sub создаются непосредственно из массива, используя квадратные скобки [].

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

Расширим функцию quickValues:

function quickValues(a, b) {
  return [a + b, a - b, a * b, a / b];
}

Если нужны только сумма и произведение, можно пропустить ненужные элементы:

const [, , mul] = quickValues(42, 10);
console.log(mul); // 420

Или, используя оператор rest (…), собрать оставшиеся элементы в новый массив:

const [sum, , mul, ...rest] = quickValues(42, 10);
console.log(rest); // [4.2]

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

Если функция возвращает undefined для какого-либо элемента, можно задать значение по умолчанию:

function quickValues(a, b) {
  return [a + b, undefined, a * b, a / b];
}
const [sum, sub = 'Вычитание нет', mul, div] = quickValues(42, 10);
console.log(sum, sub, mul, div); // 52 Вычитание нет 420 4.2

Если sub не определено, используется значение ‘Вычитание нет’. В противном случае, значение по умолчанию игнорируется.

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

Деструктуризация объектов аналогична деструктуризации массивов. Объект person:

const person = {
  name: 'Max',
  age: 20,
  address: {
    country: 'Russia',
    city: 'Moscow'
  }
};

Получим значения полей объекта:

const { name, age } = person;
console.log(name, age); // Max 20

Фигурные скобки {} используются для деструктуризации объекта. Можно задавать другие имена переменных и значения по умолчанию:

const { name: firstName, age, car = 'Машины нет' } = person;
console.log(firstName, age, car); // Max 20 Машины нет

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

const { address: { city: homeTown, country } } = person;
console.log(homeTown, country); // Moscow Russia

Оператор rest (…) также применим к объектам:

const { name, ...info } = person;
console.log(name, info); // Max {age: 20, address: {…}}

Применение на практике: React

Деструктуризация часто используется с props в React:

function MyComponent({ name, age }) {
  return <div>Имя: {name}, Возраст: {age}</div>;
}

Это позволяет избежать многократного написания props.name и props.age.

Деструктуризация — мощный инструмент для работы с данными в JavaScript, повышающий читаемость и сокращающий код. Она эффективна для массивов и объектов, поддерживая пропуск элементов, значения по умолчанию и оператор rest. Широко применяется в различных фреймворках, таких как React.

Что будем искать? Например,программа