何以才是不利的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>