欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

js中如何判断引用值为数组(几种不同方式的详解)

程序员文章站 2022-06-30 19:14:10
...

回顾

  • 在JavaScript中,数据属于Object类型,也属于引用数据类型。我们可以通过typeof来判断该数据是否为引用类型,但无法判断其为数组。
  • 实验数据:
		var a = [];
        var b = {};

依据原型判断

  1. 通过原型上的构造器 constructor 判断
    说明: 每一个实例对象一个来自原型上的 constructor 属性,它指向构造函数,即存放着创建当前对象的构造函数
        console.log(a.constructor)  // ƒ Array() { [native code] }
        console.log(b.constructor)  // ƒ Object() { [native code] }
        console.log(a.constructor === Array)  // true
        console.log(b.constructor === Array)  // false
        console.log(a.constructor === Object)  // false
        console.log(b.constructor === Object)  // true
  1. 通过 instanceof 判断
    说明:instanceof 运算符可以用来判断某个构造函数的prototype属性所指向的对象是否存在于另外一个要检测对象的原型链上
    我们发现数组在进行 Array 和 Object 的判断时都为 true ,这是因为 Object 在原型链的上层,所以都会返回 true
		console.log(a instanceof Array)   // true
        console.log(b instanceof Array)   // false
        console.log(a instanceof Object)  // true
        console.log(b instanceof Object)  // true

        console.log([] instanceof Array)  // true
        console.log([] instanceof Object) // true
        console.log({} instanceof Array)  // false
        console.log({} instanceof Object) // true
  1. 通过 ——proto——
    说明:每一个对象都有__proto__属性,指向创建该对象的构造函数的原型,但在ES6后,该写法不被推荐使用,所以我们可以用 Object.getPrototypeOf() 方法返回指定对象的原型
		console.log(a.__proto__ === Array.prototype)  // true
        console.log(Object.getPrototypeOf(a) === Array.prototype) // true
  1. 通过 Array 的原型链
    说明:通过Array原型链上的isPrototypeOf 该方法用于测试一个对象是否在另一个对象的原型链上
 		console.log(Array.prototype.isPrototypeOf(a)) // true
        console.log(Array.prototype.isPrototypeOf(b)) // false

通过重写toString判断

说明:toString 是原型链顶端的一个方法,我们可以通过改变this指向a,重写toString方法,相当于如下

 		// Object.prototype = {
        //     toString: function() {
        //         a.toString();
        //     }
        // }

实现:

        var str = Object.prototype.toString.call(a);
        console.log(str);                   // [object Array]tips
        var tips = '[object Array]';        // 缓存优化
        if( str === tips ) {
            console.log('数组')
        }else {
            console.log('非数组')
        }                                   // 数组

        var str2 = Object.prototype.toString.call(b);
        console.log(str2);                  // [object Array]
        var tips = '[object Array]';        // 缓存优化
        if( str2 === tips ) {
            console.log('数组')
        }else {
            console.log('非数组')
        }                                   // 非数组

ES6新增方法isArray

		console.log(Array.isArray(a)) // true
        console.log(Array.isArray(b)) // false
相关标签: 笔记 面试