数组判断?我早不用instanceof了,现在一行代码搞定!

传统方案

1. Object.prototype.toString.call 方法

原理 :通过调用 Object.prototype.toString.call(obj) ,判断返回值是否为 [object Array]

js 复制代码
function isArray(obj){
  return Object.prototype.toString.call(obj) === '[object Array]';
}

缺陷

  • ES6 引入 Symbol.toStringTag 后,可被人为篡改。例如:

    js 复制代码
    const obj = {
      [Symbol.toStringTag]: 'Array'
    };
    console.log(Object.prototype.toString.call(obj)); // 输出 [object Array]
  • 若开发通用型代码(如框架、库),该漏洞会导致判断失效。

2. instanceof 方法

原理 :判断对象原型链上是否存在 Array 构造函数。

js 复制代码
function isArray(obj){
  return obj instanceof Array;
}

缺陷

  • 可通过 Object.setPrototypeOf 篡改原型链,导致误判。例如:

    js 复制代码
    const obj = {};
    Object.setPrototypeOf(obj, Array.prototype);
    console.log(obj instanceof Array); // 输出 true,但 obj 并非真正数组
  • 跨 iframe 场景失效。不同 iframe 中的 Array 构造函数不共享,导致真数组被误判为非数组。例如:

    js 复制代码
    const frame = document.querySelector('iframe');
    const Array2 = frame.contentWindow.Array;
    const arr = new Array2();
    console.log(arr instanceof Array); // 输出 false,但 arr 是真正数组

ES6 原生方法

方法 :使用 Array.isArray 静态方法。

js 复制代码
console.log(Array.isArray(arr));

优势

  • 该方法由JavaScript引擎内部实现,直接判断对象是否由 Array 构造函数创建,不受原型链、 Symbol.toStringTag 或跨 iframe 影响;

  • 完美解决所有边界场景。

总结

判断数组的方法中 Array.isArray 是唯一准确且无缺陷的方案。其他方法(如Object.prototype.toString.callinstanceof)均存在局限性,仅在特定场景下可用。

相关推荐
龙猫里的小梅啊2 分钟前
CSS(八)CSS显示模式display属性
前端·css·css3
雨季mo浅忆5 分钟前
第二项目重新梳理
前端·面试
星光开发者6 分钟前
基于springboot电动汽车租赁管理系统-计算机毕设 附源码 11217
javascript·spring boot·mysql·django·php·html5·express
李白的天不白14 分钟前
webpack 与 vue-loader 版本冲突问题
前端·vue.js·webpack
sunneo19 分钟前
专栏D-团队与组织-05-冲突与决策
前端·人工智能·产品运营·aigc·产品经理·ai-native
空中海21 分钟前
05 React Native架构设计、主线项目与专家实践
javascript·react native·react.js
舟遥遥娓飘飘23 分钟前
量化投资体系之二:为 Web 看板集成公众号/财经原始数据
前端·数据分析·自动化·ai编程
ZC跨境爬虫26 分钟前
跟着 MDN 学 HTML day_13:多媒体嵌入 —— 视频与音频
前端·css·笔记·ui·html·音视频
之歆27 分钟前
DAY12_CSS3选择器全攻略 + 盒子新特性完全指南(上)
前端·css·css3
之歆29 分钟前
DAY13_CSS3进阶完全指南 —— 背景、边框、文本、渐变、滤镜与 Web 字体(上)
前端·c#·css3