'구멍'의 진실: JavaScript의 희소 배열과 예상치 못한 동작 이해하기

저는 최근 데이터 구조와 알고리즘 기술, 특히 정렬 알고리즘을 복습하고 있었습니다. 저는 흥미로운 상황에 처해 있었습니다.

정렬 알고리즘을 테스트하기 위해 길이 n 값의 임의 배열을 어떻게 생성합니까? 당신은 그것이 쉽다고 말할 수도 있고, 실제로 그렇습니다. 당신은 아마도 다음과 같은 생각을 했을 것입니다.

function randomArray(n) {
    const arrToReturn = [];

    for (let i = 0; i < n; i++) {
        arrToReturn.push(Math.floor(Math.random() * 10));
    }
    return arrToReturn;
}

확실히 의도한 대로 작동합니다. 하지만 저는 훨씬 더 간단한 것을 찾고 있었습니다. 바람직하게는 단일 라이너입니다. 글쎄요, 가장 먼저 떠오른 생각은 new Array()를 사용하는 것이었습니다.

const randomArray = (n) => new Array(n).map(() => Math.floor(Math.random() * 10));

console.log(randomArray(5))

이것이 무엇을 기록할 것으로 예상하시나요?

음, 저는 이것이 임의의 5개 값 배열을 기록할 것으로 예상했습니다. 그렇지 않으셨다면, 건배하세요! 제가 무슨 얘기를 하려는지 아시겠죠 :)

놀랍게도 그렇지 않습니다. Node 20에 다음을 기록합니다.
[ <빈 항목 5개> ]

흠... 수수께끼네요!

흥미롭게도 console.log(randomArray(5).length)는 5를 기록합니다.

그럼 왜 이런 일이 발생하는 걸까요? 이제 Javascript의 희소 배열에 대해 이야기해 보겠습니다!

희소 배열

희소 배열은 하나 이상의 빈 슬롯을 포함하는 배열입니다. 예를 들면 다음과 같습니다.

new Array(2)
// [<2 empty items>]

[1, , , 3]
// [1, <2 empty items>, 3]

그럼 어떻게 작동하나요?

새 Array(5)를 사용하여 JS에서 배열을 생성하면 초기화되지 않은 5개의 슬롯이 있는 배열이 생성됩니다. 이는 아무것도 포함하지 않음을 의미합니다. null도 아니고 정의되지도 않습니다.

알겠습니다! 하지만 해당 "슬롯"에서는 .map을 호출할 수 없나요?

희소 배열에서 forEach, map, Reduce, Filter 등과 같은 반복 메서드를 호출하면 이러한 빈 슬롯은 건너뜁니다.

randomArray 함수를 다시 살펴보겠습니다.

const randomArray = (n) => new Array(n).map(() => Math.floor(Math.random() * 10));

희소 배열[<5개의 빈 항목>]을 반환하는 new Array(n)을 사용하여 길이 n의 배열을 만듭니다. 그런 다음 해당 배열에 대해 map을 호출합니다. 모든 슬롯이 비어 있으므로 모두 건너뛰었습니다. 그리하여 얻은 결과!

그러면 희소 배열에서 .length를 호출하면 왜 값이 반환되나요?

이는 JS에서 .length 배열 메소드가 구현되는 방식 때문입니다. 길이 값을 얻으려면 가장 큰 인덱스를 선택하고 1만 더하면 됩니다. 희소 배열은 인덱스가 지정되므로 예상대로 길이 값을 얻게 됩니다. 자세한 내용은 여기에서 확인하세요.

위의 버그 있는 RandomArray 함수를 수정해 보겠습니다.

희소 배열에는 비어 있거나 초기화되지 않은 슬롯이 포함되어 있어 반복이 불가능하므로 이러한 슬롯을 일부 값으로 채워 이 문제를 해결할 수 있습니다. .fill 배열 메소드를 사용하면 이를 달성할 수 있습니다:

const randomArray = (n) => new Array(n).fill().map(() => Math.floor(Math.random() * 10));

console.log(randomArray(5))

이제 출발합니다!

위 내용은 '구멍'의 진실: JavaScript의 희소 배열과 예상치 못한 동작 이해하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!