利用JS判断元素是否为数组的方法示例

 更新时间:2021年01月08日 16:05:32   作者:Fahrenheitzz  
这篇文章主要给大家介绍了关于利用JS判断元素是否为数组的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

此处提供可供验证的数据类型

let a = [1,2,3,4,5,6];
 let b = [
 {name: '张飞', type: 'tank'},
 {name: '关羽', type: 'soldier'},
 {name: '刘备', type: 'shooter'},
 ];
 let c = 123;
 let d = 'www';
 let e = {name: '安琪拉', type: 'mage'};

1.通过Array.isArray()

Array.isArray()能判断一个元素是否为数组,如果是就返回true,否则就返回false

console.log(Array.isArray(a)); // true
 console.log(Array.isArray(b)); // true
 console.log(Array.isArray(c)); // false
 console.log(Array.isArray(d)); // false
 console.log(Array.isArray(e)); // false

2.通过instanceof判断

instanceof运算符用于检测某个实例是否属于某个对象原型链中

console.log(a instanceof Array); // true
 console.log(b instanceof Array); // true
 console.log(c instanceof Array); // false
 console.log(d instanceof Array); // false
 console.log(e instanceof Array); // false

还可以用于判断对象

console.log(e instanceof Object); // true

判断是否为数组就是检测Arrray.prototype属性是否存在于变量数组(a,b)的原型链上,显然a,b为数组,拥有Arrray.prototype属性,所以为true

3.通过对象构造函数的constructor判断

Obiect的每个实例都有构造函数constructor,保存着创建每个对象的函数

console.log(a.constructor === Array); // true
console.log(b.constructor === Array); // true

以下包含判断其它的数据类型验证

console.log(c.constructor === Number); // true
console.log(d.constructor === String); // true
console.log(e.constructor === Object); // true

4.通过Object.prototype.toString.call()判断

通过原型链查找调用

console.log(Object.prototype.toString.call(a) === '[object Array]'); // true
console.log(Object.prototype.toString.call(b) === '[object Array]'); // true

以下包含判断其它的数据类型验证

console.log(Object.prototype.toString.call(c) === '[object Number]'); // true
console.log(Object.prototype.toString.call(d) === '[object String]'); // true
console.log(Object.prototype.toString.call(e) === '[object Object]'); // true

5.通过对象原型链上的isPrototypeOf()判断

Array.prototype属性为Array的构造函数原型,里面包含有一个方法 isPrototypeOf() 用于测试一个对象是否存在于;另一个对象的原型链上。

console.log(Array.prototype.isPrototypeOf(a)); // true
 console.log(Array.prototype.isPrototypeOf(b)); // true
 console.log(Array.prototype.isPrototypeOf(c)); // false
 console.log(Array.prototype.isPrototypeOf(d)); // false
 console.log(Array.prototype.isPrototypeOf(e)); // false

总结

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

相关文章

  • 前端BOM操作常用命令详解及代码案例

    前端BOM操作常用命令详解及代码案例

    浏览器对象模型(BOM)是浏览器提供的JavaScript操作浏览器的API,提供了与网页无关的浏览器功能对象,这篇文章主要给大家介绍了关于前端BOM操作常用命令详解及代码案例的相关资料,需要的朋友可以参考下
    2024-10-10
  • ie8下修改input的type属性报错的解决方法

    ie8下修改input的type属性报错的解决方法

    当用户勾选显示明文复选框时,要以明文显示用户输入的密码,去掉勾选时要变回密文,问题是ie8中是不允许修改input的type属性
    2014-09-09
  • 小程序自定义tabbar导航栏及动态控制tabbar功能实现方法(uniapp)

    小程序自定义tabbar导航栏及动态控制tabbar功能实现方法(uniapp)

    在项目中遇到一个需求,根据不同的账号,生成不同的tabBar,下面这篇文章主要给大家介绍了关于小程序自定义tabbar导航栏及动态控制tabbar功能实现方法(uniapp)的相关资料,需要的朋友可以参考下
    2022-12-12
  • JavaScript中实现无缝滚动、分享到侧边栏实例代码

    JavaScript中实现无缝滚动、分享到侧边栏实例代码

    本文给通过js代码实现无缝滚动,侧边栏效果,在项目中经常会遇到,下面小编把代码整理分享到脚本之家平台,供大家参考
    2016-04-04
  • JavaScript请求后台数据的常用方法汇总

    JavaScript请求后台数据的常用方法汇总

    这篇文章主要介绍了JavaScript请求后台数据的几种常用方式,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-06-06
  • JavaScript 继承详解(五)

    JavaScript 继承详解(五)

    在本章中,我们将分析John Resig关于JavaScript继承的一个实现 - Simple JavaScript Inheritance,需要的朋友可以参考下
    2016-10-10
  • 微信小程序实现弹出层禁止页面滚动

    微信小程序实现弹出层禁止页面滚动

    这篇文章主要为大家详细介绍了微信小程序实现弹出层禁止页面滚动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • 通过实例了解Render Props回调地狱解决方案

    通过实例了解Render Props回调地狱解决方案

    这篇文章主要介绍了通过实例了解Render Props回调地狱解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-11-11
  • js 二进制流转图片的操作方法

    js 二进制流转图片的操作方法

    这篇文章主要介绍了js 二进制流转图片的操作方法,接收数据大家需要注意,如果后端的接口是get方法,可以直接使用img标签,本文通过示例代码讲解的非常详细,需要的朋友参考下吧
    2023-12-12
  • TypeScript中Enum类型的具体使用

    TypeScript中Enum类型的具体使用

    在TypeScript 中,枚举或枚举类型是具有一组常量值的常量长度的数据结构,本文主要介绍了TypeScript中Enum类型的具体使用,具有一定的参考价值,感兴趣的可以了解一下
    2023-10-10

最新评论