Введение

Если вы сталкивались с вариантом использования многократного повторения nв JavaScript, скорее всего, вы пытались реализовать решение, описанное ниже (особенно в реакции, когда вам нужно отобразить элемент JSX n раз).

Array(5).map(() => console.log("hello"))

Разреженные массивы

Когда массивы JavaScript создаются без каких-либо элементов, а только с длиной, элементы по всем индексам заполняются empty items.

Эти элементы не повторяются с некоторыми методами итерации массива, такими как forEach, map, и т. д filter. Эти элементы будут пропускать пустые элементы и просто выполнять итерацию по другим непустым элементам, если таковые имеются.

Например,

const arr = Array(5);

console.log(arr); // [ <5 empty items> ]

arr[1] = 1;
arr[3] = 3;
arr[5] = 5;

console.log(arr); // [ <1 empty item>, 1, <1 empty item>, 3, <1 empty item>, 5 ]

arr.forEach((ele) => console.log(ele)); // 1, 3, 5

const arr = [1, 2, 3];

arr.length = 5;

console.log(arr); // [ 1, 2, 3, <2 empty items> ]

arr[7] = 8;

console.log(arr); // [ 1, 2, 3, <4 empty items>, 8 ]

arr.forEach((ele) => console.log(ele)); // 1, 2, 3, 8

delete arr[1];

console.log(arr); // [ 1, <1 empty item>, 3, <4 empty items>, 8 ]

const newArr = [1, , 2, , 3];

console.log(newArr); // [ 1, <1 empty item>, 2, <1 empty item>, 3 ]

Пустые элементы обрабатываются как undefinedв некоторых операциях, таких как for...ofцикл, доступ через индекс и ...оператор распространения.

const arr = [1, , 2, , 3];

for (const ele of arr) { // 1, undefined, 2, undefined, 3, undefined
  console.log(ele);
}

console.log(...arr); // 1, undefined, 2, undefined, 3, undefined

console.log(arr[0]); // 1
console.log(arr[1]); // undefined

[...Array(3)].map((e) => console.log(e)); // undefined, undefined, undefined

Array.from({ length: 3 }).map((e) => console.log(e)); // undefined, undefined, undefined

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

Это все люди! Спасибо за чтение.

Больше контента на PlainEnglish.io . Подпишитесь на нашу бесплатную еженедельную рассылку . Следите за нами в Twitter , LinkedIn , YouTube и Discord . Заинтересованы в хакинге роста? Проверьте Цепь .