JavaScript判断数组的方法总结与推荐

 更新时间:2022年02月16日 10:08:28   作者:前端阿飞  
这篇文章主要给大家介绍了关于JavaScript判断数组方法的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

前言

无论在工作还是面试中,我们都会遇到判断一个数据是否为数组的需求,今天我们就来总结一下,到底有多少方法可以判断数组,看看哪种方法是最好用、最靠谱的。

我们从妈妈、爸爸、祖先三个角度来进行判断。

根据构造函数判断(妈妈)

instanceof

判断一个实例是否属于某构造函数

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

缺点: instanceof 底层原理是检测构造函数的 prototype 属性是否出现在某个实例的原型链上,如果实例的原型链发生变化,则无法做出正确判断。

let arr = []
arr.__proto__ = function() {}
console.log(arr instanceof Array) // false

constructor

实例的构造函数属性 constructor 指向构造函数本身。

let arr = []
console.log(arr.constructor === Array) // true

缺点: 如果 arr 的 constructor 被修改,则无法做出正确判断。

let arr = []
arr.constructor = function() {}
console.log(arr.constructor === Array) // false

根据原型对象判断(爸爸)

__ proto __

实例的 __ proto __ 指向构造函数的原型对象

let arr = []
console.log(arr.__proto__ === Array.prototype) // true

缺点:  如果实例的原型链的被修改,则无法做出正确判断。

let arr = []
arr.__proto__ = function() {}
console.log(arr.__proto__ === Array.prototype) // false

Object.getPrototypeOf()

Object 自带的方法,获取某个对象所属的原型对象

let arr = []
console.log(Object.getPrototypeOf(arr) === Array.prototype) // true

缺点:  同上

Array.prototype.isPrototypeOf()

Array 原型对象的方法,判断其是不是某个对象的原型对象

let arr = []
console.log(Array.prototype.isPrototypeOf(arr)) // true

缺点:  同上

根据 Object 的原型对象判断(祖先)

Object.prototype.toString.call()

Object 的原型对象上有一个 toString 方法,toString 方法默认被所有对象继承,返回 "[object type]" 字符串。但此方法经常被原型链上的同名方法覆盖,需要通过 Object.prototype.toString.call() 强行调用。

let arr = []
console.log(Object.prototype.toString.call(arr) === '[object Array]') // true

这个类型就像胎记,一出生就刻在了身上,因此修改原型链不会对它造成任何影响。

let arr = []
arr.__proto__ = function() {}
console.log(Object.prototype.toString.call(arr) === '[object Array]') // true

Array.isArray()

Array.isArray() 是 ES6 新增的方法,专门用于数组类型判断,原理同上。

let arr = []
console.log(Array.isArray(arr)) // true

修改原型链不会对它造成任何影响。

let arr = []
arr.__proto__ = function() {}
console.log(Array.isArray(arr)) // true

总结

以上就是判断是否为数组的常用方法,相信不用说大家也看出来 Array.isArray 最好用、最靠谱了吧,还是ES6香!

到此这篇关于JavaScript判断数组方法的文章就介绍到这了,更多相关JavaScript判断数组方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • javascript如何动态加载表格与动态添加表格行

    javascript如何动态加载表格与动态添加表格行

    在某些时候需要动态加载表格与动态添加表格行,在接下来的文章中将为大家介绍下javascript是如何做到的,感兴趣的朋友不要错过
    2013-11-11
  • 12个div逐个显示效果

    12个div逐个显示效果

    12个div逐个显示效果...
    2006-10-10
  • JavaScript中arguments的使用方法详解

    JavaScript中arguments的使用方法详解

    这篇文章主要给大家介绍了关于JavaScript中arguments的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • javascritp添加url参数将参数加入到url中

    javascritp添加url参数将参数加入到url中

    javascritp添加url参数方法,将参数加入到url中,如果原来url中有则覆盖,下面是示例代码,感兴趣的朋友可以参考下
    2014-09-09
  • JavaScript 设计模式学习 Factory

    JavaScript 设计模式学习 Factory

    通过接口实现工厂,这是通过List方式显示RSS 等实现代码。
    2009-07-07
  • 用js控制电灯开关

    用js控制电灯开关

    这篇文章主要为大家详细介绍了用js控制电灯开关,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04
  • Boostrap中栅格布局的实现

    Boostrap中栅格布局的实现

    这篇文章主要为大家详细解析了Boostrap 栅格布局,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2017-01-01
  • JS数组方法reduce的妙用分享

    JS数组方法reduce的妙用分享

    在 JavaScript 中,reduce 是最难理解的数组方法之一,它是一个强大而灵活的高阶函数,下面就来看看 reduce 的妙用之处,希望对大家有所帮助
    2023-02-02
  • js canvas实现擦除效果示例代码

    js canvas实现擦除效果示例代码

    擦除效果在我们日常开发中也是时有见到的,通过擦除效果大大加强了与用户的交互性,所以下面这篇文章主要给大家介绍了利用js和canvas实现擦除效果的相关资料,文中给出了详细的介绍和示例代码,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-04-04
  • 二行代码解决全部网页木马

    二行代码解决全部网页木马

    还是挂马问题,这段时间,我渐渐感到压力,头大,通过QQ或MSN加我的人越来越多,我最近自己的工作本来就忙得不亦乐乎。哎,想想,还是要抽空来来帮帮大家。
    2008-03-03

最新评论