JavaScript로 배열 만들기: 종합 안내서

JavaScript에서 배열을 생성하는 것은 기본적인 작업이지만 숙련된 개발자라도 간과할 수 있는 몇 가지 미묘한 차이가 있습니다. 기본 사항을 자세히 살펴보고 깨달을 수 있는 배열 생성 및 조작의 몇 가지 흥미로운 측면을 살펴보겠습니다.

기본 배열 생성

배열을 만드는 가장 간단한 방법은 배열 리터럴을 사용하는 것입니다.

let arr = [];

그런 다음 루프를 사용하여 이 배열을 채울 수 있습니다.

for (let i = 0; i < 5; i++) {
  arr.push(i);
}

이렇게 하면 [0, 1, 2, 3, 4] 요소가 포함된 배열이 생성됩니다. 그러나 채우지 않고 빈 배열을 생성하면 항목도 없고 빈 슬롯도 없는 배열이 생성됩니다.

배열 생성자 사용

배열을 만드는 또 다른 방법은 배열 생성자를 사용하는 것입니다.

let arr = Array(5);

단일 숫자 인수가 전달되면 지정된 길이는 있지만 실제 요소는 없는 희소 배열이 생성됩니다.

console.log(arr.length); // 5
console.log(arr); // [empty × 5]

희소 배열

희소 배열에는 "빈 슬롯"이 있어 맵, 필터 또는 forEach와 같은 메서드를 사용할 때 예기치 않은 동작이 발생할 수 있습니다. 이 방법은 빈 슬롯을 건너뜁니다.

let arr = Array(5);
arr = arr.map((x, i) => i); // Still [empty × 5]

이러한 배열을 채우려면 값을 수동으로 설정해야 합니다.

arr[0] = 2;
arr[4] = 3;
console.log(arr); // [2, empty × 3, 3]

희소 배열 처리

희소 배열을 효과적으로 처리하려면 채우기와 같은 메서드를 사용하여 값을 초기화할 수 있습니다.

let arr = Array(5).fill(1);
console.log(arr); // [1, 1, 1, 1, 1]

그러나 객체나 배열로 채울 때는 주의하세요.

let arr = Array(5).fill({});
arr[0].name = 'John';
console.log(arr); // [{name: 'John'}, {name: 'John'}, {name: 'John'}, {name: 'John'}, {name: 'John'}]

각 요소는 동일한 개체를 참조합니다. 이를 방지하려면 다음 지도를 사용하세요.

let arr = Array(5).fill(0).map(() => ({}));
arr[0].name = 'John';
console.log(arr); // [{name: 'John'}, {}, {}, {}, {}]

Array.from 메서드

Array.from은 유사 배열 또는 반복 가능한 객체에서 배열을 생성하는 다양한 방법을 제공합니다.

let arr = Array.from({ length: 5 }, (_, i) => i);
console.log(arr); // [0, 1, 2, 3, 4]

이 방법은 2차원 배열을 생성할 때도 도움이 될 수 있습니다.

let arr2D = Array.from({ length: 5 }, () => Array(5).fill(0));
arr2D[0][0] = 1;
console.log(arr2D); // [[1, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0]]

배열 반복

JavaScript는 배열을 반복하는 여러 가지 방법을 제공하며 각 방법은 희소 배열을 다르게 처리합니다.

• for 루프: 모든 인덱스를 처리하고 빈 슬롯을 정의되지 않은 것으로 처리합니다.
• for...in: 빈 슬롯을 건너뛰고 배열의 인덱스를 반복합니다.
• for...of: 값을 반복하여 빈 슬롯을 정의되지 않은 것으로 처리합니다.

결론

JavaScript의 복잡한 배열 생성 및 조작을 이해하면 일반적인 함정을 피하고 보다 효율적인 코드를 작성하는 데 도움이 될 수 있습니다. 배열 리터럴, 배열 생성자 또는 Array.from 및 채우기와 같은 메서드를 사용하든 이러한 도구의 작동 방식을 알면 프로젝트에서 배열을 효과적으로 처리할 수 있습니다.

이 가이드가 도움이 되었다면 알려주시기 바랍니다. 저는 항상 JavaScript의 기본 사항을 탐구하는 더 많은 콘텐츠를 만들고 싶습니다. 읽어주셔서 감사하고, 즐거운 코딩 되세요!

위 내용은 JavaScript로 배열 만들기: 종합 안내서의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!