专栏首页前端说吧js -【 数组】怎么判断一个变量是数组类型的?

js -【 数组】怎么判断一个变量是数组类型的?

怎么判断一个数组是数组呢?

其实这个也是一个常考的题目。依稀记得我为数不多的面试经过中都被问道过。

方案一: instanceof

variable instanceof Array

解决思路:

 使用类型判断所给的方法 instanceof  进行判断。

此方法返回一个布尔值,能够精确判断一个对象的类型。

方案二:原型prototype + toString +  call

Object.prototype.toString.call(variable).indexOf('Array') !== -1;

因为用了toString方法, 返回值是一个字符串,还需要第二层判断,看字符串中是否有‘Array’这个关键字:

这个字符串中有Array关键字的返回了数字8(就是Array这个字符在整个"[object Array]"中出现的下标数)。

如果变量对象不是一个纯数组,那么返回的数字就是-1。因为indexOf方法在字符串中找不到指定字符就会返回-1.

所以最后还需要通过比对数值是否等于-1就能判断是否是数组类型:

true就是了。

这里可能难以理解的是call方法,毕竟前边toString他们都各司其职。

 首先我们打印出来对象原型上的toString方法返回什么:

这里涉及到Object.prototype.toString()的原理。由于我还学的不深入,就不做总结了,

具体可以看这篇总结的不错:【传送门

大致意思有:

调用toString时会将this对象的[[class]]属性值拿到,而这个属性值就是该对象的真实类型。

[[class]]:一个内部属性,字符串值,表示对象的类型。只有toString这一个方法可以拿到。

而在es5中,toString获取[[class]]值时需要经过这几个比较特殊的步骤:

总结:

调用toString时会将this对象的[[class]]属性值拿到,而这个属性值就是该对象的真实类型。

又因为call能够显示的修改this指针的对象,所以用call将Object内部的this对象指向我们要检测的变量自身。

从而再通过toString拿到变量的[[class]]值。

方案三:原型prototype + isPrototypeOf()方法

Array.prototype.isPrototypeOf(variable) 

isPrototypeOf() 函数 : 用于指示对象是否存在于一个对象的原型链中。如果存在返回true,反之返回false。该方法属Object对象,由于所有的对象都继承了Object的对象实例,因此几乎所有的实例对象都可以使用该方法。

所以在上边代码公式中,如果variable的原型链中存在Array对象,就会返回true,也就说明variable是数组类型。

isPrototypeOf的字面意思也就是a是不是b的原型。

看上图就知道了,Array就是变量m的原型。所以用这个方法就能判断出来。

对比一个类型为“纯”Object的变量打印出来的信息:

就更加一目了然为什么用这个方法就可以判断出来了吧!

方案四:构造函数 constructor

variable.constructor.toString().indexOf("Array") !== -1

这个一图胜千言:

对比变量a的打印信息,可以看出来,一个数组类型的实例,其原型__proto__.constructor右边是Array关键字。

所以我们可以用这个关键点拿到也给字符串:

然后用方案二的原理差不多的,我们查找字符串中Array关键字的位置是否等于-1。即能得出变量是否为数组类型得了。

方案五:数组方法 isArray()

Array.isArray(variable);

思路:

js的一个方法,专门用来测试对象是否是Array类型

 在方案一、二、三的基础上,可以总结整理这个isArray的内部原理

然后把方案1234自己封装成isArray()函数。(待做)

2018-11-19  21:06:57

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS-各种cs样式之浏览器兼容处理方式汇总大全(更新中...)

    xing.org1^
  • css - 兼容适配坑点总结(。。。)

    1. transform为代表的这些css3属性一定要写-webkit-,不然低版本(目前遇到的是8)的苹果,不支持。

    xing.org1^
  • 小程序 - swiper除了左右切换还有上下滚动超出屏幕的内容

    xing.org1^
  • MySQL性能调优金字塔

    本文介绍的三种调优方法是按照金字塔的调优顺序排列的,如下图所示。一般来说,自底向上调优的效果是成反比的,而越往下层调优效果越好,但是难度也越大。

    用户1682855
  • 解读MySQL性能调优“金字塔”

    蒸汽机的改进不是一蹴而就的,MySQL性能的改进也是贯穿整个MySQL发展史的。MySQL之父Monty在1981年写了MySQL的第一行代码以后,在开源的帮助...

    博文视点Broadview
  • MySQL命令行导出导入数据库和数据表

    如我输入的命令行:cd C:\Program Files\MySQL\MySQL Server 5.7\bin

    拓荒者
  • 程序员?你了解互联网么? 原

    蒂姆·伯纳斯-李建立的第一个网站(也是世界上第一个网站)是http://info.cern.ch/,它于1991年8月6日上网,它解释了万维网是什么,如何使用网...

    kinbug [进阶者]
  • 思维和机器中的词义(CS)

    译文:由于自然语言处理(NLP)的最新进展,机器显示出越来越广泛的语言能力。许多算法源于心理学过去的计算工作,提出了一个问题:它们是否像人们一样理解单词。在这篇...

    N乳酸菌
  • Java基础-IO流

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    cwl_java
  • LaCie 2big Dock Thunderbolt 3发布了

    近日,全球领先的存储解决方案提供商希捷科技公司(NASDAQ:STX)旗下的高端品牌LaCie今天在北京举办“LaCie,畅想创作之美”智慧媒体存储解决方案暨新...

    挖掘大数据

扫码关注云+社区

领取腾讯云代金券