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

Деструктуризация массивов — синтаксис ES6, позволяющий извлекать элементы массива в отдельные переменные по их позиции через паттерн [a, b, c] = array.

Зачем нужно

Деструктуризация делает код компактнее и выразительнее: вместо обращений через индексы arr[0], arr[1] имена переменных сразу передают смысл данных. Особенно удобна при работе с функциями, возвращающими массивы (useState в React, Object.entries(), Promise.all).

Где используется

  • Распаковка результатов функций, возвращающих массивы
  • Перебор Object.entries() в for...of
  • Обмен значений переменных без вспомогательной переменной
  • Обработка параметров функций

Примеры

Базовая деструктуризация

const coords = [51.5074, -0.1278];
const [lat, lng] = coords;
console.log(lat); // 51.5074
console.log(lng); // -0.1278

// Пропуск элементов через запятую
const [first, , third] = [1, 2, 3];
console.log(first); // 1
console.log(third); // 3

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

const [a = 10, b = 20] = [1];
console.log(a); // 1
console.log(b); // 20 (значение по умолчанию)

Rest-элемент

const [head, ...tail] = [1, 2, 3, 4, 5];
console.log(head); // 1
console.log(tail); // [2, 3, 4, 5]

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

let x = 1, y = 2;
[x, y] = [y, x];
console.log(x, y); // 2 1

Object.entries()

const user = { name: 'Иван', age: 30, city: 'Москва' };

for (const [key, value] of Object.entries(user)) {
  console.log(`${key}: ${value}`);
}
// name: Иван / age: 30 / city: Москва

Promise.all

const [users, products] = await Promise.all([
  fetch('/api/users').then(r => r.json()),
  fetch('/api/products').then(r => r.json()),
]);

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

function processPoint([x, y, z = 0]) {
  return Math.sqrt(x ** 2 + y ** 2 + z ** 2);
}

processPoint([3, 4]);     // 5
processPoint([1, 2, 3]);  // 3.74...

useState-паттерн (React-стиль)

function useState(initial) {
  let state = initial;
  const setState = (val) => { state = val; };
  return [ => state, setState];
}

const [getCount, setCount] = useState(0);
setCount(5);
console.log(getCount); // 5

Частые ошибки

  • Деструктуризация null или undefined — вызывает TypeError; перед деструктуризацией убедитесь, что значение является массивом.
  • Порядок имеет значение — переменные привязываются по позиции, не по значению; пропущенные позиции — запятые.
  • Rest должен быть последним — const [, ...middle, last] — SyntaxError; rest-элемент разрешён только в конце.

Связанные темы

Ресурсы