'for/of'를 사용하여 HTMLCollection을 반복하는 것이 때때로 실패하는 이유는 무엇이며 대안은 무엇입니까?

for/of를 사용하여 HTMLCollection 반복

for/of를 사용하여 HTMLCollection을 반복하려고 하면 예기치 않은 결과가 발생할 수 있습니다. 이 문제가 발생하는 이유를 자세히 알아보고 HTMLCollection 요소를 반복하는 대체 접근 방식을 살펴보겠습니다.

for/in이 실패하는 이유

for/in 사용 시 문제는 반복된다는 것입니다. 객체의 요소가 아니라 객체의 속성입니다. HTMLCollection은 배열과 유사한 객체입니다. 즉, 인덱스에 요소가 포함되어 있습니다. 그러나 길이 및 명명된 항목과 같은 속성도 있습니다.

HTMLCollection에서 for/in을 사용하면 요소 인덱스(0, 1, 2, ...)와 컬렉션 속성이 모두 반환됩니다. 이로 인해 일부 반복은 요소 ID를 반환하고 다른 반복은 정의되지 않은(요소가 아닌 속성) 반환되는 예기치 않은 출력이 발생합니다.

대체 반복 방법

이러한 문제를 방지하려면 다음이 필요합니다. 에 대한 몇 가지 대안이 있습니다 for/in:

• for/of Loop:

  최신 브라우저는 HTMLCollection 및 NodeList 개체의 반복을 지원합니다. 이는 가장 간단하고 직접적인 접근 방식입니다.

    var list = document.getElementsByClassName("events");
    for (let item of list) {
     console.log(item.id);
    }

• Array.from():

  ES6에서는 Array.from()을 도입했습니다. 배열과 유사한 객체를 실제 배열로 변환하는 메서드입니다. 그런 다음 for/of를 사용하여 반복할 수 있습니다.

  Array.from(document.getElementsByClassName("events")).forEach(item => {
      console.log(item.id);
  });

• 배열 반복자를 수동으로 추가:

  이를 수행하지 않는 브라우저에서 기본적으로 지원되므로 HTMLCollection 또는 NodeList에 Array 반복자를 수동으로 추가할 수 있습니다. 프로토타입.

  NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
  HTMLCollection.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
  
  // Use for/of as with modern browsers
  for (let item of list) {
      console.log(item.id);
  }

• 길이 속성이 있는 루프:

  보다 전통적인 접근 방식은 다음까지 반복하는 for 루프를 사용하는 것입니다.

  var list = document.getElementsByClassName("events");
  for (var i = 0; i < list.length; i++) {
      console.log(list[i].id);
  }

이를 활용하여 대체 방법을 사용하면 HTMLCollection의 요소를 효과적으로 반복하고 해당 ID를 포함한 해당 속성에 액세스할 수 있습니다.

위 내용은 'for/of'를 사용하여 HTMLCollection을 반복하는 것이 때때로 실패하는 이유는 무엇이며 대안은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!