前端面试题目之原生js判断是否为数组的函数

判断是否为一个数组

typeof

对于五种基础类型(除了null),都可以用typeof来判断,对于null,array,function,object会是什么结果呢?


console.log(typeof null); //object
console.log(typeof []); //object
console.log(typeof {}); //object
console.log(typeof function(){}) //function

jQuery.isArray方法的分析


jQuery.isArray:
Array.isArray || function( obj ) {
return jQuery.type(obj) === "array";
}


jQuery.type:
function( obj ) {
if ( obj == null ) {
return obj + "";
}
return typeof obj === "object" || typeof obj === "function" ?
class2type[ toString.call(obj) ] || "object" :
typeof obj;
}

可以看到jQuery.isArray先是试图调用原生的isArray方法,若没有就调用jQuery.type方法。
jQuery.type 先判断是否为null或undefined是就返回其字符串形式,否则先调用typeof判断是否为object或function,是的话调用class2type[ toString.call(obj) ]可以详细判断,否则调用原生typeof

还不明白去看这篇文章

instanceof

用于判断一个变量是否为某个对象的实例


console.log([] instanceof Array); //true

constructor

返回对创建此对象的数组函数的引用,即返回对象相对应的构造函数


console.log([].constructor === Array); //true
console.log({}.constructor === Object); //true
console.log("string".constructor === String); //true
console.log((123).constructor === Number); //true
console.log(true.constructor === Boolean); //true

问题

在不同 iframe 中创建的 Array 并不共享 prototype。

因为array属于引用型数据,传递过程仅传递地址,所以用instanceof和constructor判断的array,因为涉及了原型链,所以必须是在当前页面声明的

Object.prototype.toString

这种方法就是刚才的class2type[ toString.call(obj) ]的原理,淘宝的 kissy 也是使用这种方式

涉及prototype和call不懂的快去复习


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

ES5中isArray

目前浏览器基本都支持了ES5,所以这是判断数组的最好方法


console.log( Array.isArray([]) ) //true

总结

综上所述,考虑兼容性和效率问题,以及代码整洁,判断是否为数组的函数封装如下:


function isArray(o){
return Array.isArray(o) || Object.prototype.toString.call(o) === "[object Array]";
}

练习

原生js实现一个判断数据类型的函数

参考文章:js判断是否为数组的函数: isArray()

更多前端杂谈和知识总结尽在Deacyn的修炼之路

你可能感兴趣的:(前端面试题目之原生js判断是否为数组的函数)