JS进阶第三篇:开发中对数组及对象的判断方法

系列文章传送门:

JS进阶第一篇:手写call apply bind
JS进阶第二篇:函数参数按值传递


有很多小伙伴在涉及到类型检查的时候只知道 typeof 一把梭哈,但是 typeof 并不是万能的。
typeof 只能检测基本数据类型,包括 boolean、undefined、string、number、symbol,而 null ,Array、Object ,使用 typeof 出来都是 Object,函数的 typeoffunction 无法检测具体是哪种引用类型。

JS判断数组

1.通过instanceof运算符判断

从构造函数入手:可以判断一个对象是否是在其原型链上原型构造函数中的属性。

console.log(arr instanceof Array);   //true

typeofinstanceof 这两者都可以用来判断变量,typeof会返回基本类型,而instanceof只会返回一个布尔值。

2.通过constructor判断

这个属性是返回对象相对应的构造函数,Object的每个实例都有构造函数 constructor,用于保存着用于创建当前对象的函数。

console.log(arr.constructor === Array);   //true

3.通过数组自带的isArray方法判断

ES5中新增了Array.isArray方法,IE8及以下不支持,用于确定传递的值是否是一个 Array,值得一提的是,这个方法是我在开发中最常用的:

console.log(Array.isArray(arr));   //true

对于ES5之前不支持此方法的问题,我们其实可以做好兼容进行自行封装,如下:

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

4.通过isPrototypeOf()方法判断

从原型入手,Array.prototype 属性表示 Array 构造函数的原型,
其中有一个方法是 isPrototypeOf() 用于测试一个对象是否存在于另一个对象的原型链上。

console.log(Array.prototype.isPrototypeOf(arr));   //true

5.通过Object.prototype.toString.call()判断

虽然Array也继承自Object,但js在Array.prototype上重写了toString,而我们通过toString.call(arr)实际上是通过原型链调用了。可以获取到变量的不同类型。

console.log(Object.prototype.toString.call(arr) === '[object Array]');   //true

判断对象属性是否存在

下面是示例代码:

let person = {
    
    
    name: 'zyj'
}

我相信大部分同学判断对象上是否存在某一属性的时候是这么做的:

if(!person.age){
    
    
    console.log('person没有age属性');
}

这么做虽然可以但是不正规,最特殊的情况就是我们有age字段,而它的值是 undefined

通过in运算符判断

JavaScript的in操作符可以用来判断一个属性是否属于一个对象,也可以用来变量一个对象的属性
这个方法是最常用的,用法是属性名 in 对象,如果存在返回 true,反之为 false,看下示例:

let person = {
    
    
    name: 'zyj'
}
console.log('name' in person);   //true
console.log('age' in person);    //false

但需要注意的是,in 只能判断对象有没有这个属性,无法判断这个属性是不是自身属性,具体我们看下面代码:

function Person(){
    
    
    this.name = 'zyj';
};
Person.prototype.age = 21;
var p = new Parent();
p.name//zyj
p.age//21

上面是最简单的一个创建构造函数实例的例子,根据我们原型链学到的知识,在这个例子中,对于实例 p 而言,name 是自身属性,这是它自己有的,而 age 是原型属性,p 可以顺着原型链找到 Person,并借用了这个属性。

在这种情况下,我们用 in 判断都是 true:

'name' in p;//true
'age' in p;//true

想要继续加一区分请看下面的 hasOwnProperty 方法

通过hasOwnProperty判断

我们先看一下 hasOwnProperty 的定义:hasOwnProperty这个方法可以用来检测一个对象是否含有特定的自身属性,即是用来判断一个属性是定义在对象本身而不是继承自原型链的,

在上面的例子中用 hasOwnProperty 即可判断是否是自身属性:

p.hasOwnProperty('name');//true
p.hasOwnProperty('age');//false

如果我们只需判断对象有没有某个属性,使用 in 运算符就好了。而如果我们还要关心这个属性是不是自身属性,那么推荐hasOwnProperty() 方法

通过Reflect.has判断

Reflect是在ES2015新增的一个内置对象,提供了与Javascript对象交互的方法。
判断一个对象是否存在某个属性,和 in 运算符 的功能完全相同。

用法:Reflect.has(obj, propName):

let person = {
    
    
    name: 'zyj'
}
Reflect.has(person, "name"); // true
Reflect.has(person, "age"); // false

判断对象是否为空

通过JSON.Stringify()判断

利用 JSON.stringify() 将对象序列化,若序列化后的结果为 {},则对象是空对象:

let data = {
    
    };
let b = (JSON.stringify(data) == "{}");
console.log(b);//true

使用Object.keys()方法判断

let data = {
    
    };
let arr = Object.keys(data);
console.log(arr.length == 0);//true

猜你喜欢

转载自blog.csdn.net/qq_49900295/article/details/128316524