JS怎么判断变量是不是数组：Array.isArray最佳实践

一、核心用法：Array.isArray 的语法与判断规则

Array.isArray() 是挂载在 Array 构造函数上的静态方法，接收一个待检测的变量作为参数，返回一个布尔值（true 或 false）。

该方法只专注于一件事情：判断目标值是否为一个真正的原生数组。它不会因为对象的属性模拟或原型链伪造而产生误判。

// 1. 标准原生数组检测
Array.isArray([]);                         // 输出: true
Array.isArray([1, 2, 3]);                  // 输出: true
Array.isArray(new Array(5));               // 输出: true

// 2. 基础标量与常规对象（均返回 false）
Array.isArray({});                         // 输出: false
Array.isArray(null);                       // 输出: false
Array.isArray(undefined);                  // 输出: false
Array.isArray("Hello World");              // 输出: false
Array.isArray(1024);                       // 输出: false
Array.isArray(true);                       // 输出: false

// 3. 类数组对象（Array-like Objects，均返回 false）
Array.isArray({ length: 2, 0: 'a', 1: 'b' }); // 输出: false
function checkArgs() {
  return Array.isArray(arguments);         // 输出: false (arguments 不是真数组)
}
checkArgs(1, 2);

// 4. 类型化数组（TypedArray，均返回 false）
Array.isArray(new Uint8Array(8));          // 输出: false
Array.isArray(new Float32Array(16));       // 输出: false

从上面的测试可以明确看出，Array.isArray 表现极其克制和精确。即便是结构非常接近数组的 arguments 对象或者 DOM 操作获取的 NodeList 集合，它也不会将其判定为数组，从而杜绝了在后续调用 .push()、.pop() 等专属变异方法时发生报错。

二、原理解析：为什么其他传统方式容易埋下隐患？

在 ECMAScript 5 之前，开发者常用 typeof、instanceof 或 constructor 来检查变量类型。然而，这些方式在面对复杂或现代前端运行环境时，均存在不同程度的缺陷。

1. typeof 运算符：完全无法识别对象与数组

在 JavaScript 的底层设计中，数组也是对象的一种派生形式。执行 typeof [] 时，引擎返回的固定字符串是 "object"：

typeof [1, 2, 3];        // 结果: "object"
typeof { name: "Alice" }; // 结果: "object"
typeof null;             // 结果: "object" (JS历史遗留Bug)

typeof 只能用来判断基础标量类型（如 string、number、boolean、undefined、symbol）以及函数对象（function），在区分普通对象与数组时毫无效力。

2. instanceof Array：跨 Realm（多窗口/iframe）环境下彻底失效

instanceof 操作符通过遍历对象的原型链，检查构造函数的 prototype 属性是否存在于该对象的原型链上：

const list = [1, 2];
list instanceof Array; // 在单一运行上下文中返回 true

然而，现代前端应用经常引入多执行上下文（Realms），例如父页面与 <iframe>、弹窗页面（window.open），或是 Node.js 中的 vm 模块。每个 Realm 都拥有完全独立的全局对象和独立内存地址的 Array.prototype。

当一个数组对象从 <iframe> 传递到主页面时，该数组的原型链指向的是子窗口的 iframe.contentWindow.Array.prototype。而在主窗口中执行 subArr instanceof Array 时，对比的是主窗口的 window.Array.prototype。两者在内存中地址互不相同，判定结果直接返回 false！

与 instanceof 依赖原型对象内存指针不同，ECMAScript 规范明确规定：Array.isArray 是通过底层原生检查目标对象的内部插槽（Internal Brand Slot [[Class]] 或内部数组特征）。无论数组在哪个 Realm 中被创建，只要具备原生数组的物理结构，Array.isArray 都能准确返回 true。

3. constructor 属性比对：容易被篡改或破坏

通过 arr.constructor === Array 进行判定同样非常脆弱：

• 同样受到跨 Realm 独立全局对象的影响，子窗口数组的 constructor 与父窗口 Array 并不等价。
• 对象的 constructor 属性是可写的，极易在业务代码中被重写或覆盖。
• 如果变量为 null、undefined，或者通过 Object.create(null) 创建，直接访问 .constructor 会立刻抛出致命异常。

4. Object.prototype.toString.call()：虽然可靠但略显繁琐

在 Array.isArray 出现前，最稳妥的跨环境解决方案是借助 Object 原型方法：

Object.prototype.toString.call(value) === '[object Array]';

该方法同样通过读取底层标记工作，能正确处理跨 Realm 数组。但相比于官方标准内建的 Array.isArray(val)，其语法冗长、可读性较差，且在执行效率上略逊于内置原生实现。

三、实战操作：参数校验与数据处理的标准四步流程

在实际工程代码中，判断变量是否为数组通常并不是孤立的行为，而是为了后续安全消费数据。以下是推荐的四步标准操作流程：

第 1 步：入口防御式类型守卫

在所有接收外部参数的函数第一行，利用 Array.isArray 做守卫拦截。若数据不符合预期，提前给出默认值或主动抛出具体错误，避免深层堆栈报错。

function processUserList(users) {
  // 防御性前置校验：若不是数组，赋予安全的空数组兜底
  const safeUsers = Array.isArray(users) ? users : [];

  return safeUsers.map(u => u.name);
}

第 2 步：识别类数组对象（Array-like）

在处理 DOM 集合（如 document.querySelectorAll）或函数入参 arguments 时，这些对象拥有数字索引和 length 属性，但并不是数组。此时 Array.isArray() 会正确返回 false。我们需要明确是否需要支持此类集合。

第 3 步：使用 Array.from() 进行数据归一化

如果业务逻辑希望同时兼容真数组与类数组，应在校验分流后将其统一转换为标准真数组：

function normalizeToNativeArray(input) {
  // 已经是真数组，直接返回
  if (Array.isArray(input)) {
    return input;
  }
  // 检查是否是具备 length 属性的类数组或可迭代对象
  if (input != null && (typeof input === 'object' || typeof input === 'string') && ('length' in input || Symbol.iterator in input)) {
    return Array.from(input);
  }
  // 其余异常输入，降级为空数组
  return [];
}

第 4 步：安全调用高阶数组方法

经过统一归一化后的数据，保证其原型链上具备完整的 Array.prototype 接口。此时可以放心使用 .filter()、.map()、.reduce() 或 .flat() 等高阶方法，代码结构清晰且绝无运行时类型报错风险。

四、方案全维度对比与环境兼容性

为了直观展现各种数组判断方式在生产环境中的差异，我们将主流技术方案的综合表现整理如下：

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

五、常见问题与避坑指南

isArray(arg: any): arg is any[];