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获取每个对象的类型:
字符串:
数字:
boolean
数组:
函数:
对象:
首先我们打印出来对象原型上的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
js -【 数组】判断一个变量是数组类型的几种方法的更多相关文章
- 如何判断一个变量是数组Array类型
在很多时候,我们都需要对一个变量进行数组类型的判断.JavaScript中如何判断一个变量是数组Array类型呢?我最近研究了一下,并分享给大家,希望能对大家有所帮助. JavaScript中检测对象 ...
- Java判断一个字符是否是数字的几种方法的代码
在工作期间,将写内容过程经常用到的一些内容段做个记录,下面内容是关于Java判断一个字符是否是数字的几种方法的内容,希望能对码农们有好处. public class Test{ public stat ...
- Javascript如何判断一个变量是数字类型?
isNaN()不能判断一个变量是否为数字类型,isNaN(123)值为false,isNaN('123')值也为false.isNaN() 的实际作用跟它的名字isNaN并不一致,isNaN(NaN) ...
- js判断一个变量是数组还是对象
判断变量是数组还是对象,使用Object.prototype.toString.call(),兼容性好,切勿使用typeof来判断对象或者数组,因为typeof得到的都是object: functio ...
- JavaScript中判断对象是否属于Array类型的4种方法及其背后的原理与局限性
前言 毫无疑问,Array.isArray是现如今JavaScript中判断对象是否属于Array类型的首选,但是我认为了解本文其余的方法及其背后的原理与局限性也是很有必要的,因为在JavaScrip ...
- js如何判断一个变量是否是数组?
//方法一 var arr = [1,2,3]; var obj = {'name': 'xiaoming','age': 19}; if(arr.constructor == Array){ ale ...
- js如何判断一个值是不是Array类型
本来判断一个对象类型用typeof是最好的,不过对于Array类型是不适用的可以使用 instanceof操作符var arrayStr=new Array("1","2 ...
- 判断一个字符是否为数字的两种方法(C/C++)
在平时,我们经常遇见判断字符是否为数字这种题目,虽然感觉还是很简单,不过我是个更喜欢用函数的人,因为我觉得这样更便捷,所以我更推荐第二种方式. 1.直接判断 #include <stdio.h& ...
- 用javascript判断一个html元素是否存在的五种方法:
1. 判断表单元素是否存在(一) if("periodPerMonth" in document.theForm){ return true; }else{ return fals ...
随机推荐
- Linux TC(Traffic Control)框架原理解析
近日的工作多多少少和Linux的流控有点关系.自打几年前知道有TC这么一个玩意儿而且多多少少理解了它的原理之后,我就没有再动过它,由于我不喜欢TC命令行,实在是太繁琐了.iptables命令行也比較繁 ...
- 在 Python 中使用 in_memory 工作空间
在 Python 中使用 in_memory 工作空间 在 Python 脚本中,in_memory 工作空间仅对地理处理工具有效:它不是可以写入任何数据的通用虚拟目录. 您可以按以下代码示例所示使用 ...
- RxJava2 源码解析(一)
概述 最近事情太多了,现在公司内部的变动,自己岗位的变化,以及最近决定找工作.所以博客耽误了,准备面试中,打算看一看RxJava2的源码,遂有了这篇文章. 不会对RxJava2的源码逐字逐句的阅读,只 ...
- .net里Release的pdb文件有什么用 是否可以删除
程序数据库 (PDB) 文件保存着调试和项目状态信息,使用这些信息可以对程序的调试配置进行增量链接. 在使用 /debug 生成时,会创建一个 PDB 文件. 可以使用 /debug:full 或 / ...
- Asp.Net Core 通过自定义中间件防止图片盗链的实例(转)
一.原理 要实现防盗链,我们就必须先理解盗链的实现原理,提到防盗链的实现原理就不得不从HTTP协议说起,在HTTP协议中,有一个表头字段叫referer,采用URL的格式来表示从哪儿链接到当前的网页或 ...
- Js实现页面关键字高亮显示
<!DOCTYPE HTML> <html lang="en"> <meta http-equiv="Content-Type" ...
- plsql连接oracle数据库,不用配置任何东西(转)
在软件开发的过程中,对于使用oracle的朋友们来说,使用plsql工具操作oracle数据库是非常方便的,可是plsql连接oracle数据库的方式有很多种,今天就给大家介绍一种最简单的连接方式,只 ...
- zabbix用户管理
zabbix用户管理,主要包括用户增删改查.用户报警媒介管理.用户权限管理. 安装完zabbix后,已经自带了两个用户Admin和Guests 超级管理员默认账号:Admin,密码:zabbix,这是 ...
- 安装SQL Server For Linux(Install SQL Server)
SQL Server on Ubuntu——Ubuntu上的SQL Server(全截图) 1. 安装SQL Server 官网安装指南:https://docs.microsoft.com ...
- OpenLayers典型部分概述
中文学习:http://www.openlayers.cn/portal.php 原文地址:https://www.jianshu.com/p/e693711a7008 一 OpenLayers核心职 ...