В данном уроке мы с вами разберем операцию деструктуризации массивов. Данная операция предназначена для массовой записи элементов массива в переменные в одну строчку кода.
Синтаксис этой операции следующий:
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 перед деструктуризирующим
присваиванием.
Это, однако, приведет к ошибке, так как нельзя
одну и туже переменную объявлять два раза
через let (получится, что year
объявлена два раза).
Через var, однако, переменные можно
объявлять сколько угодно раз, поэтому следующий
код не приведет к ошибке:
let arr = [2025, 12, 31];
var year;
var [year, month, day] = arr;