자바스크립트에서 배열과 유사한 객체를 배열로 변환하는 방법

JavaScript에서 배열형 객체는 숫자 키가 있고 길이 속성이 있는 모든 객체입니다. 예를 들어 DOM의 NodeList 개체와 함수의 인수 개체는 배열과 유사한 개체입니다. 어떤 경우에는 데이터를 보다 편리하게 조작하기 위해 배열과 유사한 객체를 실제 배열로 변환해야 합니다. 이 기사에서는 배열 유사 객체를 배열로 변환하는 세 가지 방법을 소개합니다.

방법 1: 배열의 슬라이스 메소드

첫 번째 방법은 배열의 슬라이스() 메소드를 사용하는 것으로, 시작 인덱스부터 끝 인덱스까지 요소의 섹션을 새 배열에 복사할 수 있습니다. call()이나 apply()를 사용하여 배열형 객체에 Slice() 메서드를 적용할 수 있습니다.

예를 들어 다음 코드를 사용하여 NodeList 개체를 배열로 변환할 수 있습니다.

const nodeList = document.querySelectorAll('li');
const array = Array.prototype.slice.call(nodeList);

이 예에서는 먼저 querySelectorAll() 메서드를 사용하여 li 요소의 NodeList 개체를 가져옵니다. 그런 다음 Array.prototype.slice.call() 메서드를 사용하여 NodeList 객체를 배열로 변환합니다.

방법 2: Array.from() 사용

두 번째 방법은 Array.from() 메서드를 사용하는 것입니다. 이 메서드는 유사 배열 객체나 반복 가능한 객체를 실제 배열로 변환합니다. Array.from() 메서드의 첫 번째 매개변수는 변환할 객체이고, 두 번째 매개변수는 각 요소에 적용될 선택적 매핑 함수입니다.

예를 들어 다음 코드를 사용하여 NodeList 개체를 배열로 변환할 수 있습니다.

const nodeList = document.querySelectorAll('li');
const array = Array.from(nodeList);

이 예에서는 먼저 querySelectorAll() 메서드를 사용하여 li 요소의 NodeList 개체를 가져옵니다. 그런 다음 Array.from() 메서드를 사용하여 NodeList 객체를 배열로 변환합니다.

방법 3: 스프레드 연산자 사용

세 번째 방법은 스프레드 연산자를 사용하는 것입니다… 이 연산자는 반복 가능한 객체를 일련의 매개변수로 확장합니다. 이를 빈 배열에 적용한 다음 배열과 유사한 객체를 해당 배열에 삽입할 수 있습니다.

예를 들어 다음 코드를 사용하여 NodeList 개체를 배열로 변환할 수 있습니다.

const nodeList = document.querySelectorAll('li');
const array = [...nodeList];

이 예에서는 먼저 querySelectorAll() 메서드를 사용하여 li 요소의 NodeList 개체를 가져옵니다. 그런 다음 스프레드 연산자를 사용하여 NodeList 객체를 배열로 변환합니다.

요약

위의 세 가지 방법을 사용하면 배열형 객체를 실제 배열로 변환할 수 있습니다. 방법을 선택할 때는 코드 가독성과 성능을 고려해야 합니다. 많은 양의 데이터를 변환해야 하는 경우 더 성능이 좋은 방법을 사용하세요. 가독성이 더 중요하다면 더 읽기 쉬운 방법을 사용하세요.

위 내용은 자바스크립트에서 배열과 유사한 객체를 배열로 변환하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!