LETUNOFF DOCS

TS. Массивы. Деструктуризация

🧱 Суть

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

Особенно полезна, когда объект содержит вложенные структуры.

📦 Проблема

1. Путают деструктуризацию массива и объекта

Массив:

const [first, second] = array;

Объект:

const { name, age } = user;

Это разные формы деструктуризации.

2. Не понимают, как достать элементы вложенного массива

Например:

{
  movement: [10, 20],
  direction: [0, 1]
}

Нужно получить только вторые значения массивов.

✅ Решение

Использовать вложенную деструктуризацию.

💻 Код

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

Если функция получает массив:

([_, my]) => {
  // _
  // my
}

Это означает:

const [_, my] = movement;

Где:

  • _ – первый элемент массива
  • my – второй элемент массива

Что такое _

_ – это обычное имя переменной.
JavaScript не воспринимает его специально.

Просто существует соглашение:

_

используют для значения, которое специально игнорируют.

Например:

const [_, height] = size;

Здесь нужна только высота.

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

Если функция получает объект:

({ movement, direction }) => {
}

То извлекаются поля объекта:

const {
  movement,
  direction
} = data;

Теперь:

movement // массив
direction // массив

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

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

({ 
  movement: [, my],
  direction: [, dy]
}) => {
}

Что происходит:

object
 ├─ movement → [x, y]
 │              ↓
 │              y → my
 │
 └─ direction → [dx, dy]
                ↓
                dy → dy

Более понятный вариант

То же самое можно написать обычным способом:

({ movement, direction }) => {
  const my = movement[1];
  const dy = direction[1];
}

Результат одинаковый.
Разница только в стиле записи.

Когда использовать

СитуацияВариант
Получаешь сам массив[_, value]
Получаешь объект{ field }
Объект содержит массивы{ field: [, value] }
Код сложный для чтенияобычное извлечение через переменные

Частичная деструктуризация

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

Пример:

const movement = [50, 120];
 
const [, y] = movement;
 
console.log(y); // 120

Разбор:

[ x , y ]
  ↑   ↑
  |   |
пропуск  взять

🎯 Вывод

  • (_, my) работает, когда параметр функции – массив
  • ({ movement, direction }) работает, когда параметр – объект
  • { movement: [, my] } позволяет сразу достать элемент вложенного массива
  • _ – просто соглашение для игнорируемых значений

🔗 Связано

Обратные ссылки