[javascript] 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 감사합니다!

크롬 (Chrome과 유사)
Firefox
오페라


답변

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

  • 배열

    let array = Array.from(nodelist)

  • 스프레드 연산자

    let array = [...nodelist]