哟才是毋庸置疑的javascript数组检测方法

前方的说话

  对于确定有对象是无是累组,一直是数组的一个经典问题。本文专门拿该问题选择下,介绍什么才是毋庸置疑的javascript数组检测方法 

 

typeof

  首先,使用最常用之路检测工具——typeof运算符

var arr = [1,2,3];
console.log(typeof arr);//'object'

  前面都介绍了,累组的庐山真面目凡是同一种植奇特之目标,所以回来’object’。typeof运算符只能用来分原始类型和对象类型,对于再次现实的目标类型是力不从心识别出的

 

instanceof

  这时,该instanceof运算符出场了,instanceof运算符用来判断一个对象是否是一定构造函数的实例

var arr = [1,2,3];
console.log(arr instanceof Array);//true

var str = '123';
console.log(str instanceof Array);//false

  看上去十分实用。但,这时就引出了数组检测的经文场景——网页遭到隐含多只框架

  【1】先创造一个父网页box.html和子网页in.html,其中父网页通过iframe包含子网页

//子网页为空
//父网页
<iframe name="child" src="in.html"></iframe>

  【2】测试大网页和子网页的通信,注意早晚要是于服务器环境下测试

//子网页
var arr = [1,2,3];

//父网页
window.onload = function(){
    console.log(child.window.arr);// [1,2,3]
}

  【3】测试成功,这时进行数组检测

//子网页
var arr = [1,2,3];

//父网页
function test(arr){
    return arr instanceof Array;
}
window.onload = function(){
    console.log(child.window.arr);// [1,2,3]
    console.log(test(child.window.arr));//false
}

  测试后发现,数组检测的结果是false。这是盖网页遭到蕴藏多个框架,那其实就在多只不同的全局环境,从而有不同版本的Array构造函数。如果从一个框架为其它一个框架传入一个频繁组,那么传入的数组与在第二单框架中原生创建的数组分别有各自不同的构造函数

 

toString

  typeof操作符在此地帮不上忙,而instanceof操作符只能用来简单的景况,这时便需祭出异常杀器——toString(),通过引用Object的toString()方法来检查对象的类属性,对数组而言该属性之值总是”Array”

var arr = [1,2,3];
console.log(Object.prototype.toString.call(arr) === '[object Array]');//true

  或者,可以自定义类型识别函数

function type(obj){
    return Object.prototype.toString.call(obj).slice(8,-1).toLowerCase();
}
var arr = [1,2,3];
console.log(type(arr));//'array'

  以差不多框架环境中测试,同样返回’array’

//子网页
var arr = [1,2,3];

//父网页
function test(arr){
    return arr instanceof Array;
}
function type(obj){
    return Object.prototype.toString.call(obj).slice(8,-1).toLowerCase();
}
window.onload = function(){
    console.log(child.window.arr);// [1,2,3]
    console.log(test(child.window.arr));//false
    console.log(type(child.window.arr));//'array'
}

 

isArray

  为了为数组检测还便宜,ECMAScript5剧增了Array.isArray()方法。该法的目的是最终确定有值到底是匪是一再组,而随便她以哪个全局环境被开创的 

var arr = [1,2,3];
console.log(Array.isArray([]));//true
console.log(Array.isArray({}));//false
console.log(Array.isArray(arr));//true

  在多框架环境面临测试,同样返回true

//子网页
var arr = [1,2,3];

//父网页
console.log(Array.isArray(child.window.arr));//true

 

一体化测试代码

【子网页(in.html)】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<script>
var arr = [1,2,3];
</script>    
</body>
</html>

【父网页(box.html)】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<iframe name="child" src="in.html"></iframe>
<script>
function test(arr){
    return arr instanceof Array;
}
function type(obj){
    return Object.prototype.toString.call(obj).slice(8,-1).toLowerCase();
}
window.onload = function(){
    console.log(child.window.arr);// [1,2,3]
    console.log(test(child.window.arr));//false
    console.log(type(child.window.arr));//'array'
    console.log(Array.isArray(child.window.arr));//true
}
</script>    
</body>
</html>