判断是否是数组的几种方法— (js基础复习第1期)

supernavy 发布于2019-08-23 12:59 / 3257人阅读

摘要：如果网页中包含多个框架，那实际上就存在两个以上不同的全局执行环境，从而存在两个以上不同版本的构造函数。如果你从一个框架向另一个框架传入一个数组，那么传入的数组与在第二个框架中原生创建的数组分别具有各自不同的构造函数。

1. 首先，typeof肯定是不行的

对于一些基本类型，typeof是可以判断出数据类型，但是判断一些引用类型时候，不能具体到具体哪一种类型
再来复习一下typeof的用法：

// 基本类型
typeof 123;  //number
typeof "123"; //string
typeof true; //boolean
typeof undefined; //undefined
typeof null; //object
let s = Symbol;
typeof s; //symbol

// 引用类型
typeof [1,2,3]; //object
typeof {}; //object
typeof function(){}; //function
typeof  Array; //function  Array类型的构造函数
typeof Object; //function  Object类型的构造函数
typeof Symbol; //function  Symbol类型的构造函数
typeof Number; //function  Number类型的构造函数
typeof String; //function  String类型的构造函数
typeof Boolean; //function  Boolean类型的构造函数

2. 两种简单，但是不是十分准确的方法

var obj = [4,67,23];
obj instanceof Array; //return true 
obj.constructor == Array; // return true

为什么不准确?

2.1 首先来复习一下instanceof用法

判断一个实例是否属于某种类型

function Foo(name) {
    this.name = name;
}
var f = new Foo("zhangsan");
console.log(f instanceof Foo); //true
console.log(f instanceof Object); //true

判断一个实例是否属于它的父类型

function Person() {};
function Student() {};
var p = new Person();
Student.prototype = p;
var s = new Student();
console.log(s instanceof Student); //true
console.log(s instanceof Person); //true

记忆：
A instanceof C   等价于  A 是否是 C子类，或者后代？

2.2 instanceof 判断逻辑？

判断逻辑翻译成js代码如下：

_instanceof(f, Foo);  

function _instanceof(L, R) {
    var R = o.prototype;
    var L = L.__proto__;
    while( true) {
        if(L == null) {
            return false;
        }
        if(L == R) {
            return true;
        }
        L = L.__proto__;
    }
}

2.3 instanceof 不准确的原因?

代码如下：

    var iframe = document.createElement("iframe");
    document.body.appendChild(iframe);

    var arr = [1,2,3];
    xArray = window.frames[0].Array;  //iframe中的构造函数
    var arrx = new xArray(4,5,6);

    console.log(arrx instanceof Array);  //false
    console.log(arrx.constructor == Array);// false

    console.log(Array.prototype == xArray.prototype); //false
    console.log(arr instanceof xArray); //false

    console.log(arrx.constructor === Array);// false
    console.log(arr.constructor === Array);// true
    console.log(arrx.constructor === xArray);// true
    console.log(Array.isArray(arrx));  //true

解释：红宝书，p88

instanceof操作符的问题在于，它假定只有一个全局环境。如果网页中包含多个框架，那实际上就存在两个以上不同的全局执行环境，从而存在两个以上不同版本的Array构造函数。
如果你从一个框架向另一个框架传入一个数组，那么传入的数组与在第二个框架中原生创建的数组分别具有各自不同的构造函数。

2.4 constructor 不准确的原因?

因为constructor可以被重写，所以不能确保一定是数组
example：

    var str = "abc";
    str.constructor = Array;
    str.constructor === Array // return true

而很明显str不是数组。
而且constructor和instanceof存在同样问题，不同执行环境下，constructor判断不正确问题。

3. isArray()

最终确定某个值到底是不是数组，而不管它是在哪个全局执行环境中创建的，这个方法的用法如下。

if（Array.isArray(value)）{
    return true;
}

4. Object.prototype.toString

如果在尚未实现isArray方法的浏览器中准确监测数组,我们需要用到Object.prototype.toString方法来判断，每一个继承自Object的对象都拥有toString的方法。

if(!Array.isArray){
    Array.isArray = function(arg){
        return Object.prototype.toString.call(arg)==="[object Array]"
    }

}

自己可以封装一个获取变量类型的函数

function getType(obj) {
    return Object.prototype.toString.call(obj).slice(8,-1);
}

var a = [1,2,3];
console.log(getType(a)); //Array 

var b = function(){};
console.log(getType(b)); //Function

5. 参考文章

JavaScript instanceof 运算符深入剖析
javascript 判断变量是否是数组（Array）

GPU云服务器云服务器 js缓存的几种方法 js判断数组中是否包含某一项 js的几种数据类型 js 判断是否是集合

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99140.html

数组的使用总结— (js基础复习第2期)

摘要：前一个值，当前值，索引，数组对象产生新数组的迭代器方法类似，对数组的每个元素使用某个函数，并返回新数组和相似，传入一个返回值为布尔类型的函数。 1. 前言数组真的是每天用了，但是有很多方法都是记不住，总是要百度查，很烦，所以才写了个数组使用总结，有什么不对的希望大家指出来。 2. 思路先看看这些问题都记得很清楚么？创建数组，怎么创建数组的数组的构造方法Array有哪些方法？E...

zhigoo 2019-08-23 13:10 评论0 收藏0
前端培训-初级阶段（13、18）

摘要：年月欧洲计算机制造商协会发表了标准，它是的一个扩延，它也被称为年月首版年月日截止发布日期，的官方名称是，国际意在更频繁地发布包含小规模增量更新的新版本，下一版本将于年发布，命名为。前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的...

YorkChen 2019-08-23 16:22 评论0 收藏0
复习笔记（新手向） - JS对象声明的几种方式

摘要：二用操作符构造对象属性名属性值属性名属性值属性名属性值属性名属性值方法名方法名首先用创建一个空对象，然后用多条语句给对象添加属性方法。他的写法与三用函数声明的方式构造对象比较像，但是稍有不同。 -- 新手向知识，就不用ES6写法了。一、字面量声明 var obj = { 属性名1 : 属性值, 属性名2 : 属性值, 属性名3 : 属性...

davidac 2019-08-23 11:58 评论0 收藏0
【面试系列】番外：关于糯米面试

摘要：番外关于糯米面试结果总而言之一句话糯米的面试挂了过程把面试过程中面试官的问题分享一下有几种数据类型。将一个字符串转化为数字，将数字转化为字符串。获取当前网址并从中截取信息。究其愿意还是对字符串和数组的操作不熟练，我决定深刻反思。番外：关于糯米面试结果总而言之一句话：糯米的面试挂了过程把面试过程中面试官的问题分享一下： js有几种数据类型。将一个字符串转化为数字，将数字转化...

PiscesYE 2019-08-29 11:09 评论0 收藏0