JavaScript에는 for 루프가 있습니다. JavaScript 언어의 for 루프는 코드 블록을 여러 번 실행하는 데 사용됩니다. JS에서 일반적으로 사용되는 루프 도구로 "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:
예를 들어 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 开始计算。 - 条件表达式
i ,表示只要 <code>i
小于等于 100 循环就会一直执行,当i
大于 100 循环会停止。 - 变量更新
i++
,之前我们学运算符的时候学过,这是递增运算符++
,表示为其操作数增加 1。
변수 초기화
i = 1
, 이는 1부터 시작함을 의미합니다. result
并给它赋值为 0,表示初始的总和为 0 。然后在 for
循环中三个语句:
此时我们可以一点点来看这个 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) + " "); } document.write("<br>"); }님이 작성하고 있는
for
루프를 수행할 때 가장 먼저 해야 할 일은 괄호 안의 세 문을 이해하는 것입니다. 왜냐하면 배열에 있는 요소의 첨자 인덱스를 통해 요소의 값을 얻을 수 있기 때문입니다. 배열의 인덱스는 0부터 시작하므로 변수 초기화를 i = 0
으로 설정할 수 있습니다. 두 번째 조건식은 배열의 마지막 인덱스가 lst.length - 1
이므로 lst.length - 1
보다 작거나 같으면 됩니다. 루프는 계속 실행됩니다. i 은 <code>i와 동일합니다. 세 번째 변수는 루프가 반복될 때마다 인덱스 값이 1씩 증가하므로 i++
입니다. 따라서 루프는 다음과 같이 작성할 수 있습니다. for (变量 in 对象) {
// 代码块
}
출력:
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 = {
姓名:'侠侠',
年龄:'22',
性别:'男',
出生日期:'1997-08-05',
职业:'程序员',
特长:'跳舞'
}
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 = {
姓名:'侠侠',
年龄:'22',
性别:'男',
出生日期:'1997-08-05',
职业:'程序员',
特长:'跳舞'
}
for(var i in object) {
console.log(i + ":" + object[i]);
}
输出:
姓名: 侠侠
年龄: 22
性别: 男
出生日期: 1997-08-05
职业:程序员
特长:跳舞
【相关推荐:javascript学习教程】
위 내용은 JavaScript에는 for 루프가 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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

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

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

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

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

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

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

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


핫 AI 도구

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

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

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

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

인기 기사

뜨거운 도구

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

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

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

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

ZendStudio 13.5.1 맥
강력한 PHP 통합 개발 환경
