JavaScript NodeList를 Array로 변환하는 가장 빠른 방법은 무엇입니까?

이전에 답변 된 질문에 따르면 이것이 가장 빠른 방법이라고합니다.

//nl is a NodeList
var arr = Array.prototype.slice.call(nl);

내 브라우저에서 벤치마킹 할 때 이보다 3 배 이상 느립니다.

var arr = [];
for(var i = 0, n; n = nl[i]; ++i) arr.push(n);

둘 다 동일한 출력을 생성하지만 특히 사람들이 다르게 말했기 때문에 두 번째 버전이 가장 빠른 방법이라고 믿기가 어렵습니다.

내 브라우저 (Chromium 6)의 기발한가요? 아니면 더 빠른 방법이 있습니까?

편집 : 관심있는 사람은 다음을 결정했습니다 (테스트 한 모든 브라우저에서 가장 빠른 것 같습니다).

//nl is a NodeList
var l = []; // Will hold the array of Node's
for(var i = 0, ll = nl.length; i != ll; l.push(nl[i++]));

EDIT2 : 더 빠른 방법을 찾았습니다

// nl is the nodelist
var arr = [];
for(var i = nl.length; i--; arr.unshift(nl[i]));

두 번째 브라우저는 일부 브라우저에서 더 빠르지 만 주요 요점은 첫 번째 브라우저가 브라우저 간이 아니기 때문에 사용해야한다는 것입니다. 비록 그들이 타임즈 임에도 불구하고

@kangax ( IE 9 미리보기 )

Array.prototype.slice 는 이제 특정 호스트 객체 (예 : NodeList)를 배열로 변환 할 수 있습니다. 이는 대부분의 최신 브라우저에서 꽤 오랫동안 할 수 있었던 것입니다.

예:

Array.prototype.slice.call(document.childNodes);

ES6을 사용하면 NodeList에서 Array.from()함수 를 만드는 간단한 방법이 생겼습니다 .

// nl is a NodeList
let myArray = Array.from(nl)

다음은 ES6 스프레드 연산자를 사용하여 새롭고 멋진 방법입니다 .

let arr = [...nl];

일부 최적화 :

• NodeList의 길이를 변수에 저장
• 설정하기 전에 새 배열의 길이를 명시 적으로 설정하십시오.
• 밀거나 움직이지 않고 인덱스에 액세스하십시오.

코드 ( jsPerf ) :

var arr = [];
for (var i = 0, ref = arr.length = nl.length; i < ref; i++) {
 arr[i] = nl[i];
}

결과는 브라우저에 전적으로 의존하고 객관적인 평결을 내기 위해 성능 테스트를해야합니다. 여기에 몇 가지 결과가 있습니다. 여기에서 실행할 수 있습니다 .

크롬 6 :

Firefox 3.6 :

Firefox 4.0b2 :

사파리 5 :

IE9 플랫폼 미리보기 3 :

가장 빠르고 교차 브라우저는

for(var i=-1,l=nl.length;++i!==l;arr[i]=nl[i]);

내가 비교할 때

http://jsbin.com/oqeda/98/edit

* 아이디어에 대한 @CMS 감사합니다!

ES6에서는 다음 중 하나를 사용할 수 있습니다.

• 배열

  let array = Array.from(nodelist)

• 스프레드 연산자

  let array = [...nodelist]

NodeList.prototype.forEach = Array.prototype.forEach;

이제 document.querySelectorAll ( 'div'). forEach (function () ...) 할 수 있습니다

더 빠르고 더 짧은 :

// nl is the nodelist
var a=[], l=nl.length>>>0;
for( ; l--; a[l]=nl[l] );

이 블로그 게시물 확인 여기에 같은 일에 대해 그 대화를. 내가 수집 한 것에서 추가 시간은 스코프 체인을 걷는 것과 관련이있을 수 있습니다.

이것은 내 JS에서 사용하는 기능입니다.

function toArray(nl) {
    for(var a=[], l=nl.length; l--; a[l]=nl[l]);
    return a;
}

다음은이 게시 날짜를 기준으로 업데이트 된 차트입니다 ( "알 수없는 플랫폼"차트는 Internet Explorer 11.15.16299.0입니다).

이 결과에서 사전 할당 1 방법이 가장 안전한 크로스 브라우저 내기 인 것으로 보입니다.

가정하면 nodeList = document.querySelectorAll("div"), 이것은 간결한 형태의 nodelist배열 로 변환 하는 것입니다.

var nodeArray = [].slice.call(nodeList);

여기에서 사용 하십시오 .