시작부터 측면까지의 JavaScript for 루프(효율성 최적화, 이상한 사용법)_javascript 기술

1. for 루프의 기본 작성 방법
코드는 다음과 같습니다.

코드를 복사합니다 코드는 다음과 같습니다.

//예제 1 for(var i=1;i<=10;i) {
alert(i)
}

이 코드는 너무 간단해서 꺼내기가 부끄럽습니다. 코드를 실행하면 1부터 10까지 순차적으로 팝업이 뜹니다. 추신: IE6 등 초기 IE에서는 10을 10000으로 변경하면 사용자가 아무것도 할 수 없다고 계속 클릭하게 됩니다. 하하. 내 생각이었다고 말해.
기본 강좌이므로 본론으로 돌아가서 이 코드를 자세히 분석해 보겠습니다.
for 루프의 구조는 비슷합니다.
for(시작 전, 루프 실행 조건, 루프 종료 후 수행할 작업) {
// 본문 코드
} for 루프를 자세히 살펴보면 수천 년 동안 변하지 않은 특징 중 하나를 발견할 수 있습니다. for! 뒤에는 항상 두 개의 (영어 세미콜론)만 있습니다. 위 구조 코드에서는 for 루프의 실행 조건을 구분하기 위해 세미콜론을 사용한다고 설명했습니다. 이러한 조건은 필수이며 비워둘 수 있으나 위치는 예약되어 있어야 하므로 2개가 있어야 합니다.
시작하기 전에: 일반적으로 예제 1의 var i=0과 같은 일부 변수를 선언하는 데 사용됩니다. 이는 당분간 아무것도 없는 바구니를 준비하는 것과 같습니다. 도구 수에는 제한이 없으며 for 루프가 시작되기 전에 100개의 변수를 선언할 수 있으며 보기에 좋지 않다는 점을 제외하면 아무런 문제가 없습니다.
루프 진행 조건: 예를 들어 첫 번째 예시의 i<10이 조건입니다. 해당 조건이 true인 경우에만 첫 번째 예시의 조건이 if(i<)로 간주됩니다. ;10){ //실행...}. 바구니에 최대 10개의 물건을 담을 수 있다고 상상해 보세요. 물건이 10개 더 있으면 로드되지 않고 루프가 종료됩니다.
한 번 반복한 후 해야 할 일: 예 1에서는 단순히 장바구니에 무언가를 추가하기만 하면 됩니다. 사실 한 번 반복하는 것은 쉽지 않습니다.
특별 참고 사항: for 루프의 "시작 전" 코드는 한 번만 실행되며 전체 for 루프의 효율성에 영향을 미치지 않습니다. 그러나 "진행 조건" 및 "끝 후에 수행할 작업"은 다음과 같습니다. 루프 횟수에 따라 결정되므로 루프 성능 병목 현상이 발생하는 경우가 많습니다.
for 루프의 첫 번째;가 시작 전에 수행된 작업이라면 시작 전의 항목을 for 루프 앞으로 가져올 수 있나요? 시작하기 전에 정의하십시오. 대답은 '예'입니다.

코드 복사 코드는 다음과 같습니다.

//예제 2
var i=0;
for(;i<10;i ) {
alert(i)
}

"before"에 대한 괄호 안의 내용은 없지만 ;(세미콜론)이 여전히 있습니다! 그리고 그것은 거기에 있어야합니다!
마찬가지로 두 번째 이후의 코드는 한 번 후에 실행되기 때문에 for 루프 뒤에 실행할 코드를 넣을 수도 있습니다.

코드 복사 코드는 다음과 같습니다.

//예제3
var i= 0;
for(;i<10;) {
alert(i);
i
}

하지만 여전히 두 가지 악; 여전히 존재해야 합니다.
위는 두 가지 기본 "측면 사용법"입니다. . . 내가 바람을 피우고 있다고 말하지 마세요
하지만 보시다시피 루프 실행 조건은 별도로 지정할 수 없으며 두 개의 세미콜론 사이에 배치되어야 합니다! 앞뒤 모두 공격!

2. for 루프를 작성하는 부분 방법
1. 예제 1의 코드를 다음과 같이 변경합니다. var i=0
for(;i<10 ;경고(i )) ;어떻게? 이건 사기입니다. {}가 사라졌습니다! 하지만 그것은 절대적으로 정확합니다!
그러나 이 쓰기 방식은 너무 터무니없습니다. 둘째, 뒤에 너무 많은 코드를 넣지 않는 것이 가장 좋습니다. 왜냐하면 일단 너무 많으면 i의 가치를 파악할 수 없기 때문입니다. 코드가 혼란스러우면 인위적인 문법 오류가 발생할 수 있습니다.
적용 환경:
요소가 1부터 1000까지의 숫자인 배열을 생성하는 것과 같은 간단한 for 루프 작업의 경우 이 트릭을 사용하세요. 한 마디로 멋지네요.
2. 심층 분석
앞의 예를 통해 실제로 for 루프의 실행 조건은 다음과 같이 Boolean 값을 판단하는 것임을 알 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var t = true
if(t == true) {
Alert('Ah!')
}

이 if 문은 누구도 이해할 수 없습니다. 실제로 다음과 같이 작성할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var t = true
if(t) {
alert('Ah! ')
}


for 루프의 조건이 부울 값을 판단하는 것이라면 효과는 같습니다.

복사 code 코드는 다음과 같습니다.

var i = 10;
for(;i;i--){
alert(i) ;
}

이 코드의 효과는 10 대 1을 순서대로 표시하는 것입니다(예제 1과 반대). for 루프의 조건은 i만큼 간단합니다. 그러나 이전 설명에 따르면 조건은 실제로 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

if(i) {
//do
}

즉, i가 true이면 계속합니다. 실행주기. 이 for 루프에서 i는 언제 true입니까? i가 0이 아니거나, 빈 문자열이거나, 정의되지 않았거나, null이거나 false인 경우에는 true입니다.
따라서 이 for 루프는 i=0이 될 때까지 실행된 다음 종료됩니다. 그러나 우리 코드에는 0이 표시되지 않습니다. 이는 초보자를 혼란스럽게 하고 B를 무기로 설치하게 됩니다.
3, 또 다른
코드를 먼저 살펴보세요. 정원 친구 Snandy가 전합니다.

코드 복사 코드는 다음과 같습니다. 다음과 같습니다:

var ary = ["jack","tom","lily","andy"]
for(var i=0,a;a=ary[i ];){
console.log(a);
}

여전히 for 루프의 조건에 주의하세요: a=ary[i]. == 대신 =에 특별한 주의를 기울이십시오. ==인 경우 루프가 진행되지 않습니다.
이런 조건부 판단은 말도 안 되고, 저도 혼란스럽습니다. 유사함:
if(a=b) {...} //참고로 =!
이때 b가 false이면 false를 반환합니다.
위의 예로 돌아가서 헤더를 추가하면 ary[i]에 거짓 값(null 및 정의되지 않은 개수 모두)이 있으므로 조건이 거짓이 되어 루프가 중단됩니다.
이 예제에는 snandy도 언급했듯이 큰 제한이 있습니다. 예를 들어 배열에 0이 있으면 루프가 종료될 수도 있습니다.
4, jQuery를 작성하는 방법

코드 복사 코드는 다음과 같습니다.

function sibling( elem ) {
var r = [],
n = elem.parentNode.firstChild
for ( ; n; n = n.nextSibling ) {
if ( n.nodeType === 1 && n !== elem ) {
r.push(n )
}
}
return r
}

jquery에서 온 것입니다. 형제 노드를 추출하는 방법은 고유한 for 루프입니다. 반복 조건은 n이 참인지 확인하는 것입니다. n은 항상 html 노드이므로 항상 true입니다. 각 루프가 끝나면 n의 다음 노드가 n에 할당됩니다. n의 다음 노드가 없으면 n은 false가 되고 루프가 종료됩니다.
요약:
위의 모든 예에서 볼 수 있듯이 for 루프가 아무리 이상해도 두 개가 없으면 작동하지 않습니다. for 루프의 원리를 이해하려면 ;를 경계로 for 루프를 나누어 보면 한눈에 알 수 있습니다.
3. for 루프의 효율성 최적화
1. 캐시 변수
이것은 또한 가장 일반적으로 사용되는 효율성 최적화 방법입니다:

코드를 복사하세요 코드는 다음과 같습니다:

var arr =[1,2,23,...,1000]; (var i=0, l = arr.length;i//
}

루프할 때마다 실행 조건을 판단해야 하므로, 반복할 때마다 arr에서 결정됩니다. 읽는 길이는 의심할 여지없이 매우 낭비적이며 필연적으로 계산 횟수가 증가하여 효율성이 낭비됩니다.
2, 역순 방법
예를 들어 배열에 1000개의 요소가 있는 경우 추출 순서를 고려하지 않으면 역순으로 반복할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var arr =[1,2,23,...,1000]
var i = arr.length;
for(; i>0;i--){
//alert(i)
}


역순이 순차순서보다 빠른 이유는 무엇인가요? 과학적인 근거는 없습니다! 사실, 역순으로 변수를 하나 덜 사용할 수 있기 때문입니다(이전 예와 비교). 이 외에는 둘 사이에 속도 차이가 없습니다.
3. 튀어나오는데 주의
하고 불필요한 작업을 수행하지 않는 것이 기본 논리입니다. 1,000개의 li가 있는 경우 하나의 li에는 특별한 className이 있으며 이 li를 찾아야 합니다. 그러면, 그러한 li는 하나만 존재한다고 판단되었기 때문에, 이 li를 발견하면 즉시 뛰어내려 중단해야 하며, 다음 루프를 진행할 필요가 없습니다. 이런 식으로 li이 마지막이 아닐 가능성이 999/1000이기 때문에 확실히 많은 계산을 절약할 수 있습니다.
그 외의 상황에 대해서는 추론을 해주시기 바랍니다.
4. 옆쪽 용법 사용
위에 소개한 옆쪽 용법은 쓰기에도 아름다울 뿐만 아니라, 대부분 변수와 계산을 저장하는 효과가 있으니 그냥 사용해도 멋지고 효과적입니다. 왜 안돼?
------------요약------------ ------ ---
저는 Javascript의 유연성을 좋아합니다. 단순히 보기 좋게 사용할 수 있기 때문만은 아닙니다. 블로그파크에서 더 많은 JS 지식을 배우고 싶습니다. 전문가들의 글을 자주 읽고 많은 유익을 얻고 싶습니다. 다음은 제가 정원에서 찾은 훌륭한 사람들 중 일부입니다. 나열하지 않더라도 저를 저주하지 마세요.
cloudgamer, Situ Zhengmei, Tom 삼촌, snandy 및 기타 소박한 마스터. 해당 블로그를 찾고 싶으시면 검색해 보세요.
PS: 블로그 파크의 코드 삽입 기능이 정말 마음에 듭니다. 앞으로는 대량의 코드가 포함된 글이 블로그 파크에 직접 게시될 예정입니다.
다음 코드를 사용하지 마세요:

코드 복사 코드는 다음과 같습니다.

var arr = [1,2,23,1000];
for(var i=0,l = arr.length;iif(arr[i]>10000 ) {
나는
}
}

성명：

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