>웹 프론트엔드 >프런트엔드 Q&A >JavaScript에는 for 루프가 있나요?

JavaScript에는 for 루프가 있나요?

青灯夜游
青灯夜游원래의
2022-03-01 11:41:262406검색

JavaScript에는 for 루프가 있습니다. JavaScript 언어의 for 루프는 코드 블록을 여러 번 실행하는 데 사용됩니다. JS에서 일반적으로 사용되는 루프 도구로 "for(초기화 표현식; 조건 표현식; 변수 업데이트)" 구문을 알 때 사용하기에 적합합니다. ) { 조건식이 참일 때 실행되는 코드}".

JavaScript에는 for 루프가 있나요?

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

JavaScript에는 for 루프가 있습니다.

JavaScript 언어의 for 루프는 코드 블록을 여러 번 실행하는 데 사용됩니다. JavaScript에서 가장 일반적으로 사용되는 루프 도구이며 배열 순회 루프 등에 사용할 수도 있습니다.

for 루프를 사용하는 이유는 무엇인가요? 예를 들어 콘솔이 1부터 1000 사이의 모든 숫자를 출력하도록 하려면 출력 문만 작성하면 1000줄의 코드를 작성해야 하지만 for 루프를 사용하면 몇 가지 코드만으로 이를 달성할 수 있습니다. 코드 줄. 간단히 말해서 for 루프를 사용하면 코드를 더 편리하고 빠르게 작성할 수 있습니다(물론 그렇지 않으면 왜 필요한가요).

JS for 루프 구문

JS for 루프는 루프 수를 알 때 사용하기에 적합합니다. 구문 형식은 다음과 같습니다.

for(初始化表达式; 条件表达式; 变量更新) {
	// 条件表达式为true时执行的代码
}
  • 초기화 표현식: 일반적으로 초기 값을 선언하는 데 사용됩니다. 카운터, 즉 루프 값의 시작입니다.

  • 조건식: 루프 본문의 코드 실행 여부를 제어하는 ​​데 사용되는 루프 코드 블록 실행 조건을 정의합니다. 조건이 FALSE이면 루프가 즉시 종료됩니다.

  • 변수 업데이트: 각 루프 코드 블록이 실행된 후 실행됩니다. 루프가 실행될 때마다 카운터 값이 즉시 수정됩니다.

for 루프 문 실행 흐름은 아래 그림과 같습니다.

예제 1:JavaScript에는 for 루프가 있나요?

예를 들어 HTML 파일에서 1부터 100까지 합을 계산하는 다음 코드를 작성합니다.

  var result = 0;
  for(var i = 1; i <= 100; i++) {
    result = result + i;
  }
  alert(result);
이 파일을 브라우저에서 열면 팝업 레이어가 나타납니다. 팝업 레이어에 표시되는 내용은 1~100의 합:

위 코드에서 result 변수를 선언하고 값 0을 할당합니다. 초기 합계는 0입니다.

그런 다음 for 루프의 세 문:


    변수 초기화 i = 1, 이는 1부터 시작함을 의미합니다. result 并给它赋值为 0,表示初始的总和为 0 。

    然后在 for 循环中三个语句:

    • 变量初始化 i = 1,表示从 1 开始计算。
    • 条件表达式 i ,表示只要 <code>i 小于等于 100 循环就会一直执行,当 i 大于 100 循环会停止。
    • 变量更新 i++,之前我们学运算符的时候学过,这是递增运算符 ++,表示为其操作数增加 1。

    此时我们可以一点点来看这个 for 循环:

    第一次循环: result = 0 + 1   // 此时result值为0,  i的值为1
    第二次循环: result = 1 + 2   // 此时result值为0+1,i的值为2
    第三次循环: result = 3 + 3   // 此时result值为1+2,i的值为3
    第四次循环: result = 6 + 4   // 此时result值为3+3,i的值为4
    第五次循环: result = 10 + 5  // 此时result值为6+4,i的值为5
    ...

    我们只需要搞清楚 for 循环中的执行原理,不需要手动来计算求和,只要写好代码,执行代码后计算机会很快会告诉我们1到 100 的总和。

    再补充一下,上述代码中result = result + i,我们也可以写成 result += i,这是我们之前学过的加赋值运算符,还记得吗?

    示例2:

    再来看一个例子,例如我们可以使用 for 循环来实现数组遍历,首先定义一个数组 lst

    var lst = ["a", "b", "c", "d", "e"];

    在写 for 循环时,首先就是要搞清楚小括号里面的三个语句,因为我们可以通过数组中元素的下标索引来获取元素的值,而数组的索引又是从 0 开始,所以变量初始化可以设置为i = 0。第二个条件表达式,因为数组中最后一个索引为 lst.length - 1,所以只要小于等于 lst.length - 1,循环就会一直执行。而i 就相当于 <code>i<lst.length>。第三个变量更新,当循环每循环一次,索引值就加一,所以为 <code>i++

    所以循环可以像下面这样写:

    for(i = 0; i<lst.length; i++){
        console.log(lst[i]);  // 输出数组中的元素值,从索引为0的值开始输出,每次加1,一直到lst.length-1
    }

    输出:

    a
    b
    c
    d
    e

    其实遍历数组还有一种更好的方法,就是使用 for...in

    조건식 i 은 <code>i가 100보다 작거나 같은 한 i일 때 루프가 계속 실행된다는 의미입니다. 가 100보다 크면 루프가 중지됩니다.

    변수 업데이트 i++, 우리는 이전에 연산자를 배울 때 배웠습니다. 이것은 피연산자를 1만큼 증가시키는 것을 의미하는 증가 연산자 ++입니다. 이 시점에서 우리는 이 for 루프를 조금씩 살펴볼 수 있습니다:

    // 省略第一个表达式
    var i = 0;
    for (; i < 5; i++) {
        // 要执行的代码
    }
    // 省略第二个表达式
    for (var y = 0; ; y++) {
        if(y > 5){
            break;
        }
        // 要执行的代码
    }
    // 省略第一个和第三个表达式
    var j = 0;
    for (; j < 5;) {
        // 要执行的代码
        j++;
    }
    // 省略所有表达式
    var z = 0;
    for (;;) {
        if(z > 5){
            break;
        }
        // 要执行的代码
        z++;
    }

    우리는 for 루프의 실행 원리만 이해하면 됩니다. 결과를 수동으로 계산할 필요가 없습니다. 그리고 우리가 코드를 작성하는 한 컴퓨터는 코드를 실행한 후 1에서 100까지의 합을 신속하게 알려줍니다.

    위 코드에서 result = result + i를 추가하려면 result += i로 작성할 수도 있습니다. 이것이 우리가 배운 덧셈 할당 연산자입니다. 기억나? 예 2:

    다른 예를 살펴보겠습니다. 예를 들어 for 루프를 사용하여 배열 순회를 구현할 수 있습니다. 먼저 lst 배열을 정의합니다.

    for (var i = 1; i <= 9; i++) {
        for (var j = 1; j <= i; j++) {
            document.write(j + " x " + i + " = " + (i * j) + "&emsp;");
        }
        document.write("<br>");
    }

    님이 작성하고 있는 for 루프를 수행할 때 가장 먼저 해야 할 일은 괄호 안의 세 문을 이해하는 것입니다. 왜냐하면 배열에 있는 요소의 첨자 인덱스를 통해 요소의 값을 얻을 수 있기 때문입니다. 배열의 인덱스는 0부터 시작하므로 변수 초기화를 i = 0으로 설정할 수 있습니다. 두 번째 조건식은 배열의 마지막 인덱스가 lst.length - 1이므로 lst.length - 1보다 작거나 같으면 됩니다. 루프는 계속 실행됩니다. i 은 <code>i와 동일합니다. 세 번째 변수는 루프가 반복될 때마다 인덱스 값이 1씩 증가하므로 i++입니다.

    따라서 루프는 다음과 같이 작성할 수 있습니다.

    for (变量 in 对象) {
    	// 代码块
    }
    JavaScript에는 for 루프가 있나요?출력:

    var lst = ["a", "b", "c", "d", "e"];for(var l in lst){
        console.log(lst[l]);}
    🎜사실 배열을 순회하는 더 좋은 방법은 for...in 루프를 사용하는 것입니다. 배열을 순회하는 명령문입니다. 🎜🎜🎜🎜for three 표현식 in the 루프🎜🎜🎜🎜JS for for 루프에서 괄호 안의 세 표현식은 생략할 수 있지만, 다음 예와 같이 세 표현식을 구분하는 데 사용되는 세미콜론은 생략할 수 없습니다. 🎜
    a
    b
    c
    d
    e
    🎜🎜🎜 for 루프 중첩🎜🎜🎜🎜어떤 종류의 루프라도 중첩될 수 있습니다. 즉, 하나 이상의 루프가 루프에 정의되어 있음을 보여주기 위해 for 루프를 예로 들어 보겠습니다. 다음 루프를 사용합니다: 🎜
    var object = {
        姓名:&#39;侠侠&#39;,
        年龄:&#39;22&#39;,
        性别:&#39;男&#39;,
        出生日期:&#39;1997-08-05&#39;,
        职业:&#39;程序员&#39;,
        特长:&#39;跳舞&#39;
    }
    
    for(var i in object) {
    	console.log(i + ":" + object[i]);
    }
    🎜실행 결과: 🎜🎜🎜🎜

    扩展知识:for 循环变体--for…in 循环

    for...in 循环主要用于遍历数组或对象属性,对数组或对象的属性进行循环操作。for...in 循环中的代码每执行一次,就会对数组的元素或者对象的属性进行一次操作。

    语法如下:

    for (变量 in 对象) {
    	// 代码块
    }

    for 循环括号内的变量是用来指定变量,指定的可以是数组对象或者是对象属性。

    示例:

    使用 for...in 循环遍历我们定义好的 lst 数组:

    var lst = ["a", "b", "c", "d", "e"];for(var l in lst){
        console.log(lst[l]);}

    输出:

    a
    b
    c
    d
    e

    除了数组,for...in 循环还可以遍历对象,例如我们遍历 侠侠 的个人基本信息:

    var object = {
        姓名:&#39;侠侠&#39;,
        年龄:&#39;22&#39;,
        性别:&#39;男&#39;,
        出生日期:&#39;1997-08-05&#39;,
        职业:&#39;程序员&#39;,
        特长:&#39;跳舞&#39;
    }
    
    for(var i in object) {
    	console.log(i + ":" + object[i]);
    }

    输出:

    姓名: 侠侠
    年龄: 22
    性别: 男
    出生日期: 1997-08-05
    职业:程序员
    特长:跳舞

    【相关推荐:javascript学习教程

위 내용은 JavaScript에는 for 루프가 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.