Home  >  Article  >  Web Front-end  >  What methods are used to detect array types in javascript?

What methods are used to detect array types in javascript?

伊谢尔伦
伊谢尔伦Original
2017-07-18 13:19:491008browse

typeof operator.

There will be no problem for objects of Function, String, Number, and Undefined types, but there is no use for Array objects:

alert(typeof null); // "object" 
alert(typeof []); // "object"

instanceof

Applicable when there is only one global execution environment. If it contains multiple frameworks, there will be more than two different versions of the Array constructor. If you go from one framework to another, Pass an array. The incoming array and the array created natively in the second frame have different constructors respectively, that is, they are different types


if (value instanceof Array) {
  //对数组执行某项操作   
}

Array. isArray() method

Since it is new to ES5, it only supports IE9+, Firefox 4+, Safari 5+, Opera 10.5+ and Chrome


if (Array.isArray(value)) {
  //对数组执行某些操作 
}

Object.prototype.toString.call() method

Applicable to all environments, only supports native objects, Object’s toString() method cannot be detected The constructor name of the non-native constructor. Any constructor customized by the developer will return [object Object]

Principle: Directly calling the native toString() method of Object on any value will return a string in the format of [object NativeConstrctorName], each There is a class attribute inside the class, and this attribute specifies the name of the constructor in the above string.


var value = []
console.log(Object.prototype.toString.call(value))//"[Object Array]"

Since the constructor name of a native array has nothing to do with the scope, using the toString() method can ensure that the same value is output.

Why not use the object’s own toString() method?


var value = []
console.log(value.toString())//" "
value = ['pp','oo']
console.log(value.toString())//"pp,oo"
value = ['pp',"oo"]
console.log(Object.prototype.toString.call(value))//[object Array]

The tostring() method of Array has been overridden (this is true for many native objects), so it will call the toString() method on its own constructor and return other The string

You can also use this method to determine whether it is a native function or a regular expression


function isFunction(value){
    return Object.prototype.toString.call(value) === “[object Function]”
}//不适用于IE中以COM对象实现的任何函数
function isRegExp(value){
    return Object.prototype.toString.call(value) === “[object RegExp]”
}

The constructor attribute of the object

In addition to instanceof, we can also use the constructor property of each object to determine its type, so we can do this:

var arr = []; 
alert(arr.constructor == Array); // true

It seems that the last two solutions are impeccable, But is it really so? Unforeseen circumstances arise, and when you shuttle back and forth between multiple frames, a frustrating problem arises:

var iframe = document.createElement('iframe'); 
document.body.appendChild(iframe); 
xArray = window.frames[window.frames.length-1].Array; 
var arr = new xArray(1,2,3); // [1,2,3] 
// 哎呀! 
arr instanceof Array; // false 
// 哎呀呀! 
arr.constructor === Array; // false

Since each iframe has its own set of execution environments, objects instantiated across frames They do not share the prototype chain with each other, so the above detection code becomes invalid! How to do how to do? ? Well, JavaScript is a dynamic language. Maybe the snake oil "duck type" can help us. "If it walks like a duck and quacks like a duck, then treat it as a duck." Same reason , which can detect the unique abilities of certain array objects to make judgments. This method has been used by some people, such as the Prototype framework. Let’s take a look at the Object.isArray method it implements:

isArray: function(object) { 
return object != null && typeof object == "object" && 
'splice' in object && 'join' in object; 
}

The above is the detailed content of What methods are used to detect array types in javascript?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
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