JavaScript学习笔记：对象属性检测

Javascript对象可以看作是一个属性的集合&＃xff0c;很多时候需要看某个属性是否存在于某个对象中。在Javascript中对象属性的检测主要有以下几种方法。



in运算符

hasOwnProperty()方法

propertyIsEnumerable()方法

!&＃61;&＃61;undefined

接下来看这四种方法怎么检测对象属性。



in运算符



使用in运算符可以检测对象属性&＃xff0c;如果指定的属性存在于指定的对象中&＃xff0c;就会返回true&＃xff0c;反之返回的是false。



下面的例子演示了in是如何检测对象属性的。



var myCar &＃61; {

&＃39;make&＃39;: &＃39;Honda&＃39;,

&＃39;model&＃39;: &＃39;Accord&＃39;,

&＃39;year&＃39;: 1998

}



&＃39;make&＃39; in myCar; // true

&＃39;name&＃39; in myCar; // false

&＃39;toString&＃39; in myCar; // true

在使用in运算符做对象属性检测时&＃xff0c;运算符右侧必须是一个对象&＃xff0c;比如可以是一个string包装的对象&＃xff0c;但不能是一个字符串原始值。



var name &＃61; new String(&＃39;w3cplus&＃39;);

&＃39;length&＃39; in name; // true

&＃39;w3cplus&＃39; in name; // false



// Chrome输出

name &＃61;> String {0: "w", 1: "3", 2: "c", 3: "p", 4: "l", 5: "u", 6: "s", length: 7, [[PrimitiveValue]]: "w3cplus"}

typeof name &＃61;> object



var name &＃61; &＃39;w3cplus&＃39;;

&＃39;length&＃39; in name; //false

&＃39;w3cplus&＃39; in name; // false



// Chrome输出

name &＃61;> "w3cplus"

typeof name &＃61;> string

使用delete运算符删除了一个对象一个属性&＃xff0c;这时使用in运算符检测删除的属性时会返回false&＃xff1a;



var obj &＃61; {

&＃39;name&＃39;: &＃39;w3cplus&＃39;,

&＃39;type&＃39;: &＃39;blog&＃39;

}



delete obj.name; // Object {type: "blog"}



name in obj; // false

如果你只是将一个属性的值赋值为undefined&＃xff0c;而没有用delete删除它&＃xff0c;这个时候使用in运算符检测对象属性时依旧会返回true。



var obj &＃61; {

&＃39;name&＃39;: &＃39;w3cplus&＃39;,

&＃39;type&＃39;: &＃39;blog&＃39;

}



obj.url &＃61; undefined;



&＃39;url&＃39; in obj; // true

hasOwnProperty()方法



使用hasOwnProperty()方法可以判断某个对象是否含有指定的自身属性。使用这个方法&＃xff0c;所有承继继承了Object.prototype的对象都会从原型链上继承到hasOwnProperty()方法上。而且该方法会忽略掉那些从原型上继承到的属性。



如果对象obj包含指定的prop属性的话&＃xff0c;使用hasOwnProperty()方法将返回true值&＃xff0c;反之将会返回false。



先来看个简单示例&＃xff1a;



var obj &＃61; {

&＃39;name&＃39;: &＃39;w3cplus&＃39;,

&＃39;type&＃39;: &＃39;blog&＃39;

}



obj.hasOwnProperty(&＃39;name&＃39;); // true

obj.hasOwnProperty(&＃39;toString&＃39;); // false

只有hasOwnProperty() 可以给出正确和期望的结果&＃xff0c;这在遍历对象的属性时会很有用。 没有其它方法可以用来排除原型链上的属性&＃xff0c;而不是定义在对象自身上的属性。



hasOwnProperty()方法只会查找自身属性&＃xff0c;不会根据原型链进行查找。而且hasOwnProperty()方法在碰到对象拥有自已的hasOwnProperty方法时&＃xff0c;其原型链上的同名方法hasOwnProperty()就会被遮蔽。



var foo &＃61; {

hasOwnProperty: function() {

return false;

},

bar: &＃39;Here be dragons&＃39;

};



foo.hasOwnProperty(&＃39;bar&＃39;); // 始终返回 false

如果担心hasOwnProperty()方法有可能被遮蔽的这种情况&＃xff0c;可以直接使用原型链上真正的 hasOwnProperty方法:



({}).hasOwnProperty.call(foo, &＃39;bar&＃39;); // true

Object.prototype.hasOwnProperty.call(foo, &＃39;bar&＃39;); // true

propertyIsEnumerable()方法



propertyIsEnumerable()方法是hasOwnProperty()方法的一个升级版。在Javascript中每个对象都有一个propertyIsEnumerable()方法。使用这个方法可以判断出指定的对象obj里的属性prop是否可枚举&＃xff0c;也就是说该属性是否可以通过for...in循环遍历到&＃xff0c;不过有些属性虽然可以通过 for...in 循环遍历到&＃xff0c;但因为它们不是自身属性&＃xff0c;而是从原型链上继承的属性,所以该方法也会返回false。如果对象没有指定的属性&＃xff0c;该方法返回 false。



先来看一个propertyIsEnumerable()方法在普通对象和数组上的基本用法:



var obj &＃61; {};

obj.name &＃61; &＃39;w3cplus is website&＃39;;

obj.type &＃61; &＃39;blog&＃39;;



obj.propertyIsEnumerable(&＃39;name&＃39;); // true

obj.propertyIsEnumerable(&＃39;type&＃39;); // true

obj.propertyIsEnumerable(0); // false

obj.propertyIsEnumerable(&＃39;toString&＃39;); // false

!&＃61;&＃61;undefined



还有一种简单的方法可以判断对象的属性是否存在&＃xff0c;通过属性!&＃61;&＃61; undefined来判断。此时会检测自身和继承来的属性。之所以使用!&＃61;&＃61;而不是!&＃61;是因为!&＃61;&＃61;可以区分undefined和null。但是此方法有一个弊端&＃xff0c;当属性存在且值为undefined时&＃xff0c;无法做出准确判断。如&＃xff1a;



var obj &＃61; {

x:"1",

y:undefined,

z:null

};

console.log(obj.x !&＃61;&＃61; undefined); //true 属性存在

console.log(obj.y !&＃61;&＃61; undefined); //false 此时会出现歧义&＃xff0c;不能准确判断属性是不存在还是属性值为undefined

console.log(obj.z !&＃61;&＃61; undefined); //true 属性存在

console.log(obj.z !&＃61; undefined); //false !&＃61; 不能区分undefined和null&＃xff0c;将两者同等对待

console.log(obj.w !&＃61;&＃61; undefined); //false 属性不存在

console.log(obj.toString !&＃61;&＃61; undefined); //true 存在toString函数属性。

然而有一种场景只能使用in运算符&＃xff0c;而不能使用上述属性访问的方式。in可以区分不存在的属性和存在的属性但其值为undefined。如下面的代码所示&＃xff1a;



var obj &＃61; {

x : undefined // 属性显式赋值为undefined

}

obj.x !&＃61;&＃61; undefined; //false,属性存在&＃xff0c;但值为undefined

obj.y !&＃61;&＃61; undefined; //false,属性不存在

"x" in obj; // true 属性存

"y" in obj; // false 属性不存在

delete obj.x; // 删除属性x

"x" in obj; // false 属性不存

总结



上面简单的整理了几种对象属性检测的方法&＃xff0c;下面简单的做一下相关的总结&＃xff1a;



in 自身存在的属性&＃xff0c;继承的属性&＃xff0c;返回true

hasOwnProperty() 自身存在的属性返回true&＃xff0c;继承属性返回false

propertyIsEnumerable() 自身存在的属性&＃xff0c;且为枚举属性返回true,

!&＃61;&＃61; undefined 自身存在的属性&＃xff0c;继承的属性&＃xff0c;不能识别值为undefined的属性