判断数组的方法:Object.prototype.toString.call() , instanceof 以及 Array.isArray() 的区别

一、总结
1、Array.isArray()和instanceof对比

当检测Array实例时,Array.isArray()更优,因为可以检测出iframes
当对象的原型被修改后,instanceof1会判断错误
2、Array.isArray()和Object.prototype.toString.call()对比
Array.isArray()是es5新属性,在老浏览器中无法使用,可以用后者创建(原理就一样啦)
3、性能问题
Array.isArray > instanceof > .toString.call()
4、扩展:typeof 和 instanceof对比
typeof只能判断原始类型,引用类型返回都是Object
instanceof只能判断引用类型
二、Object.prototype.toString.call()
1、Class是一个内部属性,值为一个类型字符串,可以用来判断值的类型,每种内置对象中都定义了[]Class]]内部属性的值。
2、详细解释:本规范的每种内置对象都定义了 [[Class]] 内部属性的值。宿主对象的 [[Class]] 内部属性的值可以是除了
“Arguments”, “Array”, “Boolean”, “Date”, “Error”, “Function”, “JSON”, “Math”, “Number”, “Object”, “RegExp”, “String” 的任何字符串。[[Class]] 内部属性的值用于内部区分对象的种类。注,本规范中除了通过 Object.prototype.toString 没有提供任何手段使程序访问此值。

Object.prototype.toString.call(null); // "[object Null]"
Object.prototype.toString.call(undefined); // "[object Undefined]"
Object.prototype.toString.call(Math); // "[object Math]"
Object.prototype.toString.call({}); // "[object Object]"
Object.prototype.toString.call([]); // "[object Array]"

三、instanceof
1、作用:通过判断实例对象的原型链中是否能找到构造函数的prototype
2、语法:Object instanceof constructor (对象 of 构造函数)
3、注意:使用instanceof判断对象是否是数组,就是在对象的原型链上看是否能找到对应的Array的原型,但是instanceof只能判断引用类型,不能判断原始类型,并且素有引用类型的instanceof Object都是true

[] instanceof Array; // true
[] instanceof Object; // true

4、对象的原型可以修改,所以当原型被修改后,再使用当前方法,将判断有误

let obj = {};
obj.__proto__ = Array.prototype;

obj instanceof Array; // true
Array.isArray(obj); // false

四、Array.isArray()
1、作用:判断 值 是否是Array类型

// 下面返回 true
Array.isArray([]);
Array.isArray([1]);
Array.isArray(new Array());
Array.isArray(new Array('a', 'b', 'c', 'd'))
// 鲜为人知的事实:其实 Array.prototype 也是一个数组。
Array.isArray(Array.prototype); 

// 下面返回 false
Array.isArray();
Array.isArray({});
Array.isArray(null);
Array.isArray(undefined);
Array.isArray(17);
Array.isArray('Array');
Array.isArray(true);
Array.isArray(false);
Array.isArray(new Uint8Array(32))
Array.isArray({ __proto__: Array.prototype });

2、可以检测出iframes

let iframe = document.createElement('iframe');
document.body.appendChild(iframe);
xArray = window.frames[window.frames.length-1].Array;
let arr = new xArray(1,2,3); // [1,2,3]

Array.isArray(arr);  // true
arr instanceof Array; // false

3、加入无法使用Array.isArray(),则在其他代码运行之前运行下面的代码,创建该方法

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

五、typeof
1、作用:判断值的类型
2、语法:typeof 值
3、返回类型如下,不能判断引用类型,所有引用类型的返回结果都是Object,和instanceof对比看~

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值