> 웹 프론트엔드 > 프런트엔드 Q&A > 자바스크립트의 의사 배열이란 무엇입니까?

자바스크립트의 의사 배열이란 무엇입니까?

青灯夜游
풀어 주다: 2021-10-19 16:47:15
원래의
2780명이 탐색했습니다.

JavaScript에서 유사 배열(Array-Like Object)이라고도 하는 의사 배열은 인덱스에 따라 데이터를 저장하고 길이 속성을 갖는 배열 유사 객체입니다. push() 및 forEach 함수() 및 기타 메서드.

자바스크립트의 의사 배열이란 무엇입니까?

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

의사 배열의 정의 및 특징

유사 배열이라고도 알려진 유사 배열(ArrayLike). 인덱스에 따라 데이터를 저장하고 길이 속성을 갖는 배열형 객체입니다. 그러나 다음과 같은 특징이 있습니다.

  • 색인별로 데이터 저장

    0: xxx, 1: xxx, 2: xxx...0: xxx, 1: xxx, 2: xxx...

  • 具有length属性

    但是length

  • 에는 length 속성이 있지만

    length 속성은 동적이지 않으며 멤버가 변경되어도 변경되지 않습니다.

배열 push(), forEach() 및 기타 메서드가 없습니다.

arrayLike.__proto__ === Object.prototype;   //true 
arrayLike instanceof Object; //true 
arrayLike instanceof Array; //false
로그인 후 복사

일반적인 의사 배열, jQuery에서 $()를 통해 얻은 DOM 요소 집합, 함수의 인수 객체 및 String 객체를 포함합니다.

예:

    var arrLike = {
        0: 'a',
        1: 'b',
        2: 'c',
        length: 3,
    }
    arrLike[1]; //'a'
    arrLike.length; //3
    arrLike.push('d'); //Uncaught TypeError: arrLike.push is not a function
로그인 후 복사

의사 배열을 실제 배열로 변환하는 방법

    var arrLike = {
        0: 'a',
        1: 'b',
        2: 'c',
        length: 3,
    };
로그인 후 복사

1. 빈 배열을 탐색하고 추가합니다

    var arr = [];
    for(var i = 0; i < arrLike.length; i++){
        arr.push(arrLike[i]);
    }
로그인 후 복사

비교적 간단하고 이해하기 쉽지만 단계가 약간 번거롭습니다.

2. 배열의 Slice() 메소드를 사용하세요. [권장]

    ;[].slice.call(arrLike);
로그인 후 복사

또는

    Array.prototype.slice.apply(arrLike);
로그인 후 복사

새로운 배열을 반환하려면 Slice()를 사용하고, 해당 환경을 가리키려면 call() 또는 Apply()를 사용하세요. 의사 배열.

인덱스 값 이외의 추가 속성은 반환된 배열에 유지되지 않습니다.

예를 들어 jQuery에서 $()로 얻은 DOM 의사 배열의 컨텍스트 속성은 이 메서드로 변환된 후에 유지되지 않습니다.

slice()의 내부 구현을 시뮬레이션

    Array.prtotype.slice = function(start, end){
        var result = new Array();
        var start = start | 0;
        var end = end | this.length;
        for(var i = start; i < end; i++){
            result.push(this[i]);
        }
        return result;
    }
로그인 후 복사

3. 프로토타입 포인터 수정

    arrLike.__proto__ = Array.prototype;
로그인 후 복사
이러한 방식으로 arrLike는 Array.prototype의 메서드를 상속하며 push(), unshift() 및 기타를 사용할 수 있습니다. 메소드, 길이 값 또한 동적으로 변경됩니다.

또한 프로토타입 체인을 직접 수정하는 이 방법은 인덱스 값이 아닌 속성을 포함하여 의사 배열의 모든 속성도 유지합니다.

4. ES2015의 Array.from() 메서드

Array.from() 메서드는 유사 배열 또는 반복 가능 객체에서 새 배열 인스턴스를 생성합니다.

    var arr = Array.from(arrLike);
로그인 후 복사

얻은 결과는 두 번째 방법과 유사하며 인덱스 값 내의 속성만 유지됩니다. 🎜🎜【추천 학습: 🎜javascript 고급 튜토리얼🎜】🎜

위 내용은 자바스크립트의 의사 배열이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿