【JS】判断是否为数组的几种方式及各自的缺陷

1. Object.prototype.toString.call

const arr = [1,2,3]
const obj = {}
Object.prototype.toString.call(arr) === '[object Array]' // true
Object.prototype.toString.call(obj) === '[object Array]' // false

ES6引入知名符号 toStringTag 之前，这种方法是适用的，因为无法修改字符串'[object Array]'。但如果使用知名符号 toStringTag 手动修改后，则无法正确校验。

const obj = {
    name: "田本初",
    age: 23,
    [Symbol.toStringTag]: 'Array'
}
Object.prototype.toString.call(obj) === '[object Array]'  // true

2. instanceof

检查是否是Array构造函数的实例

const arr = [1,2]
const obj = {}
class A extends Array {}
const a = new A()

arr instanceof Array // true
a instanceof Array // true
obj instanceof Array // false

这种方式不会受到ES6引入的知名符号 toStringTag 的影响

const obj = {
    name: "田本初",
    age: 23,
    [Symbol.toStringTag]: 'Array'
}
obj instanceof Array // false

但是也有缺陷，如手动修改原型

const obj = {}
Object.setPrototypeOf(obj,Array.prototype)
obj instanceof Array // true

如果页面中有iframe，则会失效
因为 Array 是 Window 的全局属性，iframe 中也有其自己的 Window 对象。

const Array1 = Window.Array;
const iframe = document.querySelector('iframe');
const Array2 = iframe.contentWindow.Array;

console.log(Array1 === Array2); // false

如果数组为iframe中Window对象创建的，则无法根据当前页Window的Array判断

const Array1 = Window.Array;
const iframe = document.querySelector('iframe');
const Array2 = iframe.contentWindow.Array;
const arr = new Array2(1, 2, 3);

console.log(arr instanceof Array); // false

3. Array.isArray

简单可靠，推荐使用

知名符号 toStringTag 情况：

const obj = {
    name: "田本初",
    age: 23,
    [Symbol.toStringTag]: 'Array'
}

Array.isArray(obj) // false

iframe不同Window对象的情况：

const Array1 = Window.Array;
const iframe = document.querySelector('iframe');
const Array2 = iframe.contentWindow.Array;
const arr = new Array2(1, 2, 3);

Array.isArray(arr) // true

总结

最推荐使用 Array.isArray，简单可靠。
Object.prototype.toString.call 无法处理使用知名符号toStringTag修改后的对象；
instanceof 无法判断手动修改原型指向和不同的全局作用域创建的数组的情况。