찾다
웹 프론트엔드프런트엔드 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으로 문의하세요.
React : 동적 및 대화식 사용자 인터페이스 생성React : 동적 및 대화식 사용자 인터페이스 생성Apr 14, 2025 am 12:08 AM

React는 동적 및 대화식 사용자 인터페이스를 구축하기위한 선택 도구입니다. 1) 구성 요소화 및 JSX는 UI 분할 및 재사용을 간단하게 만듭니다. 2) State Management는 Usestate 후크를 통해 구현되어 UI 업데이트를 트리거합니다. 3) 이벤트 처리 메커니즘은 사용자 상호 작용에 응답하고 사용자 경험을 향상시킵니다.

React vs. 백엔드 프레임 워크 : 비교React vs. 백엔드 프레임 워크 : 비교Apr 13, 2025 am 12:06 AM

React는 사용자 인터페이스를 구축하기위한 프론트 엔드 프레임 워크입니다. 백엔드 프레임 워크는 서버 측 응용 프로그램을 구축하는 데 사용됩니다. React는 구성 및 효율적인 UI 업데이트를 제공하며 백엔드 프레임 워크는 완전한 백엔드 서비스 솔루션을 제공합니다. 기술 스택, 프로젝트 요구 사항, 팀 기술 및 확장 성을 선택할 때는 고려해야합니다.

HTML 및 React : 마크 업과 구성 요소의 관계HTML 및 React : 마크 업과 구성 요소의 관계Apr 12, 2025 am 12:03 AM

HTML과 React의 관계는 프론트 엔드 개발의 핵심이며, 현대 웹 애플리케이션의 사용자 인터페이스를 공동으로 구축합니다. 1) HTML은 컨텐츠 구조와 의미를 정의하고 React는 구성 요소화를 통해 동적 인터페이스를 구축합니다. 2) 부품은 JSX 구문을 사용하여 HTML을 포함하여 지능형 렌더링을 달성합니다. 3) 구성 요소 수명주기는 상태 및 속성에 따라 HTML 렌더링 및 업데이트를 동적으로 관리합니다. 4) 구성 요소를 사용하여 HTML 구조를 최적화하고 유지 관리 가능성을 향상시킵니다. 5) 성능 최적화에는 불필요한 렌더링을 피하고 주요 속성 사용 및 구성 요소 단일 책임을 유지하는 것이 포함됩니다.

반응 및 프론트 엔드 : 대화 형 경험 구축반응 및 프론트 엔드 : 대화 형 경험 구축Apr 11, 2025 am 12:02 AM

React는 대화식 프론트 엔드 경험을 구축하는 데 선호되는 도구입니다. 1) 반응은 구성 요소화 및 가상 DOM을 통해 UI 개발을 단순화합니다. 2) 구성 요소는 기능 구성 요소 및 클래스 구성 요소로 나뉩니다. 기능 구성 요소는 더 간단하고 클래스 구성 요소는 더 많은 수명주기 방법을 제공합니다. 3) RECT의 작동 원리는 가상 DOM 및 조정 알고리즘에 의존하여 성능을 향상시킵니다. 4) 주 경영진은 usestate 또는 this.state를 사용하며 ComponentDidMount와 같은 수명주기 방법은 특정 논리에 사용됩니다. 5) 기본 사용에는 구성 요소 생성 및 상태 관리가 포함되며 고급 사용량은 사용자 정의 후크 및 성능 최적화가 포함됩니다. 6) 일반적인 오류에는 부적절한 상태 업데이트 및 성능 문제, 디버깅 기술은 ReactDevTools 사용 및 우수

반응 및 프론트 엔드 스택 : 도구 및 기술반응 및 프론트 엔드 스택 : 도구 및 기술Apr 10, 2025 am 09:34 AM

React는 핵심 구성 요소 및 상태 관리 기능을 갖춘 사용자 인터페이스를 구축하기위한 JavaScript 라이브러리입니다. 1) 구성 요소화 및 상태 관리를 통해 UI 개발을 단순화합니다. 2) 작업 원칙에는 화해 및 렌더링이 포함되며 최적화는 React.Memo 및 Usememo를 통해 구현할 수 있습니다. 3) 기본 사용법은 구성 요소를 작성하고 렌더링하는 것입니다. 고급 사용법에는 후크 및 컨텍스트를 사용하는 것이 포함됩니다. 4) 부적절한 상태 업데이트와 같은 일반적인 오류는 ReactDevTools를 사용하여 디버그 할 수 있습니다. 5) 성능 최적화에는 React.Memo, 가상화 목록 및 코드플릿을 사용하는 것이 포함되며 코드를 읽을 수 있고 유지 관리 가능하게 유지하는 것이 가장 좋습니다.

HTML에서 React의 역할 : 사용자 경험 향상HTML에서 React의 역할 : 사용자 경험 향상Apr 09, 2025 am 12:11 AM

React는 JSX와 HTML을 결합하여 사용자 경험을 향상시킵니다. 1) JSX는 개발을보다 직관적으로 만들기 위해 HTML을 포함시킨다. 2) 가상 DOM 메커니즘은 성능을 최적화하고 DOM 운영을 줄입니다. 3) 유지 보수성을 향상시키기위한 구성 요소 기반 관리 UI. 4) 상태 관리 및 이벤트 처리는 상호 작용을 향상시킵니다.

반응 구성 요소 : HTML에서 재사용 가능한 요소 생성반응 구성 요소 : HTML에서 재사용 가능한 요소 생성Apr 08, 2025 pm 05:53 PM

반응 구성 요소는 함수 또는 클래스로 정의 할 수 있으며 UI 로직을 캡슐화하고 소품을 통해 입력 데이터를 수락합니다. 1) 구성 요소 정의 : 기능 또는 클래스를 사용하여 반응 요소를 반환합니다. 2) 렌더링 구성 요소 : 반응 호출 렌더 메소드 또는 기능 구성 요소를 실행합니다. 3) 멀티플렉싱 구성 요소 : 소품을 통해 데이터를 전달하여 복잡한 UI를 구축합니다. 구성 요소의 수명주기 접근 방식을 통해 다른 단계에서 논리를 실행하여 개발 효율성 및 코드 유지 관리 가능성을 향상시킬 수 있습니다.

엄격한 모드 목적을 반응합니다엄격한 모드 목적을 반응합니다Apr 02, 2025 pm 05:51 PM

React Strict Mode는 추가 점검 및 경고를 활성화하여 React 응용 프로그램의 잠재적 문제를 강조하는 개발 도구입니다. 레거시 코드, 안전하지 않은 라이프 사이클 및 부작용을 식별하여 현대 반응 관행을 장려합니다.

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 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
1 몇 달 전By尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

안전한 시험 브라우저

안전한 시험 브라우저

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

맨티스BT

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

SecList

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.

ZendStudio 13.5.1 맥

ZendStudio 13.5.1 맥

강력한 PHP 통합 개발 환경