JS에서 반복 반복 수조의 네 가지 방식 총결

본고는 여러 그룹을 훑어보는 네 가지 방식을 비교하고 정리한다.
for 순환:

for (let index=0; index < someArray.length; index++) {
 const elem = someArray[index];
 // ・・・
}

for-in 순환:

for (const key in someArray) {
 console.log(key);
}

수조 방법.forEach():

someArray.forEach((elem, index) => {
 console.log(elem, index);
});

for-of 순환:

for (const elem of someArray) {
 console.log(elem);
}

for-of는 통상적으로 최선의 선택이다.우리는 원인을 알 것이다.

for 순환 [ES1]

JavaScript의 for 순환은 매우 오래되었고 ECMAScript 1에 이미 존재합니다.for arr 각 요소의 인덱스 및 값을 주기적으로 기록합니다.

const arr = ['a', 'b', 'c'];
arr.prop = 'property value';

for (let index=0; index < arr.length; index++) {
 const elem = arr[index];
 console.log(index, elem);
}

// Output:
// 0, 'a'
// 1, 'b'
// 2, 'c'

for 순환의 장단점은 무엇입니까?

그것은 용도가 광범위하지만, 우리가 수조를 두루 돌아다닐 때도 매우 번거롭다

만약에 우리가 첫 번째 수조 원소부터 순환하고 싶지 않을 때 그것은 여전히 유용하다. 다른 순환 메커니즘으로는 이 점을 하기 어렵다.

for-in 순환 [ES1]

for-in 순환은 for 순환과 마찬가지로 오래되었고 ECMAScript 1에도 존재합니다.다음 코드는 for-in으로 arr의 키를 순환해서 출력합니다.

const arr = ['a', 'b', 'c'];
arr.prop = 'property value';

for (const key in arr) {
 console.log(key);
}

// Output:
// '0'
// '1'
// '2'
// 'prop'

for-in은 여러 그룹을 순환하는 좋은 방법이 아닙니다.

값이 아닌 속성 키에 접근합니다.

속성 키로서 그룹 요소의 인덱스는 문자열이지 숫자가 아니다..

이것은 Array 요소뿐만 아니라 모든 열거할 수 있는 속성 키 (자신의 것과 계승된) 에 접근한다.

for-in 액세스 상속 속성의 실제 용도는 대상의 모든 매개 가능한 속성을 훑어보는 것입니다.

수조 방법.forEach()[ES5]

for와 for-in 모두 수조 순환에 특별히 적합하지 않기 때문에 ECMAScript 5에 보조 방법을 도입했습니다: Array.prototype.forEach():

const arr = ['a', 'b', 'c'];
arr.prop = 'property value';

arr.forEach((elem, index) => {
 console.log(elem, index);
});

// Output:
// 'a', 0
// 'b', 1
// 'c', 2

이런 방법은 확실히 편리하다. 이것은 우리가 대량의 조작을 하지 않아도 그룹 요소와 색인에 접근할 수 있게 한다.화살표 함수 (ES6에 도입) 를 사용하면 구문에서 더욱 우아해집니다.
.forEach()의 주요 단점은 다음과 같습니다.

그 순환체에서await를 사용할 수 없습니다..

조기 퇴출 불가.forEach () 순환.for 순환에서break를 사용할 수 있습니다.

중지forEach()의 해결 방법

중지하려면forEach () 와 같은 순환에는 다음과 같은 해결 방법이 있습니다.some () 은 모든 그룹 요소를 순환하고 실제 값으로 되돌릴 때 멈춥니다.

const arr = ['red', 'green', 'blue'];
arr.some((elem, index) => {
 if (index >= 2) {
 return true; //  
 }
 console.log(elem);
 //  `undefined`， 
 // 。  ， 。
});

// Output:
// 'red'
// 'green'

이것은 옳다고 말할 수 있다.some ()의 남용은 for-of와break에 비해 이 코드를 이해하기가 쉽지 않다.

for-of 순환 [ES6]

for-of 순환은 ECMAScript 6에서 지원됩니다.

const arr = ['a', 'b', 'c'];
arr.prop = 'property value';

for (const elem of arr) {
 console.log(elem);
}
// Output:
// 'a'
// 'b'
// 'c'

for-of는 수조를 순환할 때 매우 유효합니다.
그룹 요소를 훑어보는 데 사용됩니다.
await를 사용할 수 있습니다.

필요하면 for-await-of로 쉽게 옮길 수 있습니다.

브레이크와continue를 외부 작용역에 사용할 수도 있습니다.

for-of 및 교체 가능 대상

for-of는 그룹뿐만 아니라 반복 가능한 대상, 예를 들어 맵을 반복할 수 있습니다.

const myMap = new Map()
 .set(false, 'no')
 .set(true, 'yes')
;
for (const [key, value] of myMap) {
 console.log(key, value);
}

// Output:
// false, 'no'
// true, 'yes'

myMap을 훑어보면 [키, 값] 쌍이 생성됩니다. 이를 해부하여 모든 데이터에 직접 접근할 수 있습니다.

for-of 및 배열 인덱스

수조 방법.entries () 는 교체할 수 있는 [index,value] 쌍을 되돌려줍니다.for-of를 사용하고 이 방법을 사용하면 그룹 인덱스에 쉽게 접근할 수 있습니다.

const arr = ['chocolate', 'vanilla', 'strawberry'];

for (const [index, elem] of arr.entries()) {
 console.log(index, elem);
}
// Output:
// 0, 'chocolate'
// 1, 'vanilla'
// 2, 'strawberry'

총결산

for-of 순환의 가용성은 for,for-in과.forEach()가 더 좋습니다.
통상적으로 네 가지 순환 메커니즘 간의 성능 차이는 중요하지 않을 것이다.연산량이 많은 일을 하려면 WebAssembly로 전환하는 것이 좋습니다.
JS에서 수조를 순환하는 네 가지 방식에 대해 정리한 이 글은 여기까지 소개합니다. 더 많은 JS 순환 수조에 대한 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!