ES6: деструктуризация массива

В настоящее время, когда мы хотим получить доступ к свойствам массива, деструктуризация необходима для нас. Деструктуризация назначений - отличная функция, появившаяся вместе с ES6. Хорошая новость заключается в том, что деструктуризация массива очень похожа и прямолинейна, чем деструктуризация объекта. При деструктуризации массива он работает как индекс слева направо.

Базовое деструктурирование:

const numbers = [1,2,3];
const [one, two, three] = numbers;
console.log(one); // 1
console.log(two); // 2
console.log(three); // 3

В этом примере у нас есть массив чисел и три локальные переменные для деструктуризации массива чисел. Каждая переменная сопоставлена с соответствующим индексом (слева направо) основного массива.

Мы также можем объявлять переменные перед назначением

let one, two, three
const numbers = [1,2,3];
[one, two, three] = numbers;
console.log(one); //1
console.log(two); //2

или мы можем объявить их встроенными,

const [one, two, three] = [1,2,3]
console.log(one); //1
console.log(two); //2

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

Когда у нас есть три локальные переменные для деструктуризации, но в массиве есть только два элемента, это даст нам undefined

const numbers = [1,2];
const [one, two, three] = numbers;
console.log(one); // 1
console.log(two); // 2
console.log(three); //undefined

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

const numbers = [1,2];
const [one = 11, two = 22, three = 33] = numbers;
console.log(one); // 1
console.log(two); // 2
console.log(three); //33

Разрушение вложенного массива:

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

const numbers = [1,2,3,[11,22,33]];
const [one,two,three,[eleven, twelve, thirteen ]] = numbers
console.log(one) //1
console.log(eleven) //11

Пропуск пунктов:

Когда мы работаем с большим объемом данных, иногда нам приходится пропускать некоторые элементы. Можно пропустить некоторые элементы, которые мы не хотим назначать локальным переменным, и назначить только те, которые нам интересны. И мы можем пропустить элементы, используя запятую. Одна запятая пропускает один элемент.

const numbers = [1,2,3];
const [,,three] = numbers;
console.log(three); //3

Остальные предметы:

Иногда нам может потребоваться присвоить некоторые элементы одной переменной, и мы можем сделать это с помощью spread operator

const numbers = [1,2,3,4,5,6,7,8,9];
const [one,two,three,...others] = numbers;
console.log(one);  //1
console.log(others); //[4, 5, 6, 7, 8, 9]

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

Деструктуризация с функцией:

Мы также можем использовать выражение деструктуризации для возвращаемого значения функции.

function getNumberArray() {
  return [1,2,3,4,5,6,7,8,9]
} 
const [one,two,three,...others] = getNumberArray()
console.log(one);  //1
console.log(others); //[4, 5, 6, 7, 8, 9]

Массив объектов:

const someArray = [
  { data: 1 },
  { data: 2 },
  { data: 3 }
];

const [
  { data: array0 },
  { data: array1 },
  { data: array2 }
] = someArray

console.log(array0, array1, array2); // 1, 2, 3

Происходит то, что мы сначала извлекаем каждый объект из someArray, а затем деструктурируем каждый объект, извлекая свойство data и переименовывая его.

Мы также можем использовать сопоставление для более читаемого кода.

const someArray = [
  { data: 1 },
  { data: 2 },
  { data: 3 }
];

const [array0, array1, array2] = someArray.map(item => item.data)
console.log(array0, array1, array2); //1,2,3

Обмен переменными:

В одном деструктурирующем выражении можно поменять местами два значения переменных.

let one = 1;
let two = 2;
[one,two] = [two,one];
console.log(one);//2
console.log(two);//1

Ссылки: