JS判断是否为数组：为什么推荐Array.isArray()

在 JavaScript 日常开发与函数设计中，校验输入变量是否为数组是最基础、最频繁的防御性编程环节之一。面对数组类型检测，初学者往往会尝试 typeof、instanceof 或 Object.prototype.toString.call()，但无论是在现代规范、各大开源类库还是引擎底层实现中，官方与业界最为推荐的标准做法始终是 Array.isArray()。本文将通过剖析底层原理、对比极端边界场景（特别是多窗口 iframe 上下文），全面说明为什么 Array.isArray() 是数组校验的最佳选择。

一、常见数组判断方式与局限性

在 ECMAScript 5 之前，语言本身并没有直接提供官方的专门方法。开发者们尝试过多种不同的语法特性来判断数组，但它们各自都存在显著的短板或安全边界隐患。

1. typeof 操作符：无法区分对象与数组

很多初学者接触 JavaScript 时，习惯用 typeof 区分基本类型。但在 JavaScript 的底层类型设计中，数组属于特殊对象（引用类型）。使用 typeof 检查数组时，只会返回 "object"，无法将普通键值对对象、null 与数组区分开来：

// typeof 测试示例
console.log(typeof [1, 2, 3]);   // 示例输出: "object"
console.log(typeof {});           // 示例输出: "object"
console.log(typeof null);         // 示例输出: "object"

2. instanceof Array：基于原型链的“虚假安全”

value instanceof Array 检查 Array.prototype 是否存在于目标变量的原型链上。在单一全局上下文（单一页面/单窗口）中，这通常表现良好：

const list = ['a', 'b', 'c'];
console.log(list instanceof Array); // 示例输出: true
console.log({} instanceof Array);   // 示例输出: false

然而，这种方式存在一个致命缺陷：原型链检查高度依赖当前宿主环境的全局 Array 构造函数。一旦页面存在 <iframe>、Worker 或跨窗口数据传递，子窗口与父窗口拥有各自独立的全局作用域与内存对象，跨环境传递的数组在 instanceof Array 检查时会直接报错返回 false。

3. constructor 属性检查：极易被篡改

检查变量的构造函数：value.constructor === Array。不仅同样受制于跨 iframe 上下文独立的问题，而且 constructor 只是对象上的普通属性，可以轻易被外部代码篡改，或者在原型被覆盖后失效：

const fakeArr = { length: 0 };
fakeArr.constructor = Array; // 外部伪造
console.log(fakeArr.constructor === Array); // 示例输出: true (误判!)

const realArr = [1, 2];
realArr.constructor = Object; // 原型属性被覆盖
console.log(realArr.constructor === Array); // 示例输出: false (漏判!)

4. Object.prototype.toString.call()：经典但冗长

在 Array.isArray() 诞生之前，业界通用的最稳妥做法是利用 Object.prototype.toString 获取对象的内部类型标签 [[Class]]：

function isLegacyArray(val) {
  return Object.prototype.toString.call(val) === '[object Array]';
}
console.log(isLegacyArray([1, 2])); // 示例输出: true

该方法虽然能穿透 iframe，并能正确区分对象与数组，但写法冗长繁琐、可读性较差，且伴随字符串拼接和方法借用的函数调用开销，不够直观。

二、核心机制解析：为什么 instanceof 会在多环境中失效？

要真正理解为什么强烈推荐 Array.isArray()，必须看清 instanceof 语法背后的底层机制与浏览器中的执行上下文（Realm）。

1. 浏览器环境下的“多 Realm”隔离

在现代浏览器中，主页面与嵌入的 <iframe>、弹出的 window.open() 窗口，分别拥有各自独立的执行上下文环境（规范中称为 Realm）。

每个 Realm 都有自己的一套内置对象副本。也就是说：主页面的 window.Array 与 iframe 里的 iframeWindow.Array 是两个完全独立的内存对象，它们的 prototype 原型对象在堆内存中的物理地址截然不同：

// 内存对象不等价示例
window.Array !== iframeWindow.Array;                       // 结果为 true (两者不同)
window.Array.prototype !== iframeWindow.Array.prototype;   // 结果为 true (原型对象不同)

2. 原型链比对的断裂过程

当子 iframe 创建了一个数组并将其返回给父页面时：

const childArray = iframeWindow.getSharedList(); // 由 iframe 内部创建的数组

childArray 的原型指针（__proto__）指向的是 iframeWindow.Array.prototype。而在父页面中，如果执行：

console.log(childArray instanceof Array); // 实际上等价于: childArray instanceof window.Array

instanceof 运算符会沿着 childArray 的原型链向上逐层检索，查找是否存在 window.Array.prototype。由于 childArray 链上存在的是 iframeWindow.Array.prototype，两者引用地址不相等，检索直接失败，最终返回了荒谬的 false！

三、Array.isArray() 的规范定义与内部执行逻辑

为了从语言层面彻底根除由于执行环境隔离、原型链被篡改等带来的判定混乱，ECMAScript 5 正式引入了 Array.isArray() 这一标准静态方法。

1. ECMAScript 规范的 IsArray(O) 抽象操作

根据 ECMA-262 规范，调用 Array.isArray(arg) 时，引擎在内部会执行抽象操作 IsArray(O)，其核心判定逻辑非常清晰严密：

1. 如果参数 arg 不是对象（例如 null、undefined、数字、字符串等基本类型），直接返回 false。
2. 如果 arg 是一个数组奇异对象（Array exotic object），直接返回 true。
3. 如果 arg 是一个 Proxy 代理对象：
   • 如果代理对象的 [[ProxyHandler]] 为 null（即已被撤销的 Revoked Proxy），抛出 TypeError。
   • 否则，递归调用 IsArray(target)，获取目标对象的真实类型。如果代理的目标是一个真数组，Array.isArray(proxy) 依旧会正确返回 true。
4. 其他任何类型的对象，均返回 false。

2. 明确区分“真数组”与“类数组（Array-like）”

在实际编码中，很多对象“长得像数组”——它们拥有数字下标索引和 length 属性，例如 DOM 查询得到的 NodeList、函数内部的 arguments 对象，或是手写的类数组结构：

function testArguments() {
  console.log(arguments.length);          // 具有 length 属性
  console.log(arguments[0]);              // 具有下标索引
  console.log(Array.isArray(arguments));  // 示例输出: false
}
testArguments('hello');

四、开发实践指南与决策总结

结合现代前端架构与实际生产场景，在处理数组类型校验时，推荐遵循以下具体操作范式：

1. 生产环境首选标准写法

在所有普通的日常业务开发中，直接使用 Array.isArray()，无需做多余的环境兼容包装：

function processUserList(users) {
  // 推荐：直接使用 Array.isArray 进行前置守卫
  if (!Array.isArray(users)) {
    console.warn('输入参数并非标准数组，重置为空数组');
    return [];
  }

  return users.map(user => user.name);
}

2. 类数组的优雅兼容转换

如果函数需要同时接纳“纯数组”和“类数组对象”（如在 DOM 工具库或通用迭代工具中），应在 Array.isArray() 之后，配合 Array.from() 统一收口为真数组：

function toNormalizedArray(collection) {
  if (Array.isArray(collection)) {
    return collection; // 原生真数组，直接返回
  }
  if (collection != null && typeof collection.length === 'number') {
    return Array.from(collection); // 规范类数组，转为真实数组
  }
  return []; // 非法参数容错
}

3. 旧版本环境降级（Polyfill）

在需要兼容极古老宿主环境（如 IE8 及更早版本）的极端场景下，可以使用 Object.prototype.toString 作为官方标准的 Polyfill 实现：

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

该垫片代码充分印证了：在语言层未提供原生 API 时，Object.prototype.toString.call() 是次优替代；但只要处于现代运行时，首选必定是引擎层深度优化的 Array.isArray()。