JS中检测对象是否含有某种属性

梦里梦外; 2022-02-27 23:28 239阅读 0赞

##### JS中检测对象是否含有某种属性 #####

判断对象中是否有某属性的常见方式总结，不同的场景要使用不同的方式。

**1、点( . )或者方括号( \[ \] )加粗样式**

> 			// 创建对象
    >         var obj = { name : 'fortune'}
    > 
    > 
    >         // 用 .  的方式比较
    >         obj.name                    //fortune
    >         obj.noProperty              //undefined
    > 
    >         // 用 [ ] 的方式比较
    >         obj['name']                 // fortune
    >         obj['noProperty']           // undefined
    > 
    >         //    获取原型链上面的toString方法
    >         obj.toString                // toString() { [native code] }
    >         obj['toString']             // toString() { [native code] }
    >
    >		 // 赋值为undefined的值
    >      	 obj['name'] = undefined;
    >        obj['name']                 //undefined

我们可以利用我们可以利用没有的属性会等于undefined ，所以我们可以这样判断 `Obj.x !== undefined`     
但是我们会遇到有值等于undefined的情况，所以看下一种方式

**二、in 运算符**  
　　[MDN][] 上对in运算符的介绍：如果指定的属性在指定的对象或其原型链中，则in 运算符返回true。

// 使用格式
    // prop in objectName
    
    // prop：一个字符串类型或者 symbol 类型的属性名或者数组索引（非symbol类型将会强制转为字符串）。
    // objectName
    // 检查它（或其原型链）是否包含具有指定名称的属性的对象。
    
    // 创建对象
    var obj = { 
        name : 'fortune',
        sex : 'monster'
    }
    
    
    'name' in obj;          //true
    'sex' in obj;           //true
    'toString' in obj       //true
    'noExist' in obj        //false
    'noAttribute' in obj    //false　
    undefined in obj        //false

这种方式比较方便简洁，返回值也是Boolear，而且也解决了场景为undefined的情况下

但是这种方式会判断原型链上面的属性所以我们得分不同场景使用  
这时候我们可以用**hasOwnProperty()**

**三、hasOwnProperty()**

// 使用方法
        	 Object.hasOwnProperty(parameter)
             Object: 对象
             parameter: 需要判断的属性名
    
            //创建对象
            var hasObj = {
                name : 'fortune'
            }
    
            hasObj.hasOwnProperty('name')           //true
            hasObj.hasOwnProperty('noExist')        //false
            hasObj.hasOwnProperty('toString')       //false

当我们使用hasObj.hasOwnProperty(‘toString’) 判断原型链上的属性是false，这就并不会判断非自身的属性了  
　  
**总结**  
以上就是三种检测对象是否含有某种属性的方法，我们要根据不同场景使用。

更多请点击[我的博客][Link 1]

推荐[Vue中的打包配置引用路径的和背景图片路径问题(详细)][Vue]

[MDN]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/in
[Link 1]: https://blog.csdn.net/qq_40428678
[Vue]: https://blog.csdn.net/qq_40428678/article/details/86423130