发布于 由admin

判断数组的 4 种方法：`Array.isArray` vs `instanceof` vs `toString` vs `constructor`

数组检测的四种经典方法：Array.isArray vs instanceof vs toString vs constructor —— 一场深入浅出的技术讲座

各位开发者朋友，大家好！今天我们来聊一个看似简单、实则非常值得深挖的话题：如何准确判断一个变量是否为数组？

在 JavaScript 中，我们经常需要对数据类型进行判断。尤其是在处理用户输入、API 返回值或跨域通信时，你可能会遇到各种“伪装成数组”的对象——比如类数组对象（arguments、NodeList）、不同窗口/iframe中的数组实例，甚至一些自定义构造函数创建的对象。

如果你只用一种方式去判断数组，很可能掉进坑里。今天我们就从四个主流方法出发，逐一剖析它们的原理、适用场景和潜在陷阱，并给出最佳实践建议。

一、背景知识：JavaScript 中的“类型”与“原型链”

在开始之前，请先理解几个核心概念：

概念 含义
typeof 只能区分基本类型（string、number、boolean、undefined、symbol、object），无法区分对象的具体子类型（如 Array、Date、RegExp）
原型链 所有对象都有一个内部属性 [[Prototype]]，指向其构造函数的 prototype 对象。这是 instanceof 的基础
Symbol.toStringTag ES6 引入的新特性，允许自定义对象的 [object XXX] 表示方式（例如：Array.prototype[Symbol.toStringTag] === ‘Array’）

了解这些之后，我们就可以进入正题了。

二、四种常用判断方法详解

方法1：Array.isArray() —— 官方推荐 ✅

这是目前最安全、最可靠的方法，由 ECMAScript 5.1 标准正式引入。

原理：

它直接检查对象的内部 [[Class]] 属性（虽然这个属性不可访问），底层实现基于 Object.prototype.toString.call(obj) 的优化版本，专门针对数组做了处理。

示例代码：

console.log(Array.isArray([]));           // true
console.log(Array.isArray([1, 2, 3]));    // true
console.log(Array.isArray({}));           // false
console.log(Array.isArray("hello"));      // false
console.log(Array.isArray(null));         // false
console.log(Array.isArray(undefined));    // false

优势：

  • ✅ 最准确：能正确识别所有标准数组实例
  • ✅ 兼容性好：IE9+ 支持
  • ✅ 不受跨 iframe 影响：即使是在不同 window 上创建的数组也能识别（因为它是基于引擎级别判断）

缺点：

  • ❗️不适用于旧版浏览器（IE8 及以下），但现代项目已无需考虑

✅ 结论：生产环境中首选此方法！

方法2：instanceof Array —— 简单粗暴 ❗️

这是很多人最初接触 JS 时学到的方式，语法直观，但隐藏风险很大。

原理：

通过检查对象的原型链上是否存在 Array.prototype 来判定。

示例代码：

const arr = [];
console.log(arr instanceof Array); // true

// 问题来了：跨 iframe 或不同上下文
const otherWindow = window.open('', '_blank');
otherWindow.document.write('<script>var arr = [];</script>');
const arrInOtherWindow = otherWindow.arr;

console.log(arrInOtherWindow instanceof Array); // false ❌

为什么失败？

因为在另一个 iframe 中创建的数组，其构造函数是那个 iframe 的 Array，而不是当前页面的 Array。因此 instanceof 判断失败。

更多陷阱：

function fakeArray() {
  return { length: 3, 0: 'a', 1: 'b', 2: 'c' };
}
const obj = fakeArray();
console.log(obj instanceof Array); // false ✅ 正确，不是真正的数组

优势：

  • ✅ 语法简洁易懂
  • ✅ 在同一上下文中运行良好

缺点：

  • ❗️不能跨执行环境（iframe、worker）
  • ❗️无法区分真正的数组和伪造的类数组对象（如上面的例子）

⚠️ 结论：仅限于单一作用域内使用，不推荐用于复杂应用！

方法3：Object.prototype.toString.call(obj) —— 老派王者 ⚡️

这是一种历史悠久的通用类型检测技术，广泛应用于 polyfill 和工具库中（如 Lodash）。

原理：

每个对象都继承了 Object.prototype.toString 方法，该方法返回格式化的字符串 [object Type]，其中 Type 是对象的内部类别名。

对于数组来说，结果总是 " [object Array]"。

示例代码：

console.log(Object.prototype.toString.call([]));          // "[object Array]"
console.log(Object.prototype.toString.call({}));          // "[object Object]"
console.log(Object.prototype.toString.call("str"));       // "[object String]"
console.log(Object.prototype.toString.call(null));        // "[object Null]"
console.log(Object.prototype.toString.call(undefined));   // "[object Undefined]"
console.log(Object.prototype.toString.call(new Date()));  // "[object Date]"

自定义工具函数：

function isType(obj, type) {
  return Object.prototype.toString.call(obj).slice(8, -1) === type;
}

console.log(isType([], 'Array'));     // true
console.log(isType({}, 'Array'));     // false
console.log(isType(new Date(), 'Date')); // true

优势：

  • ✅ 几乎无误判：即使是跨 iframe、跨全局对象也能识别（因为 toString 是共享的）
  • ✅ 支持所有内置类型（Array、String、Number、Function、Date、RegExp、Error、Boolean、Null、Undefined）
  • ✅ 可扩展性强（可用于封装通用类型判断）

缺点：

  • ❗️写法稍显冗长（需手动调用 .call()）
  • ❗️不如 Array.isArray 直接语义清晰（但性能差异可忽略）

✅ 结论：适合需要统一类型判断逻辑的大型项目，是 Array.isArray 的强大替代方案！

方法4：obj.constructor === Array —— 危险操作 💣

这可能是最容易被误解的一种方式。很多初学者看到 new Array() 就以为可以靠 constructor 来判断。

原理：

检查对象的 constructor 是否等于 Array 构造函数。

示例代码：

console.log([].constructor === Array);        // true
console.log((function(){return arguments;})().constructor === Array); // false ❌

问题所在：

  • ✅ 正常数组：[].constructor === Array → true
  • ❌ 类数组对象（如 arguments）：arguments.constructor !== Array → false（正确）
  • ❌ 自定义构造函数：如果有人改写了 constructor，就会出错！
function MyArray() {}
MyArray.prototype = []; // 错误地设置原型
MyArray.prototype.constructor = MyArray;

const myArr = new MyArray();
console.log(myArr.constructor === Array); // false ❌ 实际上是个数组！

更严重的例子：

const obj = {};
obj.constructor = Array;
console.log(obj.constructor === Array); // true ❌ 但 obj 不是数组！

优势：

  • ✅ 如果你能完全控制对象来源且未篡改 constructor，则有效

缺点：

  • ❗️极易被伪造（恶意修改 constructor）
  • ❗️无法应对跨域或沙箱环境
  • ❗️不符合规范：ES 规范并未保证 constructor 总是可靠的

💣 结论：绝对不要单独依赖这种方式做类型判断！

三、综合对比表格（重点推荐！）

方法 是否推荐 跨 iframe 类数组识别 性能 可读性 备注
Array.isArray() ✅ 推荐 ✔️ 是 ✔️ 是 ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ 最佳选择，现代标准
instanceof Array ❌ 不推荐 ❌ 否 ❌ 否 ⭐⭐⭐⭐ ⭐⭐⭐⭐ 仅限同域使用
Object.prototype.toString.call() ✅ 推荐 ✔️ 是 ✔️ 是 ⭐⭐⭐⭐ ⭐⭐⭐ 通用性强，适合工具库
obj.constructor === Array ❌ 绝对不推荐 ❌ 否 ❌ 否 ⭐⭐⭐⭐ ⭐⭐ 易被伪造，危险

📌 总结一句话：

Array.isArray() 是你的第一选择；Object.prototype.toString.call(obj) 是备选方案；其他两种请远离！

四、实战场景分析

场景1：API 数据校验（前后端交互）

function validateUserList(data) {
  if (!Array.isArray(data)) {
    throw new Error('Expected an array of users');
  }
  data.forEach(user => {
    if (typeof user.name !== 'string') {
      throw new Error('Each user must have a valid name');
    }
  });
}

✅ 使用 Array.isArray 最合适，避免因 JSON.parse 解析后的数组来自不同上下文导致的问题。

场景2：DOM 操作中的 NodeList 处理

const nodes = document.querySelectorAll('.item');
if (Array.isArray(nodes)) {
  // 这个条件永远为 false！因为 NodeList 不是数组
}
// 正确做法：
if (Object.prototype.toString.call(nodes) === '[object NodeList]') {
  // 转换为数组再操作
  const arr = Array.from(nodes);
}

💡 提示：如果你拿到的是 NodeList、HTMLCollection 等类数组对象，可以用 Array.from() 或 [...nodes] 转换为真实数组。

场景3：模块化开发中的类型判断（Webpack / Rollup）

// utils.js
export function isArray(obj) {
  return Array.isArray(obj);
}

// main.js
import { isArray } from './utils';
isArray(window.someArray); // ✅ 正确识别

✅ 使用 Array.isArray 可以确保无论模块如何打包、加载，都能正确识别数组。

五、常见误区澄清

❗误区1：“只要能用 typeof 判断就好了”

typeof [] === 'object'; // true
typeof {} === 'object'; // true

❌ typeof 无法区分对象和数组，必须配合其他手段。

❗误区2：“instanceof 永远没问题”

如前所述，在 iframe、Web Worker、Node.js child_process 中，instanceof 会失效。

❗误区3：“constructor 是唯一可靠的”

恰恰相反，它是最容易被篡改的字段之一。尤其在 React/Vue 等框架中，某些组件可能主动修改构造函数。

六、最佳实践建议

场景 推荐方法
日常开发（React/Vue/Angular） Array.isArray()
工具库开发（Lodash、Underscore） Object.prototype.toString.call(obj)
浏览器兼容性要求极高（IE8 及以下） 使用 Object.prototype.toString.call() + polyfill
需要支持多种类型检测（Array、Object、Function等） 使用统一的 typeOf(obj) 工具函数
不确定数据来源（第三方 API、动态脚本） 优先使用 Array.isArray() 或 toString 方式

📝 补充说明：

  • 如果你使用 TypeScript，编译阶段已经帮你做了类型推断，运行时可以放心用 Array.isArray
  • 如果你在 Node.js 环境下开发，也可以利用 Buffer.isBuffer()、ArrayBuffer.isView() 等更细粒度的方法

七、结语：别让“小问题”变成“大隐患”

亲爱的朋友们，编程的世界从来不缺少技巧，但真正决定代码质量的，是你对细节的理解深度。
一个简单的数组判断，背后藏着原型链、跨域、构造函数、Symbol 等多个知识点。

记住一句话：

“当你觉得某个判断很简单时，往往正是最容易踩坑的地方。”

希望今天的分享能让你在未来的项目中少走弯路，写出更加健壮、可维护的代码。

感谢聆听！欢迎在评论区留言交流你的经验 👇

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注