JS怎么判断变量是数组：Array.isArray()用法与兼容写法

在 JavaScript 开发中，判断一个未知变量是否为数组是最高频的防御性编程操作之一。最权威、最标准的原生解决方案是直接调用 Array.isArray(value)；而在需要支持旧版 IE8 或特殊受限运行环境的基础库中，标准且零依赖的兼容降级写法为 Object.prototype.toString.call(value) === '[object Array]'。本文将从常见误区、跨窗体原型失效原理、标准方法特性到 Polyfill 源码实现，完整拆解数组类型判定的所有细节。

一、常见误区：为什么 typeof 与 instanceof 无法完全胜任？

初学 JavaScript 的开发者在遇到类型校验时，最先想到的往往是 typeof 操作符或 instanceof 原型比对。然而在严谨的生产环境中，这两个操作符都存在明显的盲区与缺陷。

1. typeof 的致命盲区：全归为 "object"

根据 ECMAScript 规范，JavaScript 中的对象（Object）是一个复合引用类型。数组在底层实现上本质也是特殊的对象结构（其索引对应属性键，并拥有特殊的 length 维护逻辑）。因此对数组执行 typeof 运算时，返回的结果永远是普通字符串 "object"：

// typeof 无法区分数组与对象
typeof [1, 2, 3];        // 结果: "object"
typeof { name: "test" }; // 结果: "object"
typeof null;             // 结果: "object" (语言设计著名的历史缺陷)

如果使用 typeof val === "object" 去筛选数组，不仅普通对象会混入其中，甚至 null 也会被误判，导致后续调用 val.map() 或 val.forEach() 时直接抛出 TypeError: val.map is not a function 运行时异常。

2. instanceof Array 的隐患：跨窗体与多运行上下文失效

很多进阶开发者会退一步选择 val instanceof Array。在单一全局上下文（同一个浏览器窗口或单个 Node.js 进程）下，它确实能够有效区分数组与普通对象：

[1, 2, 3] instanceof Array;        // true
{ name: "test" } instanceof Array; // false
null instanceof Array;             // false

然而 instanceof 的检测逻辑是沿着待测对象的隐式原型链 __proto__ 逐层向上寻访，判断构造函数 Array.prototype 是否存在于该原型链上。一旦页面中引入了 <iframe>、弹出的子窗口（window.open）或者 Node.js 的 vm 沙箱环境，每个运行上下文（Realm）都会创建属于自己的内置全局构造函数与原型对象。此时跨上下文传递的数组，在宿主窗口下执行 instanceof Array 将彻底失效返回 false。

3. constructor 属性比对的脆弱性

使用 val.constructor === Array 同样不可靠。首先，当 val 为 null 或 undefined 时，访问属性会直接崩溃；其次，对象的 constructor 属性极易被外部修改或伪造（例如 { constructor: Array }）；最后，它同样无法跨越 iframe 环境的引用屏障。

二、深度剖析：跨窗体 (iframe) 环境下 instanceof 为何失效？

为了彻底理解为什么现代规范要引入 Array.isArray()，我们必须深入浏览器运行上下文（Realm）的原型隔离机制。

在浏览器中，主窗口拥有全局对象 window，而每一个嵌入的 <iframe> 标签也会拥有属于它自己的独立全局对象 iframe.contentWindow。虽然它们都运行在同一渲染引擎中，但各自的全局作用域是物理隔离的：

• 主窗口的全局构造函数为 window.Array，对应的原型实例为 window.Array.prototype；
• 子窗口的全局构造函数为 iframeWindow.Array，对应的原型实例为 iframeWindow.Array.prototype；
• 两者的原型对象在内存堆中是两个完全不同的物理引用，即：window.Array.prototype !== iframeWindow.Array.prototype。

// 场景复现代码：创建并挂载一个隐蔽 iframe
const iframe = document.createElement('iframe');
document.body.appendChild(iframe);

// 在 iframe 的全局环境中实例化一个数组
const iframeArray = new iframe.contentWindow.Array(1, 2, 3);

// 在父页面主环境中进行判断：
console.log(iframeArray instanceof Array);        // 输出: false ❌ (致命误判！)
console.log(iframeArray.constructor === Array);   // 输出: false ❌
console.log(Array.isArray(iframeArray));           // 输出: true  ✔️ (完美精准！)

当执行 iframeArray instanceof Array 时，JavaScript 引擎比对的是主窗口的 window.Array.prototype 是否在 iframeArray 的原型链上。但 iframeArray 的原型链上只有 iframe.Array.prototype 与 iframe.Object.prototype，两者引用不相等，因此判定为 false。

三、官方标准解法：Array.isArray() 的用法与行为规范

为了彻底终结跨环境数组判定的混乱与缺陷，ECMAScript 5.1 规范正式推出了静态方法 Array.isArray()。

1. 基本语法与调用方式

Array.isArray(value)

• 参数 value：需要被检测的目标变量，可以传入任意 JavaScript 数据类型（基本类型、引用对象、null、undefined）。
• 返回值：返回布尔值。如果目标变量在底层是一个真正的数组，返回 true；否则返回 false。

2. 完整行为用例清单

Array.isArray() 经过了浏览器引擎的深度优化，能够精准应对各种边界条件：

// 1. 所有真正的数组均返回 true
Array.isArray([]);                         // true
Array.isArray([1, 2, 3]);                  // true
Array.isArray(new Array());                // true
Array.isArray(new Array(10));              // true (稀疏数组)
Array.isArray(Array.prototype);            // true (Array.prototype 本身就是一个数组！)

// 2. ES6 继承 Array 的派生类实例同样返回 true
class CustomCollection extends Array {}
const list = new CustomCollection(1, 2);
Array.isArray(list);                       // true

// 3. 所有非数组对象、基本类型及类数组一律安全返回 false
Array.isArray();                           // false (不传参或 undefined)
Array.isArray(null);                       // false
Array.isArray(true);                       // false
Array.isArray(100);                        // false
Array.isArray("hello");                    // false
Array.isArray({});                         // false
Array.isArray({ __proto__: Array.prototype }); // false (哪怕恶意篡改原型链，也不会被骗)

四、终极兼容：Object.prototype.toString 的降级原理与 Polyfill 实现

尽管当前现代浏览器和主流环境（Node.js、Deno、Bun、现代移动端 WebView）已 100% 支持 Array.isArray()，但在某些特定场景下（例如需要打包一个零依赖且需兼容旧版 IE8 的 SDK，或者面对极端定制的嵌入式 JS 引擎），我们需要一个稳定可靠的兼容降级写法（Polyfill）。

1. 为什么是 Object.prototype.toString？

在 ECMAScript 早期标准中，所有内置对象都有一个隐藏的内部属性 [[Class]]。该属性记录了创建对象时的原始类型标签，例如 "Array"、"Object"、"Date"、"RegExp" 等。

规范规定，当调用原始的 Object.prototype.toString() 时，其执行规范如下：

1. 获取当前调用的 this 绑定值；
2. 如果值为 undefined，返回 "[object Undefined]"；
3. 如果值为 null，返回 "[object Null]"；
4. 对于对象，读取其内部属性 [[Class]]，并拼接格式为 "[object " + class + "]" 的字符串返回。

因为数组自身的 Array.prototype.toString 已被原型重写为拼接数组元素的行为（例如 [1,2].toString() === "1,2"），所以必须显式通过 Function.prototype.call 借用 Object.prototype 上的原生实现：

Object.prototype.toString.call([1, 2, 3]); // 恒定返回: "[object Array]"

2. 生产级 Polyfill 完整代码

在项目的公共入口处（或工具函数库的全局初始化部分），可加入符合 MDN 与 W3C 规范的标准 Polyfill 代码：

/**
 * Array.isArray 官方标准 Polyfill
 * 适用于 ES3、IE8- 及无原生支持的嵌入式 JavaScript 运行环境
 */
if (!Array.isArray) {
  Array.isArray = function (arg) {
    return Object.prototype.toString.call(arg) === '[object Array]';
  };
}

如果你不想污染全局命名空间，也可以在工具库中将其封装为独立的工具函数：

export const isArray = Array.isArray || function (val) {
  return Object.prototype.toString.call(val) === '[object Array]';
};

五、类数组对象辨析：区分与安全转换

在实际工程开发中，经常会有读者疑惑：“为什么 DOM 查询出来的列表或者函数的 arguments 会被 Array.isArray() 判定为 false？”

这是因为它们是类数组对象（Array-like Object），而不是真实的数组。

常见类数组对象包括：

• 函数的形参列表对象：arguments；
• DOM 查询返回的集合：document.querySelectorAll('div')（NodeList）或 document.getElementsByTagName('div')（HTMLCollection）；
• 开发者手动组装的对象：const fake = { 0: "a", 1: "b", length: 2 };

function testDemo() {
  console.log(Array.isArray(arguments)); // 输出: false 严格而准确！
}
testDemo(1, 2, 3);

Array.isArray() 返回 false 是一道极好的安全防线，能够防止后续代码在执行 arguments.map(...) 时因为缺少方法而崩溃。如果你确实需要将类数组当做真数组来处理，必须先进行显式类型转换：

// 现代写法 (推荐): Array.from 或 展开运算符
const trueArray1 = Array.from(arguments);
const trueArray2 = [...document.querySelectorAll('div')];

// 兼容旧环境写法: 借用 slice
const trueArrayLegacy = Array.prototype.slice.call(arguments);

console.log(Array.isArray(trueArray1)); // 输出: true (已蜕变为真数组)

六、总结与技术选型指南

在实际项目落地中，针对“如何判断变量是否为数组”这一问题，建议遵循以下清晰的选型阶梯：

业务场景	推荐方案	代码实现	综合评价
现代应用开发 (Vue, React, Node.js)	原生 Array.isArray()	Array.isArray(val)	语法标准，执行速度最快，跨 Realm 安全度最高，首选推荐。
公共 SDK / 工具库开发 (需支持未知宿主与旧版 IE)	标准 Polyfill 垫片	Array.isArray || Object.prototype.toString.call	防御完备，全浏览器及任意虚拟机环境 100% 兼容。
类数组对象处理 (DOM 列表 / arguments)	先鉴别真伪，再安全转换	Array.isArray(val) ? val : Array.from(val)	逻辑严谨，杜绝运行时原型方法缺失导致的异常崩溃。

综上所述，彻底抛弃脆弱的 typeof 与 instanceof Array，在现代代码库中全面采用 Array.isArray()，配合需要时的 Object.prototype.toString.call() 降级补丁，是编写健壮、可维护 JavaScript 程序的行业标准实践。