What is the correct way to detect JavaScript arrays

Previous words

For determining whether an object is an array, it has always been a classic problem with arrays. This article specifically selects the problem and describes what is the correct way to detect JavaScript arrays

typeof

First, use the most commonly used type detection tool, the--typeof operator

var arr = [1,2,3];console.log (typeof arr);//' object '

As already mentioned, the essence of an array is a special object, so return ' object '. The typeof operator can only be used to differentiate between primitive types and object types, and is not identifiable for more specific object types

instanceof

At this point, the instanceof operator exits, and the instanceof operator is used to determine whether an object is an instance of a particular constructor

var arr = [1,2,3];console.log (arr instanceof array);//truevar str = ' 123 '; Console.log (str instanceof array);//false

It looks very practical. However, the classic scenario of array detection is introduced--the page contains multiple frames

"1" first creates a parent page box.html and a child page in.html, where the parent page contains the child pages through the IFRAME

Sub-page is empty//parent page <iframe name= "Child" src= "in.html" ></iframe>

"2" tests the communication of parent and child pages, be sure to test in a server environment

Sub-page var arr = [1,2,3];//parent page window.onload = function () {    console.log (Child.window.arr);//[]}

"3" test succeeded, then array detection

Child page var arr = [1,2,3];//parent Web function test (arr) {    return arr instanceof Array;} Window.onload = function () {    console.log (Child.window.arr);//[    Console.log] (test (Child.window.arr)) ;//false}

After the test, it was found that the result of array detection was false. This is because the Web page contains multiple frames, and there are actually many different global environments, and there are different versions of the array constructor. If an array is passed from one frame to another, the incoming array has a different constructor than the array created natively in the second frame

Tostring

The typeof operator is not helpful here, and the instanceof operator can only be used for simple situations, when it is necessary to sacrifice a large kill device--tostring (), by referencing the ToString () method of object to examine the class properties of the objects, the value of the property is always " Array "

var arr = [1,2,3];console.log (Object.prototype.toString.call (arr) = = = ' [Object Array] ');//true

Alternatively, you can customize the type recognition function

function type (obj) {    return Object.prototype.toString.call (obj). Slice (8,-1). toLowerCase (); var arr = [1,2,3];console.log (Type (arr));//' array '

Test in a multi-frame environment, also return ' array '

Child page var arr = [1,2,3];//parent Web function test (arr) {    return arr instanceof Array;} function type (obj) {    return Object.prototype.toString.call (obj). Slice (8,-1). toLowerCase (); Window.onload = function () {    console.log (Child.window.arr);//[    Console.log] (test (Child.window.arr)) ;//false    Console.log (Type (Child.window.arr));//' array '}

IsArray

To make the array detection more convenient, ECMASCRIPT5 added the Array.isarray () method. The purpose of this method is to ultimately determine whether a value is an array, regardless of the global environment in which it was created

var arr = [1,2,3];console.log (Array.isarray ([]));//trueconsole.log (Array.isarray ({}));//falseconsole.log ( Array.isarray (arr));//true

Test in a multi-frame environment, also returns true

Sub-page var arr = [1,2,3];//parent page Console.log (Array.isarray (Child.window.arr));//true

Full Test code

"Sub-page (in.html)"

<! DOCTYPE html>
"Parent page (box.html)"
<! DOCTYPE html>
What is the correct way to detect JavaScript arrays