js判断一个对象是数组(函数)的方法实例


Posted in Javascript onDecember 19, 2019

1.typeof操作符

js判断一个对象是数组(函数)的方法实例

示例:

// 数值
typeof 37 === 'number';
 
// 字符串
typeof '' === 'string';
 
// 布尔值
typeof true === 'boolean';
 
// Symbols
typeof Symbol() === 'symbol';
 
// Undefined
typeof undefined === 'undefined';
 
// 对象
typeof {a: 1} === 'object';
typeof [1, 2, 4] === 'object';
 
// 下面的例子令人迷惑,非常危险,没有用处。避免使用它们。
typeof new Boolean(true) === 'object';
typeof new Number(1) === 'object';
typeof new String('abc') === 'object';
 
// 函数
typeof function() {} === 'function';

从上面的实例我们可以看出,利用typeof除了array和null判断为object外,其他的都可以正常判断。

2.instanceof操作符 和 对象的constructor 属性

这个操作符和JavaScript中面向对象有点关系,了解这个就先得了解JavaScript中的面向对象。因为这个操作符是检测对象的原型链是否指向构造函数的prototype对象的。

var arr = [1,2,3,1];
console.log(arr instanceof Array); // true
 
var fun = function(){};
console.log(fun instanceof Function); // true
var arr = [1,2,3,1];
console.log(arr.constructor === Array); // true
 
var fun = function(){};
console.log(arr.constructor === Function); // true

第2种和第3种方法貌似无懈可击,但是实际上还是有些漏洞的,当你在多个frame中来回穿梭的时候,这两种方法就亚历山大了。由于每个iframe都有一套自己的执行环境,跨frame实例化的对象彼此是不共享原型链的,因此导致上述检测代码失效

var iframe = document.createElement('iframe'); //创建iframe
document.body.appendChild(iframe); //添加到body中
xArray = window.frames[window.frames.length-1].Array;
var arr = new xArray(1,2,3); // 声明数组[1,2,3]
alert(arr instanceof Array); // false
alert(arr.constructor === Array); // false

4.使用 Object.prototype.toString 来判断是否是数组

Object.prototype.toString.call( [] ) === '[object Array]' // true
 
Object.prototype.toString.call( function(){} ) === '[object Function]' // true

这里使用call来使 toString 中 this 指向 obj。进而完成判断

5.使用 原型链 来完成判断

[].__proto__ === Array.prototype // true
 
var fun = function(){}
fun.__proto__ === Function.prototype // true

6.Array.isArray()

Array.isArray([])  // true

ECMAScript5将Array.isArray()正式引入JavaScript,目的就是准确地检测一个值是否为数组。IE9+、 Firefox 4+、Safari 5+、Opera 10.5+和Chrome都实现了这个方法。但是在IE8之前的版本是不支持的。

总结:

综上所述,我们可以综合上面的几种方法,有一个当前的判断数组的最佳写法:

var arr = [1,2,3];
var arr2 = [{ name : 'jack', age : 22 }];
function isArrayFn(value){
  // 首先判断浏览器是否支持Array.isArray这个方法
  if (typeof Array.isArray === "function") {
    return Array.isArray(value);
  }else{
    return Object.prototype.toString.call(value) === "[object Array]";
    // return obj.__proto__ === Array.prototype;
  }
}
console.log(isArrayFn(arr)); // true
console.log(isArrayFn(arr2)); // true

上述代码中,为何我们不直接使用原型链的方式判断(兼容性好),而是先判断浏览器支不支持Array.isArray()这个方法,如果不支持才使用原型链的方式呢?我们可以从代码执行效率上看:
js如何判断一个对象是数组

js判断一个对象是数组(函数)的方法实例 从

这张图片我们可以看到,Array.isArray()这个方法的执行速度比原型链的方式快了近一倍。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript实现的动态文字变换
Jul 28 Javascript
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
Jun 18 Javascript
将string解析为json的几种方式小结
Nov 11 Javascript
JS表格组件神器bootstrap table详解(基础版)
Dec 08 Javascript
jQuery mobile 移动web(6)
Dec 20 Javascript
vue.js事件处理器是什么
Mar 20 Javascript
Vue中建立全局引用或者全局命令的方法
Aug 21 Javascript
详谈js的变量提升以及使用方法
Oct 06 Javascript
深入理解javascript prototype的相关知识
Sep 19 Javascript
vue router 传参获取不到的解决方式
Nov 13 Javascript
Angular短信模板校验代码
Sep 23 Javascript
vue 封装面包屑组件教程
Nov 16 Javascript
利用JS如何获取form表单数据
Dec 19 #Javascript
在Vue项目中使用Typescript的实现
Dec 19 #Javascript
JS数据类型STRING使用实例解析
Dec 18 #Javascript
JS精确判断数据类型代码实例
Dec 18 #Javascript
使用webpack/gulp构建TypeScript项目的方法示例
Dec 18 #Javascript
小程序简单两栏瀑布流效果的实现
Dec 18 #Javascript
js数据类型转换与流程控制操作实例分析
Dec 18 #Javascript
You might like
《逃离塔科夫》——“萌新劝退,老手自嗨”的硬核FPS游戏
2020/04/03 其他游戏
php计算两个坐标(经度,纬度)之间距离的方法
2015/04/17 PHP
使用PHP处理数据库数据如何将数据返回客户端并显示当前状态
2016/02/16 PHP
PHP实现的分页类定义与用法示例
2017/07/05 PHP
jQuery 遍历json数组的实现代码
2020/09/22 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
2014/03/19 Javascript
jquery实现的网页自动播放声音
2014/04/30 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
2014/05/02 Javascript
Javascript小技巧之生成html元素
2014/05/15 Javascript
动态加载jQuery的两种方法实例分析
2015/07/17 Javascript
详解微信小程序文件下载--视频和图片
2019/04/24 Javascript
jquery插件开发模式实例详解
2019/07/20 jQuery
vue 项目引入echarts 添加点击事件操作
2020/09/09 Javascript
vue项目中openlayers绘制行政区划
2020/12/24 Vue.js
NodeJS和浏览器中this关键字的不同之处
2021/03/03 NodeJs
Python修改MP3文件的方法
2015/06/15 Python
Python控制多进程与多线程并发数总结
2016/10/26 Python
Python3中函数参数传递方式实例详解
2019/05/05 Python
python3下载抖音视频的完整代码
2019/06/05 Python
在Python中过滤Windows文件名中的非法字符方法
2019/06/10 Python
python3获取url文件大小示例代码
2019/09/18 Python
django迁移文件migrations的实现
2020/03/31 Python
Python的信号库Blinker用法详解
2020/12/31 Python
孕妇装中的著名品牌:Isabella Oliver(伊莎贝拉·奥利弗)
2016/10/31 全球购物
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/04/11 面试题
幼儿园大班新学期寄语
2014/01/18 职场文书
小学生寒假家长评语
2014/04/16 职场文书
法定代表人身份证明书(含说明)
2014/10/02 职场文书
副检察长四风问题对照检查材料思想汇报
2014/10/07 职场文书
2014年精神文明工作总结
2014/12/23 职场文书
公司介绍信范文
2015/01/31 职场文书
九年级数学教学反思
2016/02/17 职场文书
nginx location优先级的深入讲解
2021/03/31 Servers
Ajax实现局部刷新的方法实例
2021/03/31 Javascript
mysql字符串截取函数小结
2021/04/05 MySQL
Java Shutdown Hook场景使用及源码分析
2021/06/15 Java/Android