JS之判断是否为对象或数组的几种方式总结

 更新时间:2023年04月19日 09:31:22   作者:前端@小菜  
这篇文章主要介绍了JS之判断是否为对象或数组的几种方式总结,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

JS判断是否为对象或数组的几种方式

判断值是否是对象

1.toString 方式【常用】

Object.prototype.toString.call(val) === '[object Object]' // true 代表为对象

注意:这里要使用 call 方法改变作用域

2.constructor 方式

val?.constructor === Object // true 代表为对象

这里使用了 null 传导符(?.) 以防止出错

3.typeof 与 instanceof

typeof 与 instanceof 并不能完全判断一个值为对象

typeof 的取值有:

  • "undefined"——如果这个值未定义;
  • "boolean"——如果这个值是布尔值;
  • "string"——如果这个值是字符串;
  • "number"——如果这个值是数值;
  • "object"——如果这个值是对象(包括数组)或null;
  • "function"——如果这个值是函数;
  • "symbol"——如果这个值是Symbol

instanceof 操作符对于数组和对象都返回 true

[] instanceof Object // true
new Object instanceof Object // true

4.__proto__ 方式【不推荐】

 __proto__属性,用来读取或设置当前对象的 prototype 对象,此属性未纳入标准,不建议使用。

val.__proto__ === Object.prototype // true 代表为对象

5.Object.getPrototypeOf 方式

Object.getPrototypeOf(),用来读取对象的 prototype 对象。

Object.getPrototypeOf(val) === Object.prototype // true 代表为对象

判断值是否为数组

1.toString 方式

Object.prototype.toString.call(val) === '[object Array]' // true 代表为数组

注意:这里要用 Object 的 toString 方法,Array 的 toString 返回的是拼接的字符串

var colors = ['red', 'blue', 'green'];
console.log(colors.toString());  // red,blue,green

2.Array.isArray 方法【推荐】

ES5中提供了 isArray 方法用来判断值是否为数组

Array.isArray(val) // true 代表为数组

3.instanceof 方式

val instanceof Array // true 代表为数组

为什么 instanceof 可以用来判断数组而不可以判断对象呢?因为数组本身就是一个类似于列表的高阶对象。

4.constructor 方式

val?.constructor === Array // true 代表为数组

5. __proto__ 方式【不推荐】

val.__proto__ === Array.prototype // true 代表为数组

6.Object.getPrototypeOf 方式 

Object.getPrototypeOf(val) === Array.prototype // true 代表为数组

7.isPrototypeOf 方式

isPrototypeOf() 方法用于测试一个对象是否存在于另一个对象的原型链上。

Array.prototype.isPrototypeOf(val) // true 代表为数组

该方式不能用来判断对象!

如何判断一个对象是不是数组(例子解释)

先上代码

      let shuzu=[];
      shuzu.push(1,2,3,43);      //向数组里添加几项
      console.log(shuzu);        //打印这个数组
      console.log(Array.isArray(shuzu));                  //方法1
      console.log(shuzu instanceof Array);                //方法2
      console.log(Array.prototype.isPrototypeOf(shuzu));  //方法3
      console.log(Object.prototype.toString.call(shuzu)); //方法4

结果:

在这里插入图片描述

四种方法我简称方法1,方法2,方法3,方法4。

方法1:Array.isArray(…),这是JS已经提供的判断一个对象是不是数组的方法

方法2: … instanceof Array,instanceof是用来判断引用类型的方法,而type则是用来判断基本类型的方法,instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性,返回一个布尔值。

方法3:Array.prototype.isPrototypeOf(…),利用isPrototypeOf()方法,判定Array是不是在obj的原型链中,如果是,则返回true,否则false。

方法4:Object.prototype.toString.call(…),根据对象的class属性(类属性),跨原型链调用toString()方法,在js中一个对象一旦被创建,在内部会携带创建对象的类型名,js中提供了调用对象原型中的toString方法,也就是其中call可以这么理解,相当于对象去借用这个 Object.prototype.toString();

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • JavaScript实现计算圆周率到小数点后100位的方法示例

    JavaScript实现计算圆周率到小数点后100位的方法示例

    这篇文章主要介绍了JavaScript实现计算圆周率到小数点后100位的方法,简单分析了圆周率计算的原理并结合实例形式给出了javascript计算圆周率的具体操作技巧,需要的朋友可以参考下
    2018-05-05
  • 微信小程序蓝牙连接小票打印机实例代码详解

    微信小程序蓝牙连接小票打印机实例代码详解

    这篇文章主要介绍了微信小程序蓝牙连接小票打印机实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06
  • 使用JS取得焦点(focus)元素代码

    使用JS取得焦点(focus)元素代码

    这篇文章主要介绍了使用JS取得焦点(focus)元素的具体实现,需要的朋友可以参考下
    2014-03-03
  • JavaScript字符串分割处理的方法总结

    JavaScript字符串分割处理的方法总结

    这篇文章主要介绍了JavaScript字符串分割处理的几种方法,js截取重要的三要素substring()、subsstr()、slice(),下面文章围绕这三要素展开全文,需要的小伙伴可以参考一下
    2022-03-03
  • JS实现同一个网页布局滑动门和TAB选项卡实例

    JS实现同一个网页布局滑动门和TAB选项卡实例

    这篇文章主要介绍了JS实现同一个网页布局滑动门和TAB选项卡效果,通过简单的自定义切换函数setTab实现页面元素的遍历及属性切换的功能,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • JavaScript多图片上传案例

    JavaScript多图片上传案例

    JS上传多图片例子,为了更人性化,不要固定初始化时的个数,可以通过由用户决定上传图片的个数,即是动态地创建上传图片文框和按钮的个数,感兴趣的小伙伴们可以参考一下
    2015-09-09
  • javascript中的数字与字符串相加实例分析

    javascript中的数字与字符串相加实例分析

    javascript中的数字与字符串相加实例分析,学习js的朋友可以参考下。
    2011-08-08
  • BootStrap Table对前台页面表格的支持实例讲解

    BootStrap Table对前台页面表格的支持实例讲解

    bootstrap-table是在bootstrap的基础上面做了一些封装,所以在使用bootstrap-table之前要导入的js和css,下面通过本文给大家详细介绍需要引入的文件,对bootstrap table 表格感兴趣的朋友一起看看吧
    2016-12-12
  • 一文剖析JavaScript中闭包的难点

    一文剖析JavaScript中闭包的难点

    这篇文章主要为大家详细介绍了JavaScript中闭包的一些难点,文中的示例代码讲解详细,对我们学习JavaScript有一定帮助,需要的可以参考一下
    2022-09-09
  • JS中比较冷门但非常好用的方法总结

    JS中比较冷门但非常好用的方法总结

    在Js中有一些比较冷门但是非常好用的方法,我在这里称之为高级方法,这些方法没有被广泛使用或多或少是因为存在一些兼容性的问题,不是所有的浏览器都读得懂的,这篇文章主要就是对这些方法做一个总结,让我们一起来看一下吧
    2023-06-06

最新评论