ES6에서 노드 목록을 필터링하거나 매핑하는 가장 효율적인 방법은 무엇입니까?
내 측정 값에 따라 다음 옵션 중 하나를 사용합니다.
[...nodelist].filter
또는
Array.from(nodelist).filter
어느 것을 추천 하시겠습니까? 예를 들어 어레이를 사용하지 않는 더 좋은 방법이 있습니까?
ES6에서 노드 목록을 필터링하거나 매핑하는 가장 효율적인 방법은 무엇입니까?
내 측정 값에 따라 다음 옵션 중 하나를 사용합니다.
[...nodelist].filter
또는
Array.from(nodelist).filter
어느 것을 추천 하시겠습니까? 예를 들어 어레이를 사용하지 않는 더 좋은 방법이 있습니까?
...
구문은 이전 IDE에서 지원되지 않을 수 있지만 Array.from()
일반적인 방법입니다.
답변:
[...nodelist]
객체가 반복 가능한 경우 객체에서 배열을 만듭니다.Array.from(nodelist)
객체가 반복 가능 하거나 객체가 배열과 같은 경우 (has .length
및 numeric props) 객체에서 배열을 만듭니다.NodeList.prototype[Symbol.iterator]
두 경우 모두 iterable을 다루기 때문에 두 예제가 있으면 동일합니다 . 그러나 환경 NodeList
이 반복 가능 하도록 구성되지 않은 경우 첫 번째 예제는 실패하고 두 번째 예제는 성공합니다. Babel
현재이 사건을 제대로 처리하지 못하고 있습니다 .
그래서 당신 NodeList
이 반복 가능 하다면 , 당신이 사용하는 것은 당신에게 달려 있습니다. 나는 사례별로 선택할 것입니다. 한 가지 이점은 Array.from
매핑 함수의 두 번째 인수를 사용하는 반면 첫 번째 [...iterable].map(item => item)
는 임시 배열을 만들어야하지만 Array.from(iterable, item => item)
그렇지 않다는 것입니다. 그러나 목록을 매핑하지 않는 경우에는 중요하지 않습니다.
TL; DR;
Array.prototype.slice.call(nodelist).filter
slice () 메서드는 배열을 반환합니다. 반환되는 배열 회수 (NodeList의)의 얕은 복사는 것을
이보다 더 빨리 작동 그래서 Array.from ()
가 최대한 빨리 작동 그래서 ) (Array.from
원본 컬렉션의 요소는 다음과 같이 반환 된 배열에 복사됩니다.
인수에 대한 간단한 설명
Array.prototype.slice (beginIndex, endIndex)
Array.prototype.slice.call (네임 스페이스, beginIndex, endIndex)
Array.from
되지 않는지 궁금합니다 . IE 시스템을 찾을 시간입니다. 이제 IE10과 IE11에서 Array.from을 사용할 수 있었기 때문에 정말 혼란 스럽습니다. 이 방법은 IE10 + 11에서 작동하지만 모든 문서에서 달리 언급 할 때 Array.from이 작동하는 것에 의해 완화되지 않습니다.
Array.from
IE11에서 작동하지 않습니다. 개체가 'from'속성 또는 메서드를 지원하지 않습니다
Array.from
또한 얕은 복사본을 반환합니다. 따라서 .NET보다 빠르게 작동 한다고 결론 을 내리지 못합니다 Array#slice
.
이것은 어떤가요:
// Be evil. Extend the prototype.
if (window.NodeList && !NodeList.prototype.filter) {
NodeList.prototype.filter = Array.prototype.filter;
}
// Use it like you'd expect:
const noClasses = document
.querySelectorAll('div')
.filter(div => div.classList.length === 0)
NodeList.forEach ( 'Polyfill'아래) 에 대한 MDN 문서 에서 언급 한 것과 동일한 접근 방식 이며 IE11 , Edge, Chrome 및 FF에서 작동합니다.
babel
다음[...coll]
단순히 호출Array.from(coll)
없는 아무것도Array
.