$.각 () 대 () 루프 - 및 성능

$.각 () 대 () 루프 - 및 성능

이것들은 주로 제가 궁금해했던 것들입니다. 누군가가 그것들에 대해 조금 더 많은 통찰력을 줄 수 있을지도 모릅니다. 지금까지 제가 발견한 것도 공유하겠습니다!

처음으로 궁금했던 건...사용할 수 있는 장점이나 이유가 있습니까?

$('element').each(function (i, el) { });

-- 대 --

$.each($('element'), function (i, el) { });

jQuery 문서를 보면 하나 또는 다른 것에 대한 라임이나 이유가 보이지 않습니다(아마도 한 인스턴스 또는 다른 것에 대해 할 수 있는 추가 작업을 알고 있을 것입니다).

하지만 여기서 더 중요한 건 속도에 관심이 있다는 겁니다

// As opposed to $.each() looping through a jQuery object
// -- 8x faster 
for (var i = 0, $('.whatever').length; i < len; i++) {
    $('.whatever')[i] // do stuff
}

여기 jsFiddle DEMO를 확인해보시면 속도의 차이가 기본적으로 둘 중 하나와 동등하다는 것을 알 수 있을 것입니다. 하지만 더 중요한 것은 항상 사용해야 한다는 것입니다.for()루프...

는 단지 단순히 (5개의 50,000) 를를 . .data-newAttr한 건

---

질문: 가장 큰 질문은 객체를 반복하면서 루프를 항상 사용하는 것은 어떨까 하는 것입니다.$.each()를 사용해야 할 이유가 있습니까?jQuery 객체를 통과할 때도 항상 ()루프를 사용합니까?

jsFiddle DEMO 여기

Function type:                  Execution Time:
_testArea.each() + $(this)               1947   <-- using $(this) slows it down tremendously
$.each()         + $(this)               1940
_testArea.each() + el(plain JS)           458   <-- using the Element speeds things up
$.each()         + el(plain JS)           452
for() loop       + plainJS[0] iteration   236   <-- over 8x faster

2센트만.:)

..each()당신이 할 수 있도록 허락합니다 그것은 a로 할 수 없는 것입니다.for루프가 체인으로 연결됩니다.

$('.rows').each(function(i, el) {
    // do something with ALL the rows
}).filter('.even').each(function(i, el) {
    // do something with the even rows
});

---

일치하는 요소의 원래 집합의 하위 집합을 순환해야 하는 경우에 체인이 성능에 어떤 영향을 미치는지 확인하기 위해 JSFiddle을 가지고 놀았습니다.

결과는 그다지 예상치 못했던 것은 아니지만, 몇 가지 요소와 많은 루프의 조합으로 인해 오버헤드가 과장되었다고 생각합니다.그 외: 일반적인 JS 루프는 여전히 약간 더 빠르지만, 그것이 추가된 가독성에 무게가 실리는지 여부..each()(그리고 연쇄) 논쟁의 여지가 있습니다.

수 있는 는..each() ( 더 익명 핸들러r를 s 자동 로컬 스코핑에)에를 하는 것에 가 없음을 합니다.에 대해 익명 함수/closures/이벤트 핸들러/whatever를 훨씬 더 많이 생성하는 경우, 핸들러가 변수를 공유하는 것에 대해 걱정할 필요가 없음을 의미합니다.즉, 자바스크립트는 로컬 범위에 관해서는 다른 언어들처럼 작동하지 않지만, 어디서든 변수를 선언할 수 있기 때문에 때로는 속일 수 있습니다.

즉, 이는 잘못된 것입니다.

var idx,el;
for (idx = 0; idx <someObjectArray.length; idx++){
   el = someObjectArray[idx]
   el.someEventHandler(function(){  
       alert( "this is element " + idx);
   }); 
}

이 후에 중 가 "할 때마다하십시오) "someEvent" 를마다(하십시오) 에 .idx , () 이어야 .someObjectArray.length;

적절한 인덱스를 저장하려면 로컬 범위를 선언하고 변수를 생성한 후 해당 변수에 할당하여 사용해야 합니다.

var idx,el;
for (idx = 0; idx <someObjectArray.length; idx++){
   el = someObjectArray[idx];
   (function(){
       var localidx = idx;
       el.someEventHandler(function(){  
           alert( "this is element " + localidx);
       }); 
   })();
}

보다시피, 그건 아주 못생겼지만, 효과가 있을 겁니다.각 이벤트 처리기는 다음과 같은 고유한 복사본을 받습니다.localidx

이제 그것을 비교해 보세요..each()

$(someObjectArray).each(function (idx, el) { 
   el.someEventHandler(function(){  
       alert( "this is element " + idx);
   }); 
});

훨씬 간단하죠?

jQuery.각각 vs for-loop

장점 jQuery.각:

• jQuery 코드(체인 및 스타일)에 잘 맞춥니다.
• 범위에 대한 걱정이 없습니다(반복기 및 개체에 대한 참조는 지속됩니다).
• 범용으로 사용할 수 있습니다(모든 종류의 객체 및 객체 키를 통해 반복).

루프에 대한 이점:

• 고성능(게임/애니메이션/대규모 데이터셋용).
• 반복기에 대한 전체 제어(항목 건너뛰기, 목록의 스플라이스 항목 등)
• jQuery에 대한 종속성이 없기 때문에 for-loop은 항상 작동합니다.
• 대부분의 다른 유사 언어들과 동일한 친숙한 구문.

예제코드

이것은 내가 목록 위에서 반복하는 방법에 대한 예시 코드입니다.

var list = ['a', 'b', 'c', 'd', 'e', 'f'];

jQuery.각 항목:

$.each(list, function(i, v)
{
    // code...
});

닫힘이 없는 for-loop

for(var i=0,v,n=list.length;i<n;i+=1)
{
    v = list[i];
    // code...
}

닫힘이 있는 포루프:

for(var i=0,n=list.length;i<n;i+=1)
{
    (function(i, v)
    {
        // code...
    })(i, list[i]);
}

참고: 루프에 대한 표준을 사용하고, 필요한 경우에만 클로저를 사용할 것을 제안합니다.와 더 때,보다 jQuery다를 이 더 수 .$.each가 있을 경우에는 그할 수 있습니다 성능에 문제가 있을 경우에는 그 후에 언제든지 확인할 수 있습니다.

얼마 전 http://jsperf.com/forloops3 에서 간단한 성능 테스트를 해봤습니다.평범함을 고수하는 것 같아요, 늙은이for loop길에서)길 :)

제가 당신의 링크를 찾아갔을 때 여기 두 개의 번호가 있습니다.

$.each() + el(plain JS) 401
for() loop + plainJS[0] iteration   377

그 차이가 그렇게 작다면 가장 읽기 쉬운 것을 선택하십시오. 그러나 시간 요구 사항이 매우 높은 경우에는 가장 빠른 것을 선택해야 할 수도 있습니다.

위의 두 가지 방법을 사용할 수 있도록 프로그램을 작성한 후 새로운 버전의 자바스크립트에서 볼 수 있는 각각의 방법을 사용할 것을 제안하며, 이를 지원하지 않는 브라우저의 경우 프로토타입으로 추가할 수 있습니다.

https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach

여러분은 여러분의 요구사항과 프로그램이 무엇을 할 것인지 알고 있으므로, 여러분 자신의 테스트를 작성하고 여러분이 지원할 브라우저의 요구사항을 충족하는지 확인하기만 하면 됩니다.

당신의 첫번째 질문을 위해, 저는 다음과 같이 하겠습니다.$('element').each읽기가 훨씬 쉽기 때문입니다만, 그것은 단지 제 의견일 뿐입니다.

사실 $.each()와 $(.each() 사이에는 큰 차이가 있습니다.

그들은 여러분이 지나가는 것에 따라 약간 다른 일을 합니다.

http://api.jquery.com/each/ vs http://api.jquery.com/jquery.each/

jquery.each는 일반 반복기이며, 여기서 $($).each ()는 jquery 컬렉션에 고유합니다.

참고 항목: http://jsperf.com/each-vs-each-vs-for-in/9

언급URL : https://stackoverflow.com/questions/11887450/each-vs-for-loop-and-performance