JavaScript 判断数组的几种方法及其利弊。
1. typeof
对于 Function、String、Number、Undefined 等几种类型的对象来说,他完全可以胜任。但是为 Array 时:
var arr = [1, 2, 3]
console.log(typeof arr) // "object"
// 同样的
console.log(typeof null) // "object"
console.log(typeof {}) // "object"
所以不能使用 typeof
来判断。
2. instanceof
instanceof
运算符用于检测构造函数的 prototype
属性是否出现在某个实例对象的原型链上。
var arr = [1, 2 ,3]
console.log(arr instanceof Array) // true
3. 原型链(constructor)
一般情况下,除了 undefined
和 null
,其它都能使用 constructor
判断类型。
var arr = [1, 2, 3]
console.log(arr.__proto__.constructor === Array) // true
console.log(arr.constructor === Array) // true
// 注意:arr.__proto__ === Array.prototype 为 true。
但是某些情况下,判断是不准确的,比如:
// 构造函数
function Fn() {}
// 修改原型对象
Fn.prototype = new Array()
// 实例化对象
var fn = new Fn()
console.log(fn.constructor === Fn) // false
console.log(fn.constructor === Array) // true
// 此时的 fn 应该是一个普通对象,而非数组,所以此时使用 constructor 判断是不合适的。
使用 instanceof 和 constructor 的局限性:
看代码:
var iframe = document.createElement('iframe')
document.body.appendChild(iframe)
var xArray = window.frames[window.frames.length - 1].Array
var xarr = new xArray()
var arr = new Array()
// 不同页面,结果并非我们所预期的 true,而是 false 哦!
console.log(xarr instanceof Array) // false
console.log(xarr.constructor === Array) // false
// 同页面才是 true 哦!
console.log(arr instanceof Array) // true
console.log(arr.constructor === Array) // true
4. Array.isArray
鉴于以上原因,ES5 标准提供的一个判断数组方法 isArray()
,其原理也是通过 Object.prototype.toString()
判断对象的内部属性 [[Class]]
是否为 "Array"
,以达到判断数组的目的。
function isArray(arr) {
return Array.isArray(arr)
}
5. Object.prototype.toString
所以,终极方法就是以下这个 ?
function isArray(arr) {
return Object.prototype.toString.call(arr) === '[object Array]'
}