빈 배열 항목에 대해 .forEach()를 사용할 수 없는 이유는 무엇입니까?

일부 코드를 특정 횟수만큼 실행해야 하고 for 루프를 사용하지 말아야 할 이유가 있었던 때를 생각해 보십시오. 특정 수의 항목으로 새로운 배열을 만든 다음 그 위에 시도.forEach()했을 수 있습니다.

const freshArray = new Array(5);

freshArray.forEach(item => {
    console.log(item);
});

이러한 접근 방식을 취했다면 undefined에 대한 5개의 개별 로그가 표시될 것으로 예상했을 수도 있습니다. 그러나 대신 배열에 시작할 항목이 없는 것처럼 아무 일도 일어나지 않았습니다.

기술적으로 그렇지 않기 때문입니다. 숫자가 Array 생성자에 전달될 때 실제로 정의된 항목은 없으며 심지어 undefined 항목도 정의되지 않습니다. 대신 only the length property is set 나중에 채워질 수도 있고 채워지지 않을 수도 있는 많은 좌석을 효과적으로 예약합니다. sparse을 생성했습니다. array. 어레이 자체를 로깅하여 확인할 수 있습니다.

const freshArray = new Array(5);

console.log(freshArray);

// [<5 empty items>]

Array 프로토타입( .map() , .forEach() 등)의 메서드가 이러한 배열을 만나면 skip over any uninitialized or deleted items 으로 설계됩니다. 해당 항목의 위치는 중요하지 않습니다. 예를 들어 쉼표를 삽입하여 "빈"항목을 지정할 수 있습니다.

const freshArray = [1, 2, , , 5];

console.log("Length:", freshArray.length);

freshArray.forEach(item => {
  console.log(item);
});

// Length: 5
// 1
// 2
// 5

인덱스를 통해 직접 설정하는 경우에도 다음과 같습니다.

const freshArray = [];

freshArray[3] = "fourth item!";

console.log("Length:", freshArray.length);

freshArray.forEach((item, index) => {
  console.log(item, index);
});

// Length: 4
// "fourth item!" 3

.forEach() 또는 .map()와 같은 메서드를 희소 배열과 함께 사용하는 데 어려움을 겪고 있다면 .fill() ~ populate each empty item과 같은 것을 먼저 (심지어 undefined ) 사용하여 도달할 수 있습니다.

Iterator는 다르지만

즉, 빈 항목도 Symbol.iterator 프로토타입에 정의된 Array 메서드를 사용하여 액세스할 수 있습니다. for 루프를 사용할 때마다 암시적으로 액세스됩니다.

const freshArray = new Array(5);

for (const item of freshArray) {
  console.log(item);
}

// undefined
// undefined
// undefined
// undefined
// undefined

확산 연산자를 사용할 때도 내부적으로 작동합니다. 즉, 희소 배열을 확산하고 즉시 .forEach()를 수행할 수 있습니다.

const freshArray = new Array(5);

// .forEach() will work now!
[...freshArray].forEach((item, index) => {
  console.log(item, index);
});

// undefined 0
// undefined 1
// undefined 2
// undefined 3
// undefined 4

원하는 경우 이 반복 동작을 사용하여 빈 항목을 처리할 고유한 변형.forEach을 만들 수 있습니다.

Array.prototype.inclusiveForEach = function(callback) {
  return [...this].forEach(callback);
}

const freshArray = new Array(5);

freshArray.inclusiveForEach((item, index) => {
  console.log(item, index);
});

// undefined 0
// undefined 1
// undefined 2
// undefined 3
// undefined 4

이러한 모든 결정은 귀하에게 달려 있으며 귀하의 상황에 따라 크게 달라집니다. 적어도 이것이 코드가 작동하는 방식에 대한 이유를 밝히는 데 도움이 되고 앞으로 나아가는 데 도움이 되는 몇 가지 고려 사항을 제공하기를 바랍니다.