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

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
es6数组怎么去掉重复并且重新排序es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

JavaScript的Symbol类型、隐藏属性及全局注册表详解JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

原来利用纯CSS也能实现文字轮播与图片轮播!原来利用纯CSS也能实现文字轮播与图片轮播!Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

JavaScript对象的构造函数和new操作符(实例详解)JavaScript对象的构造函数和new操作符(实例详解)May 10, 2022 pm 06:16 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

JavaScript面向对象详细解析之属性描述符JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

javascript怎么移除元素点击事件javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

整理总结JavaScript常见的BOM操作整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

foreach是es6里的吗foreach是es6里的吗May 05, 2022 pm 05:59 PM

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

WebStorm Mac 버전

WebStorm Mac 버전

유용한 JavaScript 개발 도구

SublimeText3 Linux 새 버전

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전

ZendStudio 13.5.1 맥

ZendStudio 13.5.1 맥

강력한 PHP 통합 개발 환경

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

SublimeText3 영어 버전

SublimeText3 영어 버전

권장 사항: Win 버전, 코드 프롬프트 지원!