JavaScript判断数组的四种方法对比与推荐

JavaScript判断数组的四种方法对比与推荐

本文深入探讨了在JavaScript中检测对象是否为数组的各种技术，通过具体代码示例进行详细说明，旨在为开发者的日常编码或深入学习提供有价值的参考。

使用instanceof运算符检测

第一种方法：使用instanceof运算符

instanceof运算符的核心机制是检查构造函数的prototype属性是否存在于对象的原型链中，最终返回一个布尔值结果。

let a = [];
a instanceof Array; //true
let b = {};
b instanceof Array; //false

在上述代码示例中，instanceof运算符用于检测Array.prototype是否位于变量a的原型链上。由于a确实是一个数组实例，拥有该属性，因此返回true。

需要留意的是，prototype属性是可以被修改的，这意味着即使初始判断为true，后续若原型链被篡改，结果可能不再准确。

此外，当脚本运行在包含多个全局执行上下文的环境中时，例如HTML页面中存在多个iframe元素，instanceof的检测结果可能不符合预期，具体表现如下：

//为body创建并添加一个iframe对象
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
//取得iframe对象的构造数组方法
xArray = window.frames[0].Array;
//通过构造函数获取一个实例
var arr = new xArray(1,2,3); 
arr instanceof Array;//false

产生此类问题的原因在于，每个iframe都会创建独立的全局执行上下文，并拥有各自独立的Array.prototype属性。显然，不同环境下的Array.prototype并不相等（即Array.prototype !== window.frames[0].Array.prototype）。因此，要使arr instanceof Array返回true，必须确保arr是由当前执行上下文中的原始Array构造函数所创建。

通过constructor属性判断

第二种方法：通过constructor属性判断

根据JavaScript的特性，实例对象的constructor属性指向其构造函数，因此我们可以利用这一属性来判定对象是否为数组。

let a = [1,3,4];
a.constructor === Array;//true

然而，这种方法同样面临多全局环境带来的挑战，其引发的具体问题与使用instanceof时遇到的情况完全一致。

利用Object.prototype.toString.call()方法

第三种方法：利用Object.prototype.toString.call()

调用Object.prototype.toString().call()可以准确获取对象的内部类型标签，该方法在涉及多个全局执行环境的场景中依然适用且可靠。

// 检验是否是数组
 let a = [1,2,3]
 Object.prototype.toString.call(a) === '[object Array]';//true
 //检验是否是函数
 let b = function () {};
 Object.prototype.toString.call(b) === '[object Function]';//true
 //检验是否是数字
 let c = 1;
 Object.prototype.toString.call(c) === '[object Number]';//true

使用Array.isArray()方法

第四种方法：使用Array.isArray()

此方法简洁易用，且在处理多全局环境时能保持准确判断。需要注意的是，Array.isArray()是ES5标准中引入的新特性，因此在ES5之前的旧版浏览器环境中可能不支持该方法。

let a = [1,2,3]
Array.isArray(a);//true

最终推荐方案与兼容处理

最终推荐方案

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。