[JavaScript] 동위원소 XPathResult 객체를iterable로 설정

7269 단어 JavaScirptxpath

문제.


document.evaluate 네 번째 매개 변수에 다음 중 하나를 지정한 경우 전용 균형기를 되돌려줍니다.
  • XPathResult.UNORDERED_NODE_ITERATOR_TYPE
  • XPathResult.ORDERED_NODE_ITERATOR_TYPE
  • 단, 이 균형기가 충족되지 않아iterable 프로토콜for...of 또는 Array.from()
    const getHeaders = () => {
      const resultType = XPathResult.ORDERED_NODE_ITERATOR_TYPE;
      return document.evaluate('//h1', document, null, resultType, null);
    };
    
    const xPathResult1 = getHeaders();
    for (const node of xPathResult1) console.log(node);
    // Uncaught TypeError: xPathResult is not iterable
    
    const xPathResult2 = getHeaders();
    Array.from(xPathResult2);
    // []
    
    const xPathResult3 = getHeaders();
    [...xPathResult3]
    // Uncaught TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator))
    

    해결책


    Generator 객체로 변환할 수 있습니다.Generator 대상은iterable 프로토콜을 따르기 때문입니다.
    const getHeaders = () => {
      const resultType = XPathResult.ORDERED_NODE_ITERATOR_TYPE;
      return document.evaluate('//h1', document, null, resultType, null);
    };
    
    // イテレータ型の XPathResult オブジェクトを Generator オブジェクトに変換する。
    const makeIterable = function*(xPathResult) {
      while (true) {
        const node = xPathResult.iterateNext();
        if (!node) break;
        yield node;
      }
    };
    
    const xPathResult1 = getHeaders();
    for (const node of makeIterable(xPathResult1)) console.log(node);
    // h1
    // h1
    // h1
    
    const xPathResult2 = getHeaders();
    Array.from(makeIterable(xPathResult2));
    // [h1, h1, h1]
    
    const xPathResult3 = getHeaders();
    [...makeIterable(xPathResult3)];
    // [h1, h1, h1]
    

    참고 자료

  • MDN
  • Introduction to using XPath in JavaScript
  • 반복 처리 프로토콜
  • Generator
  • 좋은 웹페이지 즐겨찾기