속도 질문 jquery.each vs. 루프

바닐라 JavaScript 루프 vs. jQuery.Each : 성능 비교 이 기사는 바닐라 JavaScript

루프 사용과 배열 반복을위한 jQuery의

메소드 사이의 성능 차이를 탐구합니다. 우리는 속도를 위해 바닐라

루프, 특히 가변 캐싱이있는 루프가 for를 상당히 능가한다는 것을 보여줍니다. 이로 인해 JSPERF 벤치 마크 (Brevity)에 표시된 링크가 생략되지만 쉽게 검색 할 수있는 링크). $.each for $.each jQuery.Each 예 :

가변 캐싱이있는 루프의 경우 (가장 빠른) :

가변 캐싱이없는 루프의 경우 : 사전 계산 길이 시도 :

(캐시 버전과 유사한 성능)

<code class="language-javascript">$.each(myArray, function() {
  let currentElement = this; 
  // ... your code using currentElement ...
});</code>

자주 묻는 질문 (faqs) :

이 기사는 성능에 중점을두고 있지만

<code class="language-javascript">const len = myArray.length;
for (let i = 0; i < len; i++) {
  let currentElement = myArray[i];
  // ... your code using currentElement ...
}</code>

와

중에서 선택하기위한 주요 차이점과 고려 사항에 대한 요약은 다음과 같습니다. 기능 : jQuery 's

반복은 어레이와 객체를 통해 간결한 구문을 제공합니다. 루프는 반복을보다 직접적으로 제어 할 수 있습니다

<code class="language-javascript">for (let i = 0; i < myArray.length; i++) {
  let currentElement = myArray[i];
  // ... your code using currentElement ...
}</code>

성능 : 루프 (특히 가변 캐싱의 경우)는 일반적으로 기능 통화 오버 헤드 감소로 인해 더 빠릅니다. 더 큰 데이터 세트에서 차이가 더욱 두드러집니다

가독성 :

는 간단한 반복에 대한 코드 가독성을 향상시킬 수 있습니다. 루프는 더 명백합니다

<code class="language-javascript">let len = myArray.length;
let i = 0;
for (; i < len; i++) {
  let currentElement = myArray[i];
  // ... your code using currentElement ...
}</code>

루프를 깨기 : 콜백에서 리턴

리턴은 루프를 깨뜨립니다. 루프 사용

. $.each for 색인 액세스 : 둘 다 현재 색인에 대한 액세스를 제공합니다 (다르게).

NODELIST/HTMLCOLLECTION :
• NODELIST 및 HTMLCOLLECTION과 함께 작동하지만

  는 jQuery 객체가 아닌 DOM 요소를 나타냅니다. jQuery 메소드를 사용하려면 로 랩하십시오 $.each 기본 for : javaScript의 기본 는 와 유사한 구문을 제공하지만 jQuery의 구현보다 잠재적으로 더 나은 성능을 제공합니다.

• 객체 반복 : 둘 다 객체 위에 반복 할 수 있습니다 for 스파 스 어레이 :

  는 스파 스 어레이로 정의되지 않은 인덱스를 건너 뜁니다.
• 체인 :

  다른 jQuery 방법과 마찬가지로 체인을 지원하지 않습니다 $.each 요약하면, 특히 큰 데이터 세트를 처리 할 때 최적의 성능을 위해 바닐라 JavaScript

  루프를 가변 캐싱으로 우선 순위를 정합니다. jQuery의 는 더 작은 데이터 세트 또는 가독성이 가장 중요 할 때 더 편리합니다. jQuery 's .

위 내용은 속도 질문 jquery.each vs. 루프의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!