мое новое расписание: пн-пт с 8.00 по 16.00 по москве, сб и вс - выходные; после 16.00 и на вых. отвечаю по возможности

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

В данном уроке мы с вами разберем операцию деструктуризации массивов. Данная операция предназначена для массовой записи элементов массива в переменные в одну строчку кода.

Синтаксис этой операции следующий:

let [переменная1, переменная2, переменная3] = массив;

Как вы видите, слева от знака = в квадратных скобках перечисляются имена переменных. Эти переменные массово объявляются через let, который располагается перед открывающей скобкой.

В результате операции в первую переменную запишется первый элемент массива (то есть с ключом ноль), во вторую переменную - второй, в третью переменную - третий.

Давайте посмотрим на практическом примере.

Пусть у нас есть массив, хранящий год, месяц и день:

let arr = [2025, 12, 31];

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

let arr = [2025, 12, 31]; let [year, month, day] = arr;

Посмотрим на содержимое наших переменных:

console.log(year); // выведет 2025 console.log(month); // выведет 12 console.log(day); // выведет 31

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

let arr = [2025, 12, 31]; let year = arr[0]; let month = arr[1]; let day = arr[2]; console.log(year); // выведет 2025 console.log(month); // выведет 12 console.log(day); // выведет 31

В следующем коде части массива записываются в соответствующие переменные:

let arr = ['Иван', 'Иванов', 'отдел разработки', 'программист', 2000]; let name = arr[0]; let surname = arr[1]; let department = arr[2]; let position = arr[3]; let salary = arr[4];

Переделайте этот код через деструктуризацию согласно изученной теории.

Массив из функции

Массив для деструктуризации не обязательно должен хранится в переменной. Он также может быть результатом работы функции.

Посмотрим на примере.

Пусть дана вот такая функция:

function func() { return [2025, 12, 31]; }

Деструктуризируем возвращаемое этой функцией значение:

let [year, month, day] = func();

В следующем коде части массива записываются в соответствующие переменные:

function func() { return ['Иван', 'Иванов', 'отдел разработки', 'программист', 2000]; } let arr = func(); let name = arr[0]; let surname = arr[1]; let department = arr[2]; let position = arr[3]; let salary = arr[4];

Переделайте этот код через деструктуризацию согласно изученной теории.

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

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

Давайте, к примеру, пропустим год, а месяц и день запишем в переменные. Для этого при указании переменных перед первой переменной поставим запятую, вот так: [, month, day]:

let arr = [2025, 12, 31]; let [, month, day] = arr; console.log(month); // выведет 12 console.log(day); // выведет 31

Можно пропустить не одно значение, а несколько:

let arr = [2025, 12, 31]; let [,, day] = arr; console.log(day); // выведет 31

В следующем коде части массива записываются в соответствующие переменные:

let arr = ['Иван', 'Иванов', 'отдел разработки', 'программист', 2000]; let department = arr[2]; let position = arr[3];

Переделайте этот код через деструктуризацию согласно изученной теории.

Меньше элементов

Если в массиве меньше элементов, чем переменных, то в "лишние" переменные запишется undefined:

let arr = [2025, 12]; let [year, month, day] = arr; console.log(year); // выведет 2025 console.log(month); // выведет 12 console.log(day); // выведет undefined

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

Если в массиве больше элементов, чем переменных - лишние элементы никуда не запишутся и ничего страшного не произойдет.

Для примера добавим в наш массив еще часы, минуты и секунды - от этого ничего не поменяется:

let arr = [2025, 12, 31, 23, 59, 59]; let [year, month, day] = arr; console.log(year); // выведет 2025 console.log(month); // выведет 12 console.log(day); // выведет 31

Остаток

Если в массиве больше элементов, чем переменных, при необходимости лишние элементы можно записать в массив с помощью оператора rest:

let arr = [2025, 12, 31, 23, 59, 59]; let [year, month, day, ...time] = arr; console.log(year); // выведет 2025 console.log(month); // выведет 12 console.log(day); // выведет 31 console.log(time); // выведет [23, 59, 59]

В следующем коде части массива записываются в соответствующие переменные:

let arr = ['Иван', 'Иванов', 'отдел разработки', 'программист', 2000]; let name = arr[0]; let surname = arr[1]; let info = arr.slice(2); // все элементы со второго до конца массива

Переделайте этот код через деструктуризацию согласно изученной теории.

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

Для переменных можно указывать значения по умолчанию. В этом случае, если переменной не хватит элемента массива - возьмется значение по умолчанию.

В следующем примере переменной day по умолчанию указано значение 1:

let arr = [2025, 12]; let [year, month, day = 1] = arr; console.log(year); // выведет 2025 console.log(month); // выведет 12 console.log(day); // выведет 1

А вот если для переменной day будет значение в массиве - значение по умолчанию будет проигнорировано:

let arr = [2025, 12, 31]; let [year, month, day = 1] = arr; console.log(year); // выведет 2025 console.log(month); // выведет 12 console.log(day); // выведет 31

В следующем коде части массива записываются в соответствующие переменные:

let arr = ['Иван', 'Иванов', 'отдел разработки', 'программист']; let name = arr[0]; let surname = arr[1]; let department = arr[2]; let position; if (arr[3] !== undefined) { position = arr[3]; } else { position = 'джуниор'; }

Переделайте этот код через деструктуризацию согласно изученной теории.

Функции в качестве значения по умолчанию

В качестве значения по умолчанию можно также указывать функцию.

Пусть, к примеру, у нас есть функция, возвращающая текущий день недели:

function func() { return (new Date).getDate(); }

Давайте укажем эту функцию в качестве значения переменной day:

let [year, month, day = func()] = arr;

Модифицируйте полученный выше код так, чтобы при отсутствии в массиве значения для месяца по умолчанию брался текущий месяц, а при отсутствии значения для года - соответственно текущий год.

Объявление переменных

Не обязательно объявлять переменные при деструктуризации. Они могут быть объявлены заранее и тогда при присваивании не нужно будет писать команду let:

let arr = [2025, 12, 31]; let year; let month; let day; [year, month, day] = arr;

Есть, однако, нюансы. Посмотрите на следующий код:

let arr = [2025, 12, 31]; let year; let [year, month, day] = arr;

Как вы видите, переменная year была объявлена заранее, но переменные month и day - нет. Поэтому автор кода решил написать let перед деструктуризирующим присваиванием.

Это, однако, приведет к ошибке, так как нельзя одну и туже переменную объявлять 2 раза через let (получится, что year объявлена два раза).

Через var, однако, переменные можно объявлять сколько угодно раз, поэтому следующий код не приведет к ошибке:

let arr = [2025, 12, 31]; var year; var [year, month, day] = arr;