For, While 및 Do While LOOP in Java스크립트 예시 포함
제임스 하트만
⚡ 스마트 요약
for, while 및 do while 루프 Java스크립트는 코드 중복 없이 특정 구문 블록을 반복 실행합니다. 이 문서에서는 각 구문을 설명하고, 예상 출력과 함께 실행 가능한 예제를 보여주며, for-in 및 for-of 구문을 추가하고, break, continue 및 무한 루프 방지 방법을 다룹니다.
루프란 무엇인가요? Java스크립트?
루프는 특정 횟수 동안 또는 특정 조건이 true인 동안 동일한 코드 줄을 반복적으로 실행해야 할 때 유용합니다. 웹페이지에 '안녕하세요' 메시지를 100번 입력한다고 가정해 보겠습니다. 물론 같은 줄을 100번 복사해서 붙여넣어야 합니다. 대신 루프를 사용하면 단 3~4줄만으로 이 작업을 완료할 수 있습니다.
구문 형태와 관계없이 모든 반복문은 시작 값, 다음 반복 실행 여부를 결정하는 조건, 그리고 반복문을 종료 지점으로 이동시키는 업데이트라는 세 가지 요소로 구성됩니다. 아래 다이어그램은 이러한 반복 과정을 보여줍니다.
루프의 다양한 유형 Java스크립트
루프에는 주로 네 가지 유형이 있습니다. JavaScript.
- for 루프
- for/in 루프
- while 루프
- do… while 루프
현대 Java이 스크립트는 값을 직접 반복하는 for…of 루프를 추가하여 실제로 다섯 가지 형식을 사용할 수 있도록 합니다. 아래 표는 주어진 상황에서 어떤 형식을 사용해야 하는지 보여줍니다.
| 고리 | 상태 확인됨 | 최소 실행 횟수 | 최고의 용도 |
|---|---|---|---|
| 을 통한 | 각 패스 전에 | 0 | 알려진 반복 횟수 |
| 동안 | 각 패스 전에 | 0 | 조건에 의해 발생하는 알 수 없는 카운트 |
| 하다…하는 동안 | 각 패스 후에 | 1 | 한 번만 실행해야 하는 메뉴 및 프롬프트 |
| ~을 위해 | 각 패스 전에 | 0 | 객체의 키 읽기 |
| …의 | 각 패스 전에 | 0 | 배열이나 문자열의 값을 읽는 방법 |
for 루프
구문 :
for(statement1; statement2; statment3)
{
lines of code to be executed
}
- statement1은 loo가 실행되기 전에도 먼저 실행됩니다.ping 코드입니다. 따라서 이 구문은 일반적으로 반복문 내부에서 사용될 변수에 값을 할당하는 데 사용됩니다.
- 문2는 루프를 실행하기 위한 조건입니다.
- statement3은 화장실에 다녀온 후 매번 실행됩니다.ping 코드가 실행됩니다.
직접 시도해 보세요.
<html>
<head>
<script type="text/javascript">
var students = new Array("John", "Ann", "Aaron", "Edwin", "Elizabeth");
document.write("<b>Using for loops </b><br />");
for (i=0;i<students.length;i++)
{
document.write(students[i] + "<br />");
}
</script>
</head>
<body>
</body>
</html>
출력:
Using for loops John Ann Aaron Edwin Elizabeth
카운터는 0부터 시작합니다. 왜냐하면 첫 번째 인덱스는 정렬 값이 0이고, 조건식에서 students.length를 사용하므로 이름이 추가되거나 삭제될 때 루프가 자동으로 조정됩니다.
while 루프
구문 :
while(condition)
{
lines of code to be executed
}
"while 루프"는 지정된 조건이 참인 한 실행됩니다. while 루프 내부에는 어느 시점에서 루프를 종료하는 문장을 포함해야 합니다. 그렇지 않으면 루프가 끝나지 않고 브라우저가 충돌할 수 있습니다.
직접 시도해 보세요.
<html>
<head>
<script type="text/javascript">
document.write("<b>Using while loops </b><br />");
var i = 0, j = 1, k;
document.write("Fibonacci series less than 40<br />");
while(i<40)
{
document.write(i + "<br />");
k = i+j;
i = j;
j = k;
}
</script>
</head>
<body>
</body>
</html>
출력:
Using while loops Fibonacci series less than 40 0 1 1 2 3 5 8 13 21 34
⚠️ 경고: 조건이 절대 거짓이 되지 않는 while 루프는 브라우저 탭을 멈추게 합니다. 루프 본문 내의 변수가 조건을 거짓으로 만드는지 항상 확인하고, 종료가 외부 데이터에 의존하는 경우에는 안전 카운터를 사용하십시오.
do… while 루프
구문 :
do
{
block of code to be executed
} while (condition)
do…while 루프는 while 루프와 매우 유사합니다. 유일한 차이점은 do…while 루프에서는 조건을 확인하기 전에도 코드 블록이 한 번 실행된다는 점입니다.
직접 시도해 보세요.
<html>
<head>
<script type="text/javascript">
document.write("<b>Using do...while loops </b><br />");
var i = 2;
document.write("Even numbers less than 20<br />");
do
{
document.write(i + "<br />");
i = i + 2;
}while(i<20)
</script>
</head>
<body>
</body>
</html>
출력:
Using do...while loops Even numbers less than 20 2 4 6 8 10 12 14 16 18
조건이 처음부터 거짓일 때 차이점이 확연히 드러납니다. while 루프는 아무것도 출력하지 않지만, do…while 루프는 종료되기 전에 한 줄을 출력합니다.ping.
루프에서…
for…in 루프는 객체의 열거 가능한 속성 이름을 순회합니다. 각 반복마다 다음 키가 루프 변수에 할당되고, 해당 값은 대괄호 표기법으로 읽어옵니다.
const student = { name: "Ann", age: 21, course: "JavaScript" }; for (const key in student) { console.log(key + " : " + student[key]); }
출력:
name : Ann age : 21 course : JavaScript
💡 팁: 배열에서 `for…in` 루프는 피하세요. 인덱스 값을 문자열로 반환할 뿐만 아니라 상속된 속성까지 접근하기 때문에 예상치 못한 결과가 발생할 수 있습니다. 대신 `for…of` 또는 일반적인 `for` 루프를 사용하세요.
for…of 루프 및 forEach
`for…of` 루프는 배열, 문자열, 맵, 세트 등 모든 반복 가능한 객체의 값을 읽습니다. `forEach` 메서드는 콜백 함수를 사용하여 동일한 결과를 얻고 인덱스에 접근할 수 있도록 합니다.
const students = ["John", "Ann", "Aaron"]; // for...of reads each value directly for (const name of students) { console.log(name); } // forEach supplies the value and the index students.forEach(function (name, index) { console.log(index + " - " + name); }); // strings are iterable too for (const letter of "Ann") { console.log(letter); }
출력:
John Ann Aaron 0 - John 1 - Ann 2 - Aaron A n n
실질적인 차이점 하나가 중요합니다. `for…of` 구문 안에서는 `break`와 `continue`를 사용할 수 있지만, 각 콜백이 별도의 함수이기 때문에 `forEach` 구문 안에서는 사용할 수 없습니다.
중단 및 계속 문장
두 가지 키워드는 반복문의 정상적인 흐름을 바꿉니다. `break` 문은 반복문을 완전히 종료하고, `continue` 문은 현재 실행 단계를 건너뛰고 다음 단계로 넘어갑니다.
const numbers = [4, 7, 10, 13, 16, 19]; // continue: skip odd numbers for (const n of numbers) { if (n % 2 !== 0) { continue; } console.log("even: " + n); } // break: stop at the first value above 12 for (const n of numbers) { if (n > 12) { console.log("first value above 12: " + n); break; } }
출력:
even: 4 even: 10 even: 16 first value above 12: 13
반복문은 여러분이 작성하게 될 거의 모든 스크립트에 등장합니다. 계속해서 읽어 나가세요. 실용적인 Java스크립트 코드 예시, 다시 방문 Java스크립트 배열 메서드 이러한 루프를 기반으로 구축된 반복 도우미에 대해서는 다음을 참조하십시오. 내부적 인 그리고 외부적인 Java스크립트 완성된 원고를 어디에 보관할지 결정하기 위해.
