forEach 루프를 중단하는 방법(세부정보)

이 글의 내용은 forEach 루프를 중단하는 방법에 관한 것입니다(자세한 소개). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. 당신에게.

for 루프를 사용할 경우 break 또는 return 문을 사용하여 for 루프를 종료할 수 있지만(return이 직접 함수를 종료함) forEach 루프를 사용할 경우 어떻게 빠져나올 수 있나요? 고리?

break 및 return을 사용해 보세요

먼저 return 문을 사용해 보세요----효과 없음

[1,2,3,4,5].forEach(item=>{
    if(item===2){
    return
    }
    console.log(item);
})

#🎜 🎜 #

MDN의 공식 설명

왜 이런 일이 발생하나요? 먼저 공식 문서를 살펴보겠습니다.

MDN 문서에는 forEach 루프를 종료할 수 없다고 명시되어 있습니다.

MDN에서 인용

예외를 발생시키는 것 외에는 forEach() 루프를 중지하거나 중단할 수 있는 방법이 없습니다. 이러한 동작이 필요한 경우 forEach() 메서드는 잘못된 도구입니다. .
참고: 예외를 발생시키는 것 외에는 forEach() 루프를 중단하거나 중단할 수 있는 방법이 없습니다. 이것이 필요한 경우 forEach() 메서드를 사용하는 것은 잘못된 것입니다.
루프를 조기에 종료해야 하는 경우 다음을 사용할 수 있습니다.
Simple loop
for...of loop
Array.prototype.every()
Array. 프로토타입.some()
Array.prototype.find()
Array.prototype.findIndex()

중단 및 반환이 작동하지 않는 이유 탐색#🎜 🎜##🎜🎜 # 먼저 return이 효과가 없고 break가 오류를 보고하는 이유를 살펴보겠습니다. forEach의 구현은 코드로 표현되며 다음 구조로 작성할 수 있습니다.

const arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
  const rs = (function(item) {
    console.log(item);
    if (item > 2) return false;
  })(arr[i])
}

return 문을 사용하는 것은 각 자체 실행 함수와 동일합니다. 반환 값은 rs에 복사되지만 전체 함수에 실제로 영향을 미치지는 않습니다. 오류 보고를 위해 break 문을 사용하는 이유는 JS 인터프리터의 함수 본문에 break 문이 나타날 수 없기 때문입니다.

forEach 루프에서 벗어나는 방법

MDN 공식 권장 방법

// every在碰到return false的时候，中止循环。some在碰到return ture的时候，中止循环。
var a = [1, 2, 3, 4, 5]
a.every(item=>{
    console.log(item); //输出：1,2
    if (item === 2) {
        return false
    } else {
        return true
    }
})
var a = [1, 2, 3, 4, 5]
a.some(item=> {
    console.log(item); //输出：1,2
    if (item === 2) {
        return true
    } else {
        return false
    }
})

# 🎜🎜 #기타 방법

1. 대신 for 루프나 for in 루프를 사용하세요2 예외를 발생시키세요

.

try {
  [1, 2, 3, 4, 5].forEach(function(item) {
    if (item=== 2) throw item;
    console.log(item);
  });
} catch (e) {}

# 🎜🎜#3. 빈 루프를 실행하려면 판단을 사용하세요

var tag;
[1, 2, 3, 4, 5].forEach(function(item){
    if(!tag){
        console.log(item);
        if(item===2){
            tag=true;
        }
    }

이에는 두 가지 문제가 있습니다. 첫 번째 문제는 태그 변수가 전역적으로 추가된다는 것입니다. forEach.Loop를 종료하지만 실제로는 루프 수가 변경되지 않았으며 조건이 충족되지 않으면 콜백이 아무 작업도 수행하지 않습니다. 먼저 새로 추가된 태그 변수를 전역적으로 삭제하는 방법을 해결해 보겠습니다. 실제로 forEach에는 콜백의 실행 컨텍스트를 나타내는 두 번째 매개변수도 있습니다. 이는 콜백의 이에 해당하는 값입니다. 따라서 컨텍스트를 빈 개체로 설정할 수 있습니다. 이 개체에는 당연히 태그 속성이 없으므로 this.tag에 액세스하면 undefine

[1, 2, 3, 4, 5].forEach(function(item){
    if(!this.tag){
        console.log(item);
        if(item===2){
            this.tag=true;
        }
    }
},{})

4를 얻게 됩니다.

설명 :

forEach 실행 세부정보

1 콜백이 처음 실행될 때 순회 범위가 결정되었으므로 그 동안 콘텐츠를 푸시합니다. 실행 프로세스는 순회 횟수에 영향을 미치지 않습니다. 이는 for 루프와 매우 다릅니다. 다음 두 경우 중 하나는 무한 루프를 일으키고 다른 하나는 발생하지 않습니다.

var array=[1, 2, 3, 4, 5]
array.forEach(item=>{
  if (item == 2) {
    array = array.splice(0);
  }
  console.log(item);
})

2. 값이 변경되면 콜백에 전달됩니다. 값은 forEach가 순회하는 순간의 값입니다.

var arr=[1,2,3,4,5]
//会造成死循环的代码
for(var i=0;i<arr.length;i++){
    arr.push(&#39;a&#39;)
}
//不会造成死循环
arr.forEach(item=>arr.push('a'))

3 삭제된 항목은 순회되지 않습니다. 반복하는 동안 이미 방문한 요소가 삭제되면(예: Shift() 사용) 후속 요소는 건너뜁니다.

var arr=[1,2,3,4,5];
arr.forEach((item,index)=>{
    console.log(`time ${index}`)
    arr[index+1]=`${index}a`;
    console.log(item)
})

조건이 충족되면 다음 값이 잘립니다. 다음 루프에서 해당 값을 볼 수 없으면 루프가 종료됩니다. 그러나 이 작업은 원본 데이터를 파괴합니다. 즉, 약간의 트릭을 사용할 수 있습니다. 즉, 0에서 배열을 잘라낸 다음 이를 배열에 다시 할당합니다(즉, array=array.splice(0)).

이 기사는 여기서 끝났습니다. 더 흥미로운 콘텐츠를 보려면 PHP 중국어 웹사이트의

JavaScript 튜토리얼 동영상

칼럼을 주목하세요!

위 내용은 forEach 루프를 중단하는 방법(세부정보)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!