홈페이지>웹 디자인 튜토리얼>자바스크립트 튜토리얼

JS 루프 학습: 루프 문에서 벗어나 break and continue

저자：Eve Cole 업데이트 시간：2022-08-08 08:55:04
이전 기사에서는 JS의 여러 루프 제어 구조(while 및 do-while 루프, for 루프)에 대해 알아보았습니다. 루프에서 벗어나는 데 도움이 되기를 바랍니다. 모든 사람!

이전 루프 연구에서 우리는 기본적으로 표현식 결과가 false일 때 루프가 자동으로 종료되고, 그렇지 않으면 루프가 계속된다는 것을 알고 있습니다. 어떤 경우에는 루프가 자동으로 종료될 때까지 기다릴 필요가 없지만 루프를 적극적으로 종료할 수 있습니다. JavaScript는 루프를 종료하고 현재 루프를 종료(건너뛰기)하기 위해 break와 continue라는 두 가지 명령문을 제공합니다.

1. continue 문

continue 문은 이 루프를 건너뛰고 다음 루프를 실행하는 데 사용됩니다. continue 문을 만나면 프로그램은 즉시 조건식을 다시 테스트합니다. 표현식 결과가 true이면 다음 루프가 시작됩니다. 표현식 결과가 false이면 루프가 종료됩니다.

[예제 1] continue 문을 사용하여 for 루프에서 빠져나옵니다:

<script type="text/javascript">
for (var i = 1; i < 10; i++) {
    if(i % 2 != 0) {
       계속하다;
    }
    console.log(i);
}
</script>

분석:

  • for (var i = 0; i < 10; i++){} 문은 반복하여 1과 10 사이의 모든 숫자를 얻을 수 있습니다.

  • if(i % 2 != 0) 문은 다음을 결정하는 데 사용됩니다. i의 값을 2로 나눌 수 있습니까? 그렇지 않은 경우 () 의 값은 true이고 continue; 문이 실행됩니다.

  • 루프 본문에서 if(i % 2 == 0) 문을 사용하여 i 값을 2로 균등하게 나눌 수 있으면 " console.log(i); "를 사용하여 값을 출력합니다. i 는 2로 균등하게 나눌 수 없으며 continue; 실행하고 이 루프에서 빠져나와(출력 없음) 다음 루프를 실행합니다.

출력 결과:

1.png

2. Break 문

break 문은 현재 구문 구조에서 빠져나오는 데 사용됩니다. 이는 루프 본문의 코드를 종료하고 현재 루프에서 즉시 빠져나오며 루프(있는 경우) 이후의 코드를 실행할 수 있습니다.

break와 continue의 차이점은 continue 문은 현재 루프만 종료하는 반면, break 문은 전체 루프의 실행을 종료한다는 것입니다.

위의 예제 1의 코드를 계속 사용하고 continue; break; 로 바꾸면 무엇이 출력되나요?

<스크립트 유형="텍스트/자바스크립트">
for (var i = 1; i < 10; i++) {
    if(i % 2 != 0) {
       부서지다;
    }
    console.log(i);
}
</script>

대답은 다음과 같습니다: 아무것도 출력하지 않습니다 . 왜 이런 일이 발생합니까? 분석해 보겠습니다.

forx 루프의 시작 부분에서 i=1 은 1이 10보다 작습니까? 물론 루프 본문의 if(i % 2 != 0) 문이 실행되기 시작

하면 1을 2로 나눌 수 있습니까? 분명히 그럴 수 없으므로 () 의 값이 true이면 if의 " break; " 문이 실행되어 전체 루프에서 직접 점프하고 " console.log(i); 를 실행할 기회가 없습니다. " 성명.

3. 중첩된 For 루프

break 과 continue 모두 현재 루프에만 유효하다는 점은 주목할 가치가 있습니다. 중첩 루프가 있으면 조심해야 합니다. 다음 예를 살펴보겠습니다.

for (let i = 0; i < 5; i++) {
    if (i % 2 == 0) 계속;
    for (j = 0; j < 5; j++) {
        if (j == 2) 중단;
        console.log(`i = ${i}, j = ${j}`);
    }
}

여기에는 각각 5번(0~4) 실행되는 두 개의 루프가 있습니다. i가 짝수이면 외부 루프는 현재 루프를 건너뛰고 다음 루프를 실행합니다. 즉, i가 1 또는 3일 때만 내부 루프가 실행됩니다.

내부 루프는 j 값이 2인 동안 종료됩니다. 따라서 j에는 0과 1만 있습니다.

최종 결과는 다음과 같습니다.

4.png

4. JavaScript 태그

JavaScript 1.2부터는 태그를 break와 함께 사용하여 프로그램 실행을 보다 정확하게 제어할 수 있습니다.

JavaScript의 태그는 HTML의 태그와 다릅니다. JavaScript의 태그는 식별자(변수 이름과 유사) 뒤에 콜론이 오는 것입니다. JavaScript 태그는 명령문이나 코드 블록 앞에 선언할 수 있으며 특정 루프에서 벗어나기 위해 break 또는 continue와 함께 사용할 수 있습니다. 예를 들어 여러 루프가 중첩된 경우 단순히 break를 사용하면 현재 루프에서 빠져나올 수만 있습니다. 외부 루프가 아닙니다. 레이블과 함께 break를 사용하면 여러 수준의 루프에서 한 번에 벗어날 수 있습니다.

샘플 코드는 다음과 같습니다:

<script type="text/javascript">
document.write("반복 시작!<br /> ");
외부 루프: //(var i = 0; i < 5; i++)에 대한 레이블 정의 {
   document.write("외부 루프: " + i + "<br />");
   innerloop: // 라벨 정의 for (var j = 0; j < 5; j++) {
      if (j > 3) break; // 내부 루프에서 빠져나옴 if (i == 2) break innerloop; // 내부 메시지에서 빠져나옴 if (i == 4) break externalloop; 외부 루프 document.write( "내부 루프: " + j + " <br />");
   }
}      
document.write("루프 끝!<br /> ");
</script>

2.png

참고: break 또는 continue와 레이블 사이에는 개행 문자를 사용할 수 없습니다. 또한 레이블 이름과 관련 루프 사이에 다른 코드가 나타날 수 없습니다.

[추천 학습: JavaScript 고급 튜토리얼]

위는 JS 루프 학습의 세부 내용입니다. 루프에서 벗어나기 위한 break 및 continue 문에 대한 자세한 내용은 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
관련 기사