ES6에서 필터링 또는 지도 노드 목록

ES6에서 필터링 또는 지도 노드 목록

ES6에서 노드 목록을 필터링하거나 매핑하는 가장 효율적인 방법은 무엇입니까?

판독한 내용에 따라 다음 옵션 중 하나를 사용합니다.

[...nodelist].filter

아니면

Array.from(nodelist).filter

어떤 것을 추천하시겠습니까?예를 들어 어레이를 사용하지 않는 더 나은 방법이 있습니까?

• [...nodelist]객체가 반복 가능한 경우 객체의 배열을 만듭니다.
• Array.from(nodelist)개체가 반복 가능하거나 개체가 배열과 유사한 경우 개체를 배열로 만듭니다(has.length및 숫자 소품)

만약 당신의 두가지 예는 동일할 것입니다.NodeList.prototype[Symbol.iterator]두 경우 모두 반복 가능성을 포함하기 때문에 존재합니다.사용자 환경이 다음과 같이 구성되지 않은 경우NodeList하지만, 당신의 첫번째 예는 실패하고, 두번째 예는 성공할 것입니다.Babel현재 이 케이스를 제대로 처리하지 않습니다.

그래서 만약 당신의NodeList사용 가능한가요? 사용하는 것은 정말로 당신에게 달려있습니다.저는 케이스 바이 케이스로 선택할 것 같습니다.의 한가지 이점Array.from첫번째는 매핑 함수의 두번째 인수가 필요하다는 것입니다.[...iterable].map(item => item)임시 배열을 만들어야 할 겁니다Array.from(iterable, item => item)안 그럴 겁니다그러나 목록을 매핑하지 않는 경우에는 상관 없습니다.

다음을 사용하는 참조를 찾았습니다.mapNodeList에 직접 연결할 수 있습니다.

Array.prototype.map.call(nodelist, fn)

테스트를 해보지는 않았지만 NodeList에 직접 접속해야 하기 때문에 더 빠를 것 같습니다.

TL;DR;

Array.prototype.slice.call(nodelist).filter

slice() 메서드는 배열을 반환합니다.반환된 어레이는 컬렉션의 얕은 복사본(NodeList)입니다. 따라서 보다 더 빠르게 작동합니다. 배열.from()따라서 Array.from()만큼 빠르게 작동합니다.

원래 컬렉션의 요소는 다음과 같이 반환된 배열로 복사됩니다.

• 실제 개체가 아닌 개체 참조의 경우 슬라이스는 개체 참조를 새 배열로 복사합니다.원래 배열과 새 배열 모두 동일한 개체를 나타냅니다.참조된 개체가 변경되면 새 배열과 원래 배열 모두에 변경 내용이 표시됩니다.
• 문자열, 숫자 및 부울런(String, Number 및 Boolean 개체가 아님)의 경우 슬라이스가 값을 새 배열로 복사합니다.한 배열에서 문자열, 숫자 또는 부울에 대한 변경 사항은 다른 배열에 영향을 주지 않습니다.

인수에 대한 간략한 설명

배열.원형.절편(beginIndex, endIndex)

• takes optional args begin인덱스 및 endIndex.슬라이스가 제공되지 않으면 사용을 시작합니다.인덱스 == 0이므로 컬렉션에서 모든 항목을 추출합니다.

배열.원형.slice.call(namespace, 시작)인덱스, endIndex)

• 개체를 첫 번째 인수로 사용합니다.컬렉션을 개체로 사용하면 말 그대로 해당 개체 네임스페이스에서 직접 슬라이스 메서드를 호출합니다.썰다

이거 어때:

// 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에 대한 MDN 문서에서 언급한 것과 동일한 접근 방식입니다. 각 문서('Polyfill' 아래)는 IE11, Edge, Chrome 및 FF에서 작동합니다.

[...a].filter.Array.from(a).filter

"" 만을 의합니다.Array.from다를 새로 것이 에 아주 더 수 .Array"JS 레벨"에 있지만 네이티브 코드에서 직접 발생합니다.

성능 - 둘 중 하나를 사용하지 않는 것을 고려합니다.

그러나 성능을 위해(또한 방지하기 위해) "Array-ing") 당신은 왜 당신이 a를 필터링하는지 고려해야 합니다.NodeList어디서/어떻게 구하셨습니까?많은 경우 특정 요소를 원하는 경우는 다음 중 하나입니다.id또는 그에 의해서class또는 다른 CSS 셀렉터를 선택합니다.

document.querySelectorAll10배 - 200배 더 빠르며 모든 CSS 셀렉터에서 작동합니다.
document.getElementById (합니다.)id)

를 할 수도 .querySelectorAll " 알 수 없는"를 무시할 수 있습니다 할"는 저장된다은을는합니다.

let mainbar = document.getElementById('mainbar');
mainbar.querySelectorAll('.flex--item');

보다 거의 10배 빠릅니다.

Array.from(a).filter(el => el.classList.contains("flex--item"))

또한 알아두시기 바랍니다.document.querySelectorAll('#mainbar .flex--item');약 5 약 .Array를 사전g하는 약 속도로약 2다를 저장합니다.id.

성능이 향상되는 것 외에도 항상 다음과 같은 이점을 얻을 수 있습니다(빈 공간일 수도 있지만 여전히 그렇습니다).NodeList) 그리고 그것은 모두에게 적용됩니다.

ECMAS 2016 사용:

let nodes = [...document.querySelector('__SELECTOR__').childNodes].filter(item => item.nodeType === 1);

ES6의 필터 또는 맵 노드 리스트는 이 간단한 기능에서 나왔습니다.https://developer.mozilla.org/fr/docs/Web/API/NodeList/entries#exemple 참조

function filterNodeList(NodeList, callback) {
            if (typeof callback !== "function") callback = (i) => i; // Any better idea?
            const Result = document.createElement("div");
            
    //# No need to filter empty NodeList
            if (NodeList.length === 0) return NodeList;
        
            for (let i = 0; i < NodeList.length; i++) {
              if (callback(NodeList.item(i))){
                 Result.appendChild(NodeList.item(i));
                 i--; //If you don't want to clone
              }
            }
            return Result.childNodes;
     }

언급URL : https://stackoverflow.com/questions/32765157/filter-or-map-nodelists-in-es6