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 相关文章推荐
JS随机漂浮广告代码具体实例
Nov 19 Javascript
js判断滚动条是否已到页面最底部或顶部实例
Nov 20 Javascript
jQuery超赞的评分插件(8款)
Aug 20 Javascript
实现非常简单的js双向数据绑定
Nov 06 Javascript
给easyui的datebox控件添加清空按钮的实现方法
Nov 09 Javascript
Angular.JS通过指令操作DOM的方法
May 10 Javascript
yarn的使用与升级Node.js的方法详解
Jun 04 Javascript
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
javascript实现手动点赞效果
Apr 09 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
Jun 03 Javascript
初试vue-cli使用HBuilderx打包app的坑
Jul 17 Javascript
layer 关闭指定弹出层的例子
Sep 25 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
如何使用FireFox插件FirePHP调试PHP
2013/07/23 PHP
php数组去重实例及分析
2013/11/26 PHP
php中文字符串截取多种方法汇总
2016/10/06 PHP
php常用正则函数实例小结
2016/12/29 PHP
PHP分享图片的生成方法
2018/04/25 PHP
JavaScript入门教程(6) Window窗口对象
2009/01/31 Javascript
JavaScript高级程序设计 DOM学习笔记
2011/09/10 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
2013/04/02 Javascript
在jQuery中 关于json空对象筛选替换
2013/04/15 Javascript
JS中的异常处理方法分享
2013/12/22 Javascript
jquery常用特效方法使用示例
2014/04/25 Javascript
js的[defer]和[async]属性
2014/11/24 Javascript
了解Javascript的模块化开发
2015/03/02 Javascript
jquery实现拖动效果(代码分享)
2017/01/25 Javascript
JavaScript中document.referrer的用法详解
2017/07/04 Javascript
WdatePicker.js时间日期插件的使用方法
2017/07/26 Javascript
JavaScript实现树的遍历算法示例【广度优先与深度优先】
2017/10/26 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
2018/10/24 Javascript
Vue Echarts实现可视化世界地图代码实例
2019/05/07 Javascript
浅谈Vue 函数式组件的使用技巧
2020/06/16 Javascript
Python实现iOS自动化打包详解步骤
2018/10/03 Python
想学python 这5本书籍你必看!
2018/12/11 Python
python采集微信公众号文章
2018/12/20 Python
python 利用turtle模块画出没有角的方格
2019/11/23 Python
Python命令行click参数用法解析
2019/12/19 Python
在python3中实现更新界面
2020/02/21 Python
python新式类和经典类的区别实例分析
2020/03/23 Python
Python3 中sorted() 函数的用法
2020/03/24 Python
Python3 用matplotlib绘制sigmoid函数的案例
2020/12/11 Python
python drf各类组件的用法和作用
2021/01/12 Python
HTML5添加鼠标悬浮音响效果不使用FLASH
2014/04/23 HTML / CSS
戴尔新加坡官网:Dell Singapore
2020/12/13 全球购物
专业实习自我鉴定
2013/10/29 职场文书
领导班子对照检查剖析材料
2014/10/13 职场文书
行政助理岗位职责
2015/02/10 职场文书
装修公司管理制度
2015/08/05 职场文书