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判断数组方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS this关键字在ajax中使用出现问题解决方案

    JS this关键字在ajax中使用出现问题解决方案

    这篇文章主要介绍了JS this关键字在ajax中使用出现问题解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • JavaScript 常见安全漏洞和自动化检测技术

    JavaScript 常见安全漏洞和自动化检测技术

    js安全漏洞目前存在较大的技术难题,本文结合案例给大家详解JavaScript 常见安全漏洞和自动化检测技术,需要的朋友可以参考下
    2015-08-08
  • bootstrap实现图片自动轮播

    bootstrap实现图片自动轮播

    这篇文章主要为大家详细介绍了bootstrap实现图片自动轮播,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • PDF.js前端开发使用代码示例及实用技巧

    PDF.js前端开发使用代码示例及实用技巧

    pdf.js是一款Nozilla开发的、用于网页上显示pdf文档的Javascript库,提供pdf文件的在线阅读,这篇文章主要给大家介绍了关于PDF.js前端开发使用实用技巧的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-04-04
  • 利用svg实现带加载进度的loading

    利用svg实现带加载进度的loading

    svg是基于XML,由World Wide Web Consortium (W3C)联盟开发的一种开放标准的矢量图形语言,可让你设计激动人心的、高分辨率的Web图形页面。本文将使用svg实现一个带加载进度的loading,需要的可以参考一下
    2022-11-11
  • 微信小程序实现列表滚动头部吸顶的示例代码

    微信小程序实现列表滚动头部吸顶的示例代码

    这篇文章主要介绍了微信小程序实现列表滚动头部吸顶的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • Javascript设计模式之观察者模式(推荐)

    Javascript设计模式之观察者模式(推荐)

    观察者模式有时也称为发布--订阅模式,在观察者模式中,有一个观察者可以管理所有的目标,等到有状态发生改变的时候发出通知
    2016-03-03
  • 利用location.hash实现跨域iframe自适应

    利用location.hash实现跨域iframe自适应

    其他一些类似js跨域操作问题也可以按这个思路去解决,需要的朋友可以测试下。
    2010-05-05
  • Javascript节流函数throttle和防抖函数debounce

    Javascript节流函数throttle和防抖函数debounce

    这篇文章主要介绍了Javascript节流函数throttle和防抖函数debounce,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-12-12
  • 千万不要错过的JavaScript高效对比数组差异方法

    千万不要错过的JavaScript高效对比数组差异方法

    前端开发中,我们通常需要对比两个数组对象的差异。这其中有很多种方法,但是有些方法会带来一些问题,所以本文为大家准备了一个高效方法,需要的可以参考一下
    2023-05-05

最新评论