HTMLCollection을 JavaScript의 배열로 효율적으로 변환하는 방법은 무엇입니까?

HTMLCollection을 배열로 효율적으로 변환

HTML 문서의 요소 모음인 HTMLCollection을 배열로 변환하는 것은 일반적인 작업입니다. 웹 개발 중. 각 항목을 반복하고 배열에 수동으로 복사하는 작업은 비효율적일 수 있습니다.

"네이티브" 코드 솔루션

보다 효율적인 접근 방식은 네이티브 JavaScript를 사용하는 것입니다. 메서드 Array.prototype.slice.call():

var arr = Array.prototype.slice.call(htmlCollection);

이 메서드는 htmlCollection 개체의 요소가 포함된 배열을 반환합니다.

간결한 표현식

구문이 장황할 수 있으므로 더 간결한 표현은 다음과 같습니다.

var arr = [].slice.call(htmlCollection);

ES6 Solutions

ES6(ECMAScript 2015)에서는 추가 옵션을 도입했습니다.

• Array.from(): HTMLCollection과 같은 반복 가능한 객체를 배열로 변환합니다.

var arr = Array.from(htmlCollection);

• 확산 연산자: 반복 가능한 객체를 배열로 압축 해제합니다.

var arr = [...htmlCollection];

성능 비교

벤치마크(예: https:// jsben.ch/h2IFA) 다음 메서드의 성능이 비슷하다는 것을 보여줍니다.

• Array.prototype.slice.call()
• [].slice.call()
• Array.from()

확산 연산자는 약간 느리지만 간결한 구문으로 인해 선호될 수 있습니다.

따라서 HTMLCollection을 변환하는 가장 효율적인 방법은 개발자의 특정 요구 사항과 선호도에 따라 배열이 달라집니다.

위 내용은 HTMLCollection을 JavaScript의 배열로 효율적으로 변환하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!