> 웹 프론트엔드 > JS 튜토리얼 > es6에서 변수가 배열인지 확인하는 방법

es6에서 변수가 배열인지 확인하는 방법

青灯夜游
풀어 주다: 2022-03-08 16:50:22
원래의
3454명이 탐색했습니다.

es6에서는 Array의 isArray() 메서드를 사용하여 변수가 배열인지 여부를 확인할 수 있습니다. 이 메서드는 객체가 배열 유형인지 확인하는 데 사용됩니다. 객체가 배열이면 true를 반환합니다. 그렇지 않으면 false를 반환합니다.

es6에서 변수가 배열인지 확인하는 방법

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

ES5에서 변수가 배열인지 확인

ES5에는 값이 배열인지 확인하는 최소한 다음 5가지 방법이 있습니다.

var a = []; 
// 1.基于instanceof 
a instanceof Array; 
// 2.基于constructor 
a.constructor === Array; 
// 3.基于Object.prototype.isPrototypeOf 
Array.prototype.isPrototypeOf(a); 
// 4.基于getPrototypeOf 
Object.getPrototypeOf(a) === Array.prototype; 
// 5.基于Object.prototype.toString 
Object.prototype.toString.apply(a) === '[object Array]';
로그인 후 복사

위 항목, Object 제외. 프로토타입.toString</ code>를 제외하고 다른 메소드는 변수 유형을 올바르게 판별할 수 없습니다. <code>Object.prototype.toString外,其它方法都不能正确判断变量的类型。

要知道,代码的运行环境十分复杂,一个变量可能使用浑身解数去迷惑它的创造者。且看

var a = {
    __proto__: Array.prototype
}; 
// 分别在控制台试运行以下代码 
// 1.基于instanceof 
a instanceof Array; // => true 
// 2.基于constructor 
a.constructor === Array; // => true 
// 3.基于Object.prototype.isPrototypeOf 
Array.prototype.isPrototypeOf(a); // => true 
// 4.基于getPrototypeOf 
Object.getPrototypeOf(a) === Array.prototype; // => true
로그인 후 복사

以上,4种方法将全部返回true,为什么呢?我们只是手动指定了某个对象的__proto__属性为Array.prototype,便导致了该对象继承了Array对象,这种毫不负责任的继承方式,使得基于继承的判断方案瞬间土崩瓦解。

不仅如此,我们还知道,Array是堆数据,变量指向的只是它的引用地址,因此每个页面的Array对象引用的地址都是不一样的。iframe中声明的数组,它的构造函数是iframe中的Array对象。如果在iframe声明了一个数组x,将其赋值给父页面的变量y,那么在父页面使用y instanceof Array ,结果一定是false的。而最后一种返回的是字符串,不会存在引用问题。实际上,多页面或系统之间的交互只有字符串能够畅行无阻。

在ES6中判断变量是否为数组

鉴于数组的常用性,在ES6中新增了Array.isArray方法,使用此方法判断变量是否为数组,则非常简单,如下:

Array.isArray([]); // => true 
Array.isArray({0: &#39;a&#39;, length: 1}); // => false
로그인 후 복사

实际上,通过Object.prototype.toString

코드의 실행 환경은 매우 복잡하고 변수는 작성자를 혼란스럽게 하기 위해 온갖 종류의 트릭을 사용할 수 있다는 점을 알아야 합니다. 위의

if (!Array.isArray){ 
    Array.isArray = function(arg){ 
        return Object.prototype.toString.call(arg) === &#39;[object Array]&#39;; 
    }; 
}
로그인 후 복사
를 살펴보겠습니다. 4가지 메서드가 모두 true를 반환합니다. 우리는 객체의 __proto__ 속성을 Array.prototype으로 수동으로 지정했는데, 이로 인해 객체가 Array 객체를 상속하게 되었습니다. 이 무책임한 상속 방식으로 인해 상속에 따른 판단 체계가 즉시 붕괴되었습니다. 그뿐만 아니라 Array는 힙 데이터이고 변수는 참조 주소만 가리키므로 각 페이지의 Array 개체가 참조하는 주소가 다릅니다. iframe에 선언된 배열의 경우 해당 생성자는 iframe의 Array 객체입니다. 배열 x가 iframe에서 선언되고 상위 페이지의 변수 y에 할당된 경우 상위 페이지에서 배열의 y 인스턴스가 사용되며 결과는 false여야 합니다. 마지막 것은 문자열을 반환하므로 참조 문제가 없습니다. 실제로 여러 페이지나 시스템 간의 상호 작용은 문자열을 통해서만 가능합니다. 🎜🎜 ES6에서 변수가 배열인지 확인🎜🎜🎜🎜배열의 일반적인 용도를 고려하여 ES6에서는 Array.isArray 메서드를 추가했습니다. 이 메서드를 사용하면 변수가 배열인지 확인하는 것이 매우 간단합니다. 🎜rrreee 🎜사실 Object.prototype.toString을 사용하여 값의 유형을 결정하는 것도 주요 주류 라이브러리의 표준입니다. 따라서 Array.isArray의 폴리필은 일반적으로 다음과 같습니다: 🎜rrreee🎜[관련 권장 사항: 🎜javascript 비디오 튜토리얼🎜, 🎜web front-end🎜]🎜

위 내용은 es6에서 변수가 배열인지 확인하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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