루프용 자바스크립트

루프는 지정된 횟수만큼 코드 블록을 실행할 수 있습니다.

JavaScript 루프

동일한 코드를 매번 다른 값으로 반복해서 실행하려는 경우 루프를 사용하는 것이 편리합니다.

JavaScript는 다양한 유형의 루프를 지원합니다.

for - 특정 횟수만큼 코드 블록을 반복합니다.
for/in - 객체의 속성을 반복합니다.
while - 언제 반복합니다. 지정된 조건이 true입니다. 지정된 코드 블록
do/while - 지정된 조건이 true인 경우 지정된 코드 블록도 반복합니다.

For 루프

for 루프는 다음을 원할 때 자주 사용됩니다. 루프 도구를 만듭니다.

다음은 for 루프의 구문입니다.

for (문 1; 문 2; 문 3)
{
실행된 코드 블록
}

시작은 문 1(코드 블록)이 시작되기 전에 실행됩니다. .

Statement 2는 루프(코드 블록)가 실행되는 조건을 정의합니다.

Statement 3은 루프(코드 블록)가 실행된 후에 실행됩니다.

Instance

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
</head>
<body>
<p>点击按钮循环代码5次。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
    function myFunction(){
        var x="";
        for (var i=0;i<5;i++){
            x=x + "该数字为 " + i + "<br>";
        }
        document.getElementById("demo").innerHTML=x;
    }
</script>
</body>
</html>

Run 시도해 볼 프로그램

from 위의 예에서 다음을 볼 수 있습니다.

Statement 1은 루프가 시작되기 전에 변수(var i=0)를 설정합니다.

Statement 2는 루프 실행 조건을 정의합니다(i는 5보다 작아야 함).

Statement 3 코드 블록이 실행될 때마다 값(i++)을 증가시킵니다.

Statement 1

일반적으로 구문 1을 사용하여 루프에 사용되는 변수를 초기화합니다(var i=0).

문 1은 선택 사항이므로 문 1을 사용하지 않고도 수행할 수 있습니다.

문 1에서 임의의(또는 여러) 값을 초기화할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
</head>
<body>
<script>
    cars=["小明","小龙","小奇","小涛"];
    for (var i=0,l=cars.length; i<l; i++){
        document.write(cars[i] + "<br>");
    }
</script>
</body>
</html>

프로그램을 실행하여 시도해 보세요

문 1을 생략할 수도 있습니다(예: 루프가 시작되기 전에 값이 설정된 경우). :

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<script>
cars=["BMW","Volvo","Saab","Ford"];
var i=2,len=cars.length;
for (; i<len; i++){
document.write(cars[i] + "<br>");
}
</script>
</body>
</html>

프로그램을 실행하여 시험해 보세요

Statement 2

보통 2번째 문장은 초기 변수의 조건을 평가하는데 사용됩니다.

설명 2도 선택사항입니다.

문 2가 true를 반환하면 루프가 다시 시작되고, false를 반환하면 루프가 종료됩니다.

NOTE: 문 2를 생략하는 경우 루프 내부에 break를 제공해야 합니다. 그렇지 않으면 사이클을 멈출 수 없습니다. 이로 인해 브라우저가 중단될 수 있습니다.

문 3

보통 문 3은 초기 변수의 값을 증가시킵니다.

문 3도 선택사항입니다.

문 3은 다양한 용도로 사용됩니다. 증분은 음수(i--)이거나 더 클 수 있습니다(i=i+15).

문 3도 생략할 수 있습니다(예: 루프 내부에 해당 코드가 있는 경우):

Instance

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
</head>
<body>
<script>
    cars=["BMW","Volvo","Saab","Ford"];
    var i=0,len=cars.length;
    for (; i<len; ){
        document.write(cars[i] + "<br>");
        i++;
    }
</script>
</body>
</html>

프로그램을 실행하여 사용해 보세요

For/In 루프

JavaScript for/in 이 명령문은 객체의 속성을 반복합니다:

예

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
</head>
<body>
<p>点击下面的按钮，循环遍历对象 "person" 的属性。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
    function myFunction(){
        var x;
        var txt="";
        var person={fname:"Bill",lname:"Gates",age:56};
        for (x in person){
            txt=txt + person[x];
        }
        document.getElementById("demo").innerHTML=txt;
    }
</script>
</body>
</html>

프로그램을 실행하고 시도해 보세요

다음에서 while 루프와 do/while 루프에 대해 설명하겠습니다. 장.

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <script> cars=["小明","小龙","小奇","小涛"]; for (var i=0,l=cars.length; i<l; i++){ document.write(cars[i] + "<br>"); } </script> </body> </html>

제출하다 코드 재설정

자동운전