JS判断数组的四种实现方法详解

前言

一、前言

在实际开发或技术面试中，判断一个对象或值是否为数组是高频考点。鉴于其重要性，本文将对几种主流判断方式及其底层原理进行整理，并深入探讨各方法可能存在的潜在问题。

二、判断对象是否是数组的几种方式

判断对象是否是数组的几种方式

1.通过instanceof判断

instanceof运算符的核心机制是检测构造函数的prototype属性是否存在于目标对象的原型链中，并据此返回布尔值。

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

在上述代码示例中，instanceof运算符检查Array.prototype是否位于变量a的原型链上。由于a确实是一个数组，其原型链包含Array.prototype，因此返回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 !== window.frames[0].Array.prototype。要使arr instanceof Array返回true，必须确保arr是由原始全局环境中的Array构造函数创建的。

2.通过constructor判断

我们知道，对象的实例属性constructor指向其构造函数。利用这一特性，可以通过constructor属性来判断对象是否为数组。

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

与instanceof类似，这种判断方式同样受多全局环境的影响，会引发与instanceof相同的问题。

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

3.通过Object.prototype.toString.call()判断

Object.prototype.toString().call()方法能够获取对象的具体类型字符串，例如：

let a = [1,2,3] Object.prototype.toString.call(a) === '[object Array]';//true

该方法的强大之处在于，它不仅可用于判断数组，还能准确识别函数、数字等其他类型。

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

即使在多全局环境（如iframe）中，Object.prototype.toString().call()依然能给出符合预期的判断结果。

//为body创建并添加一个iframe标签
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
//取得iframe对象的构造数组方法
xArray = window.frames[window.frames.length-1].Array;
//通过构造函数获取一个实例
var arr = new xArray(1,2,3); 
console.log(Object.prototype.toString.call(arr) === '[object Array]');//true

4.通过Array.isArray()判断

Array.isArray()方法用于确定传入的值是否为数组，并返回布尔值。

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

该方法简洁易用，且能正确处理多全局环境下的判断。但其主要局限在于，Array.isArray()是ES5标准新增的方法，在ES5之前的旧版浏览器中可能不支持。针对这一问题，该如何解决呢？

判断数组方法的最终推荐

三、判断数组方法的最终推荐

最终推荐使用Array.isArray()。ES5引入isArray()方法正是为了提供一个稳定且可靠的数组判断标准。对于ES5之前不支持该方法的兼容性问题，我们可以通过封装Polyfill来解决，实现方式如下：

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

至此，关于数组判断的几种方式及推荐方案已介绍完毕。若发现任何错误或疑问，欢迎指正与交流。

参考资料：

Determining with absolute accuracy whether or not a JavaScript object is an array

Array.isArray()---MDN

instanceof---MDN

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