찾다
웹 프론트엔드프런트엔드 Q&AJavaScript에는 for 루프가 있나요?

JavaScript에는 for 루프가 있나요?

Mar 01, 2022 am 11:41 AM
for 루프javascript

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으로 문의하세요.
CSS IDS vs 클래스 : 접근성에 더 좋은 것은 무엇입니까?CSS IDS vs 클래스 : 접근성에 더 좋은 것은 무엇입니까?May 10, 2025 am 12:02 AM

ClassareBetterforAccessibilityInwebDevelopment.1) ClassescanBeappliedTomultipleEmentements, 연속적 인 stylesandbehaviors, whataidsusers와 whithdisabilities

CSS : 클래스와 ID 선택기의 차이점을 이해합니다CSS : 클래스와 ID 선택기의 차이점을 이해합니다May 09, 2025 pm 06:13 PM

ClassSelectorSeReaseusableformultipleElements, whileIdselectorsareUniqueAncePerPage.1) 클래스, 1) 클래스, areidealforstylingmultipleements likebuttons.2) ids, awepectupforUniqueElementsLikeAnavaterMangu.3) Ids

CSS 스타일링 : 클래스와 ID 선택기 중에서 선택합니다CSS 스타일링 : 클래스와 ID 선택기 중에서 선택합니다May 09, 2025 pm 06:09 PM

CSS 스타일에서 클래스 선택기 또는 ID 선택기는 프로젝트 요구 사항에 따라 선택해야합니다. 1) 클래스 선택기는 재사용에 적합하며 동일한 스타일의 여러 요소에 적합합니다. 2) ID 선택기는 고유 한 요소에 적합하며 우선 순위가 높지만 유지 보수 어려움을 피하기 위해주의해서 사용해야합니다.

HTML5 : 제한HTML5 : 제한May 09, 2025 pm 05:57 PM

html5hasseverallimitationsincludinglackofportforAdvancedgraphics, basic formvalidation, cross-browsercompatibilitiessues, performanceimpacts 및 securityconcerns.1) forcomplexgraphics, html5'scanvasisinsufficiver

CSS : 한 스타일이 다른 스타일보다 우선 순위가 더 높습니까?CSS : 한 스타일이 다른 스타일보다 우선 순위가 더 높습니까?May 09, 2025 pm 05:33 PM

예, Onestylecanhavemorepriority thananotherincssduetospecific and thecascade.1) SpecipationActSascoringsystemwheremorespecificselectorshaveHigherPriority.2) theCACASCASCACSCASCASCASCOLONSEFECALORONSOFECOLONSOFECOLONSOFECIFICI와 함께

HTML5 사양의 중요한 목표는 무엇입니까?HTML5 사양의 중요한 목표는 무엇입니까?May 09, 2025 pm 05:25 PM

thesiNificantgoalsofhtml5ARETOENHANCEMULTIMEDIASUPPORT, HUMANERDIALIDAY, MASTERCONSCONSENCYACROSSDEVICES, andensureBackwardCompatibility, 1) html5improvesmultimediaWithnativeElementsLikeAnd.2) ItusessessessessesseManticElementsForBetseo.3) ITS

React의 한계는 무엇입니까?React의 한계는 무엇입니까?May 02, 2025 am 12:26 AM

반응 말 : 1) asteeplearningcurveduetoitsvastecosystem, 2) Seochallengswithclient-siderendering, 3) PlatiperFormanceIssUseInlargeApplications, 4) ComplexStateManagementAsAppSgrow, 및 5) theneedTokeEpupWithitsHouou

React의 학습 곡선 : 새로운 개발자를위한 도전React의 학습 곡선 : 새로운 개발자를위한 도전May 02, 2025 am 12:24 AM

ReactisChallengingforbeginnersdueToitssteePlearningCurveanDParadigMshiftTocomponent 기반 Architection.1) 시작된 문서화 forasolidFoundation.2) startWithOficialDocumentationForAsolIdfoundation.2) 이해를 이해하는 방법

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

VSCode Windows 64비트 다운로드

VSCode Windows 64비트 다운로드

Microsoft에서 출시한 강력한 무료 IDE 편집기

SublimeText3 Linux 새 버전

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

안전한 시험 브라우저

안전한 시험 브라우저

안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.