English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

JavaScript 기본 튜토리얼

JavaScript 객체

JavaScript 함수

JS HTML DOM

JS 브라우저 BOM

AJAX 기본 튜토리얼

JavaScript 참조 매뉴얼

JavaScript For 루프

루프는 프로그래밍에서 반복적인 작업을 자동으로 수행하는 데 사용됩니다。

예를 들어, “Hello World”을 출력하려고 가정해 보겠습니다 10회. 다음과 같이 할 수 있습니다:

  document.write("Hello World<br>");
  document.write("Hello World<br>");
  document.write("Hello World<br>");
  document.write("Hello World<br>");
  document.write("Hello World<br>");
  document.write("Hello World<br>");
  document.write("Hello World<br>");
  document.write("Hello World<br>");
  document.write("Hello World<br>");
  document.write("Hello World<br>");

루프 안에서는 이 문장을 한 번만 작성하면 됩니다. 루프는 실행됩니다10회, 다음과 같이 표시할 수 있습니다:

for (let i = 0; i < 10; i++) {
document.write("Hello World<br>");
}
테스트를 보려면‹/›

For 루프

for 루프의 문법은 다음과 같습니다:

for (initialization; condition; final-expression) {
    //실행할 문장
}

initialization문장을 실행하기 전에 실행합니다(한 번)。

condition문장을 실행하는 조건을 정의했습니다。

문장을 실행한 후에, 항상 실행됩니다final-expression

for (var i = 0; i < 5; i++) {
    document.write("<br>The number is " + i);
}
테스트를 보려면‹/›

위의 예제에서, 다음과 같이 읽을 수 있습니다:

  • initialization 루프 시작 전에 변수를 설정합니다(변수 i = 0)。

  • condition 루프가 실행되는 조건을 정의했습니다(저는 작은 수보다 작아야 합니다5)。

  • 코드 블록을 실행할 때마다,final-expression이 모두값을 증가시킵니다 (i ++)。

아래의 예제에서, 우리는 오름차순으로 배열을 순회하도록 합니다:

var fruits = ['Apple', 'Mango', 'Banana', 'Orange'];
var txt = "";
for (var i = 0; i < fruits.length; i)++) {
    txt += fruits[i] + '<br>';
}
테스트를 보려면‹/›

在下面的示例中,我们以降序循环遍历一个数组:

var fruits = ['Apple', 'Mango', 'Banana', 'Orange'];
var txt = "";
for (var i = fruits.length -1; i >= 0; i--) {
txt += fruits[i] + '<br>';
}
테스트를 보려면‹/›

可选表达式

for循环中的三个表达式都是可选的。例如,我们可以通过在循环外部初始化变量来编写相同的For语句,而不需要初始化表达式。

//在循环外声明变量
var i = 0;
//初始化循环
for (; i < 5; i++) {
document.write(i);
}
테스트를 보려면‹/›

在这种情况下,第一个; 表示该语句是指向初始化,条件还是最终表达式,即使省略它也是必要的。

下面,我们还可以从循环中删除条件。我们将使用一个if语句和break来告诉循环在i大于3时停止运行,这与true条件相反。

//在循环外声明变量
var i = 0;
//省略初始化和条件
for (; ; i++) {
if (i > 3) {
break;
}
document.write(i);
}
테스트를 보려면‹/›

注意:break如果省略该条件,则必须包含该语句,否则循环将永远无限循环运行,并可能导致浏览器崩溃。

最后,可以通过将最终表达式放在循环末尾来将其删除。两个分号仍必须包含在内,否则循环将无法运行。

//在循环外声明变量
var i = 0;
//省略所有表达式
for (; ; ) {
if (i > 3) {
break;
}
document.write(i);
i++;
}
테스트를 보려면‹/›

从上面的示例可以看出,包括所有这三个语句通常会产生最简洁易读的代码。但是,知道以后可以省略语句是很有用的。

嵌套循环

您可以嵌套循环,即在另一个循环内循环。

嵌套循环在矩阵乘法中的大多数地方都使用,显示表格和许多其他地方:

var txt = "";
for (var row = 0; row < 10; row++) {
   for (var col = 0; col < row; col++) {
   txt += " * ";
   }
   txt += "<br>";
}
테스트를 보려면‹/›

For ...in循环

for...in循环迭代的对象的属性。

为了演示,我们将创建一个简单的myObj对象,其中包含一些name:value对。

var myObj = {
name: "VISHAL",
age: 22,
height: 175,
city: "New Delhi",
getNothing: function () { return ""; }
};
for (let x in myObj) {
document.write(x);
}
테스트를 보려면‹/›

각 반복에서 객체의 한 프로퍼티를 할당합니다.x이 루프는 객체의 모든 프로퍼티가 다 빠지면 종료됩니다.

다음 예제는 for...in 루프를 구현하여 웹 브라우저의Navigator객체:

for (let x in navigator) {
document.write(x);
}
테스트를 보려면‹/›

For ... Of 루프

for...of 문은 내장 String, Array, Array와 유사한 객체, 사용자 정의 이터러블을 포함한 이터러블 객체를 반복하는 루프를 생성합니다.

let iterable = [10, 20, 30, 40, 50];
for (let x of iterable) {
document.write(x);
}
테스트를 보려면‹/›

각 반복에서 객체의 한 요소를 할당합니다.x이 루프는 객체의 모든 요소가 다 빠지면 종료됩니다.

for...in과 for...of 루프는 반복할 내용이 다릅니다.

  • for...in 루프는 반복할 객체의 프로퍼티를 순서대로 반복합니다.

  • for...of 루프는 데이터를 반복하여 이 반복할 객체 정의가 필요합니다.

While 루프

while 루프와 do...while 루프는 다음 장에서 설명할 것입니다.