How to determine whether a variable is an array in es6

青灯夜游
Release: 2023-01-18 18:17:21
Original
1385 people have browsed it

Judgment method: 1. Use the isArray() function of the Array object to determine whether the variable is an array. The syntax is "Array.isArray(obj)". If it is an array, it returns true, otherwise it returns false. 2. Judge by "Object.prototype.toString()", the syntax is "Object.prototype.toString.apply(a) === '[object Array]'".

How to determine whether a variable is an array in es6

The operating environment of this tutorial: Windows 7 system, ECMAScript version 6, Dell G3 computer.

The weak type mechanism of JS makes judging variable types a required question during interviews for junior front-end developers. Generally, I will use this as the first question when examining candidates, and then proceed based on this.

Determine whether a variable is an array in ES5

In ES5, we have at least the following 5 ways to determine whether a value is an array:

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]';
Copy after login

Above, except Object.prototype.toString, no other method can correctly determine the type of the variable.

You must know that the running environment of the code is very complex, and a variable may use all kinds of tricks to confuse its creator. Let’s take a look:

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
Copy after login

Above, all four methods will return true. Why? We just manually specified the __proto__ attribute of an object as Array.prototype, which caused the object to inherit the Array object. This irresponsible inheritance method caused the judgment scheme based on inheritance to instantly fall apart.

Not only that, we also know that Array is heap data, and the variable only points to its reference address, so the address referenced by the Array object of each page is different. For an array declared in an iframe, its constructor is the Array object in the iframe. If an array x is declared in the iframe and assigned to the variable y of the parent page, then y instanceof Array is used on the parent page, and the result must be false. The last one returns a string, so there is no reference problem. In fact, interactions between multiple pages or systems are only possible with strings.

Determine whether a variable is an array in ES6

In view of the common use of arrays, the Array.isArray method is added in ES6, use This method is very simple to determine whether a variable is an array, as follows:

Array.isArray([]); // => true 
Array.isArray({0: 'a', length: 1}); // => false
Copy after login

In fact, it is also a standard for major mainstream libraries to determine the type of a value through Object.prototype.toString. Therefore, the polyfill of Array.isArray usually looks like this:

if (!Array.isArray){ 
    Array.isArray = function(arg){ 
        return Object.prototype.toString.call(arg) === '[object Array]'; 
    }; 
}
Copy after login

[Related recommendations: javascript learning tutorial]

The above is the detailed content of How to determine whether a variable is an array in es6. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template