javascript 判断对象是否具有指定属性的方法

红太狼 2022-04-17 01:48 211阅读 0赞

在工作中，为使代码健壮性更高，通常都需要校验当前数据是否存在指定属性，以更进一步的完善代码逻辑。下面是作者的个人经验整理的判断方法：

### 演示数据： ###

var h_object={
            "name":"helang",
            "email":"helang.love@qq.com"
        };
        var h_array=['helang','1846492969'];

## 方法一：undefined 值 ##

当对象不存在该属性时，获取对象该属性，属性值为 undefined

该方法大都框架框架都会用，比如jQuery中会看到大量的该方法来判断

/* undefined 值 */
        if(h_object.age === undefined){ /* 判断结果：true */
            console.error('h_object对象无age属性');
        }else {
            console.log('h_object对象的age属性值为：'+h_object.age);
        }

## 方法二：'undefined' 数据类型 ##

当对象不存在该属性时，获取对象该属性的数据类型，数据类型值为 'undefined'

注意：数据类型为字符串，所以判断时切记需要加引号

/* 'undefined' 数据类型 */
        if(typeof h_object.sex==='undefined'){  /* 判断结果：true */
            console.error('h_object对象无sex属性');
        }else {
            console.log('h_object对象的sex属性值为：'+h_object.sex);
        }

## 方法三：Object.hasOwnProperty() 函数 ##

hasOwnProperty()函数会返回一个布尔值，指示对象自身属性中是否具有指定的属性

作者本人比较推荐的方法，写起来更加的符合语言本身的写法，对象->方法->参数是我喜欢的，而且该函数的功能就是用来判断对象是否具有指定属性的

/* hasOwnProperty()函数 */
        if(h_object.hasOwnProperty("name")){    /* 判断结果：true */
            console.log('h_object对象的name属性值为：'+h_object.name);
        }else {
            console.error('h_object对象无name属性');
        }

## 方法四：in 运算符 ##

如果指定的属性在指定的对象或其原型链中，则 in 运算符返回true

该方法可能会出现在面试中

/* in 运算符：判断对象 */
        if("email" in h_object){    /* 判断结果：true */
            console.log('h_object对象的email属性值为：'+h_object.email);
        }else {
            console.error('h_object对象无email属性');
        }

请继续往后面看

当读者看到这里时应该掌握了判断一个对象是否存在某属性的方法，那么在文章的一开始创建了一个数组一直没有用到。前面所示例的代码都是教大家如何判断一个对象是否具有指定属性，那么想判断一个数组是否具有指定下标呢？带大家学习一下 in 运算符 的另一种用法

/* in 运算符：判断数组 */
        if(2 in h_array){   /* 判断结果：false */
            console.log('h_array数组下标2为：'+h_array[2]);
        }else {
            console.error('h_array数组无下标2');
        }

> 作者：[黄河爱浪][Link 1] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 公众号：`web-7258`，本文原创，著作权归作者所有，转载请注明原链接及出处。
> 
> 更多精彩文章，请扫下方二维码关注我的公众号
> 
> ![20190512094840637.jpg][]

[Link 1]: https://blog.csdn.net/u013350495
[20190512094840637.jpg]: /images/20220417/073650a066854d8990438010057e303a.png