루프용 자바스크립트
예시
코드 블록을 5번 반복(반복)합니다.
for (let i = 0; i < 5; i++) {
text += i + "<br>";
}
자동차 이름을 수집하기 위해 배열을 루프(반복):
const cars = ["BMW", "Volvo", "Saab", "Ford"];
for (let i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
- 루프는 위치 0(
let i = 0)에서 시작합니다. - 루프
i는 각 실행에 대해 자동으로 증가합니다. - 루프는 .만큼 실행됩니다
i < cars.length.
아래에 더 많은 예가 있습니다.
정의 및 사용
명령문 은 for조건이 인 동안 실행되는 코드 블록을 정의합니다
true.
통사론
for (statement 1; statement 2; statement 3) {
code block to be executed
}
매개변수
| Parameter | Description |
| statement 1 | Optional. Executed before the code block starts. Normally used to initialize a counter variable. To initiate multiple values, separate each value with a comma. This parameter can be omitted, but not the semicolon ";" |
| statement 2 | Optional. The condition for running the code block. If it returns true the loop will start over again, otherwise the loop will end.This parameter can be omitted, but not the semicolon ";" |
| statement 3 | Optional. Executed after the code block. Normally used to increment the counter variable. This parameter can be omitted (e.g. to increase/decrease values inside the loop) |
JavaScript 루프 문
| 성명 | 설명 | |
| 부서지다 | 루프에서 벗어나다 | |
| 계속하다 | 루프에서 값을 건너뜁니다. | |
| 동안 | 조건이 true인 동안 코드 블록을 반복합니다. | |
| ... 동안 | 코드 블록을 한 번 반복한 다음 조건이 true인 동안 반복합니다. | |
| ~을위한 | 조건이 true인 동안 코드 블록을 반복합니다. | |
| ...을 위해 | 모든 iterable의 값을 반복합니다. | |
| ...에 | 객체의 속성을 반복합니다. |
더 많은 예
첫 번째 매개변수에서 여러 값을 시작합니다.
const cars = ["BMW", "Volvo", "Saab", "Ford"];
for (let i = 0, len = cars.length, text = ""; i < len; i++) {
text += cars[i] + "<br>";
}
첫 번째 매개변수 생략(루프가 시작되기 전에 값 설정):
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 2;
let len = cars.length;
let text = "";
for (; i < len; i++) {
text += cars[i] + "<br>";
}
사용 continue- 코드 블록을 순환하지만 값 3은 건너뜁니다.
let text = "";
for (let i = 0; i < 5; i++) {
if (i == 3) continue;
text += i + "<br>";
}
사용 break- 코드 블록을 루프하지만 다음과 같은 경우 루프를 종료합니다 i == 3.
let text = "";
for (let i = 0; i < 5; i++) {
if (i == 3) break;
text += i + "<br>";
}
두 번째 매개변수를 생략합니다.
루프를 종료하는 데 사용 break합니다. 그렇지 않으면 루프가 끝나지 않고 브라우저가 충돌합니다.
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let text = "";
for (let i = 0; ; i++) {
if (i == cars-length) break;
text += cars[i] + "<br>";
}
내림차순으로 배열을 반복합니다(음수 증가):
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let text = "";
for (let i = cars.length - 1; i >= 0; i--) {
text += cars[i] + "<br>";
}
마지막 매개변수를 생략하고 루프 내부의 값을 증가시키십시오.
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 0;
let len = cars.length;
for (; i < len;) {
text += cars[i] + "<br>";
i++;
}
NodeList를 반복하고 목록에 있는 모든 p 요소의 색상을 변경합니다.
const myNodelist = document.getElementsByTagName("P");
for (let i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.color = "blue";
}
중첩 루프(루프 안의 루프):
let text = "";
for (let = 0; i < 3; i++) {
text += i + "<br>";
for (let j = 10; j < 15; j++) {
text += j + "<br>";
}
}
브라우저 지원
forECMAScript1(ES1) 기능입니다.
ES1(JavaScript 1997)은 모든 브라우저에서 완벽하게 지원됩니다.
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes | Yes |