JavaScript에서 배열을 반복하는 4가지 방법 비교

JavaScript 배열의 기본 사항을 이미 알고 있다면 이제 고급 주제를 통해 기술을 한 단계 더 발전시킬 때입니다. 이 튜토리얼 시리즈에서는 JavaScript 배열을 사용한 프로그래밍에 대한 중급 주제를 살펴보겠습니다.

배열과 관련된 거의 모든 프로젝트에서는 배열을 반복하거나 반복하는 등의 작업을 수행해야 합니다. 배열 데이터를 출력으로 표시하거나 변환하는 등 배열을 반복해야 하는 데는 여러 가지 이유가 있습니다.

다양한 방법을 사용하여 JavaScript에서 배열을 반복할 수 있습니다. 이 튜토리얼에서는 각 항목의 장단점을 자세히 논의하면서 모든 항목을 살펴보겠습니다.

방법			장점	단점
for 루프			break를 사용하여 조기 종료할 수 있으며, 비동기 코드, 범용 브라우저 지원에 적합합니다	길고 오류가 발생하기 쉬움
forEach()방법			간결하고 읽기 쉽습니다	비동기 지원 없음, 조기 종료 없음 break
for...of루프			다른 반복 가능 유형과 함께 사용하면 조기 종료가 가능하고 구문 오류가 줄어듭니다	오래된 브라우저는 지원이 적습니다
for...in루프			희소 배열에 효율적이므로 조기 종료 가능	예상치 못한 상속 요소 반환 가능성

방법	인터럽트 및 재개를 통한 흐름 제어?	비동기 코드를 사용할 수 있나요?	브라우저 지원	메모
for 루프	예	예	모든 브라우저	더 자세한 구문, 일대일 오류
forEach()방법	아니요	아니요	최신 브라우저	간결하게 작성하고 다른 기능 뒤에 연결하세요(예: map)
for...of루프	예	예	최신 브라우저	간단한 구문으로 오류가 줄어듭니다
for...in루프	예	예	모든 브라우저	희소 배열에 유효하며 예기치 않은(상속된) 요소를 반환할 수 있습니다

배열 요소 액세스의 기본

인덱스를 사용하여 배열 요소에 액세스하는 기본 사항부터 시작해 보겠습니다. JavaScript의 배열 인덱싱은 0부터 시작됩니다. 이는 코드에서 array_name[0] 来访问第一个元素。同样，对于包含 n 元素的数组，可以使用 array_name[n - 1]를 사용하여 마지막 요소에 액세스할 수 있음을 의미합니다.

으아아아

for 루프

를 사용하여 반복

배열을 반복하는 가장 일반적인 방법 중 하나는 for 循环。 for 循环将迭代变量初始化为 0，以从第一个元素开始循环。由于我们想要迭代整个数组，因此需要计算数组的长度，这可以使用 length 属性轻松完成。然后可以使用 array_name[length - 1] 반복입니다.

루프는 반복 변수를 0으로 초기화하여 첫 번째 요소부터 루프를 시작합니다. 전체 배열을 반복하고 싶기 때문에 배열의 길이를 계산해야 하며, 이는 length 속성을 ​​사용하여 쉽게 수행할 수 있습니다. 그런 다음 array_name[length - 1]을 사용하여 배열의 마지막 요소에 액세스할 수 있습니다.

for다음 코드 조각은

루프 순서를 사용하여 배열을 반복하는 방법을 보여줍니다.

으아아아 ) 而不是小于或等于运算符 (<code>작음 연산자(

)를 루프 종료 조건으로 사용하는 방법에 유의하세요.

for 循环有两个优点：它得到广泛支持，并且允许您通过 break 和 continue 语句控制循环流程。一旦找到所需内容，您就可以退出循环。当您处理异步代码时，for배열을 반복할 때

사용 루프에는 두 가지 장점이 있습니다. 널리 지원되며 break 및 continue 문을 통해 루프의 흐름을 제어할 수 있다는 것입니다. 원하는 것을 찾으면 루프를 종료할 수 있습니다.

루프는 비동기 코드를 다룰 때도 잘 작동합니다.

단점은 내용이 좀 길고 가끔씩 사소한 실수를 할 수도 있다는 점입니다. forEach()

방법을 사용하여 반복forEach()

내장된

메소드를 사용하여 JavaScript의 배열을 반복할 수도 있습니다. 이 메소드는 각 배열 요소에 대해 한 번 실행되는 콜백 함수를 인수로 받아들입니다. 콜백 함수는 다른 곳에서 정의할 수 있으며 인라인 함수 또는 화살표 함수일 수 있습니다.

콜백 함수는 세 가지 매개변수를 사용할 수 있습니다.
2. 현재 요소 자체
3. 현재 요소의 인덱스forEach()

메서드

를 호출하는 배열 forEach() 으아아아

보시다시피

메소드를 사용하면 코드가 더 깔끔해집니다. 콜백 함수의 두 번째 매개변수를 사용하는 또 다른 예는 다음과 같습니다. forEach() 非常适合对数组进行简单迭代。但是，不能使用 break 和 continue 中途退出循环并更改程序流程。使用 forEach() 으아아아

사용은 배열에 대한 간단한 반복에 적합합니다. 그러나 break 및 continue를 사용하여 루프를 종료하고 프로그램 흐름을 변경할 수는 없습니다. for...of 사용의 또 다른 단점은 이 방법으로 비동기 코드를 사용할 수 없다는 것입니다.

for...of 循环来迭代实现 @@iterator 方法的任何对象中的值。内置类型（例如 Array、String、Set 或 Map）可以使用 for...of 루프

를 사용하여 반복

ES6 표준은 JavaScript에 많은 새로운 기능을 추가합니다. 그 중 하나는 반복자와 반복 가능한 객체의 개념입니다. for...of 构造进行迭代有很多优点。例如，您也可以使用它来迭代其他内置可迭代类型。除此之外，它允许您使用 break 或 continue 루프를 사용하여 @@iterator 메서드를 구현하는 모든 개체의 값을 반복할 수 있습니다. 내장 유형(예: Array, String, Set 또는 Map)은

루프를 사용하여 해당 값을 반복할 수 있습니다.

으아아아

반복을 위해

구문을 사용하면 많은 이점이 있습니다. 예를 들어, 이를 사용하여 다른 내장 반복 가능 유형을 반복할 수도 있습니다. 무엇보다도 break 또는 continue 문을 사용하여 루프를 중단하고 프로그램 흐름을 제어할 수 있습니다. for...in

유일한 잠재적인 단점은 브라우저 지원이 약간 적다는 점이지만 이는 모두 대상 고객에 따라 다릅니다.

for...in

루프

를 사용하여 반복 for...in

문을 사용하여 배열을 반복할 수도 있습니다. 이는 객체의 열거 가능한 모든 문자열 속성을 반복합니다. 여기에는 상속된 열거 가능 속성도 포함됩니다.

for...in여기서 루프를 반복하기 위해

문을 사용하는 것은 권장되지 않는다는 점을 언급하고 싶습니다. 앞서 언급했듯이 이 명령문은 상속된 경우에도 모든 정수 및 정수가 아닌 속성에 대해 반복되기 때문입니다. 배열을 반복할 때 일반적으로 정수 키에만 관심이 있습니다.

for...in 循环比其他方法更好地遍历的数组类型。例如， for...of 循环将迭代稀疏数组中的所有空槽，而 for...in

루프의 순회 순서는 잘 정의되어 있으며 음수가 아닌 정수 키의 순회로 시작됩니다. 음수가 아닌 정수 키는 값의 오름차순으로 탐색됩니다. 그런 다음 생성된 순서대로 다른 문자열 키를 반복합니다.

for...in희소 배열은 다른 방법보다

루프를 사용하여 더 잘 탐색할 수 있는 배열 유형입니다. 예를 들어

루프는 희소 배열의 모든 빈 슬롯을 반복하지만 Object.hasOwn() 루프는 그렇지 않습니다.

다음은

루프를 사용하여 희소 배열을 반복하는 예입니다.

으아아아 for 循环来迭代数组。它允许您借助 break 和 Continue쿼리 개체의 지정된 속성이 실제로 자체 속성인지 확인하기 위해

라는 정적 메서드를 사용한다는 사실을 눈치채셨을 것입니다. 🎜 🎜최종 생각🎜 🎜항상 일반 🎜 루프를 사용하여 배열을 반복할 수 있습니다. break 및 Continue 키워드를 사용하여 프로그램 흐름을 제어할 수 있으며 비동기 코드도 지원합니다. 반면에 한 가지 실수에 주의해야 합니다. 🎜

forEach() 方法提供了一种更短的循环数组的方法，但它不适用于异步代码。您也无法使用 break 和 continue 루프를 벗어나거나 프로그램 흐름을 제어하세요.

for...of 루핑은 두 세계의 장점을 모두 제공합니다. 우리는 프로그램 흐름을 완전히 제어할 수 있으며 비동기 코드에서도 작동합니다. 비트를 놓치는 것에 대해 걱정할 필요가 없습니다.

마지막으로, for...in 루프는 배열을 반복하는 데 권장되는 방법이 아닙니다. 그러나 반복하는 배열이 매우 희박한 경우 유용할 수 있습니다.

이 기사의 썸네일은 OpenAI의 DALL-E 2를 사용하여 생성되었습니다.

위 내용은 JavaScript에서 배열을 반복하는 4가지 방법 비교의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!