JS 5种方法判断某属性是否在指定对象中
在JS实际编程中，有时我们需要判断某个属性是否在指定对象里，本文将介绍5种方法判断某属性是否在指定对象中，所有方法均有实例演示。
- in运算符
- Reflect.has() 方法
- hasOwnProperty() 方法
- Object.prototype.hasOwnProperty() 方法
- Object.hasOwn() 方法
1、in运算符
如果指定的属性在指定的对象或其原型链中，则in运算符返回true，否则返回false。
实例：
let obj = {name: "卡卡测速网 webkaka.com"}
console.log('name' in obj);
返回：
true
但是in操作符有一个缺点，那就是：如果属性来自对象的原型，它仍然会返回true，例如：
let obj = {name: “卡卡测速网 webkaka.com”}
console.log(‘toString’ in obj);
返回：
true
JS中in的用法
我们常常用in来查询数组获取数据。在JS中in可以用来查寻一个值是否存在数组中，存在为ture否则为flase。如：
var arr=[1,2,3,4,5]
console.log(1 in arr)
返回：
true
存在，所以结果为ture。
也可以将数组进行for/in 循环枚举出来。如：
var arr=[1,2,3,4,5]
for (var i in arr) {
console.log(i)
}
说明，如下写法效果一样。
for(var i=0;i<arr.length;i++) 与 for (var i in arr)
结果为：
1
2
3
4
5
2、Reflect.has() 方法
Reflect.has方法允许你检查属性是否在对象中。它就像in操作符一样工作。如：
let obj = {name: "卡卡测速网 webkaka.com"}
console.log(Reflect.has(obj,'name'));
返回：
true
但是，Reflect.has()也存在跟in一样的一个缺点，那就是如果属性来自对象的原型，它仍然会返回true。如：
let obj = {name: "卡卡测速网 webkaka.com"}
console.log(Reflect.has(obj,'toString'));
返回：
true
示例，使用 Reflect.has() ：
Reflect.has({x: 0}, "x"); // true
Reflect.has({x: 0}, "y"); // false
// 如果该属性存在于原型链中，返回true
Reflect.has({x: 0}, "toString");
// Proxy 对象的 .has() 句柄方法
obj = new Proxy({}, {
has(t, k) { return k.startsWith("door"); }
});
Reflect.has(obj, "doorbell"); // true
Reflect.has(obj, "dormitory"); // false
3、hasOwnProperty() 方法
hasOwnProperty()方法返回一个布尔值，指示对象是否具有指定的属性作为它自己的属性（而不是继承它）。
用法：
let obj = {name: "卡卡测速网 webkaka.com"}
console.log(obj.hasOwnProperty('name'));
返回：
true
它比前面介绍的in和Reflect.has()好用的地方在于，它可以正确地区分对象本身的属性和其原型的属性。 如：
let obj = {name: "卡卡测速网 webkaka.com"}
console.log(obj.hasOwnProperty('toString'));
返回：
false
示例：
const object1 = {};
object1.property1 = 42;
console.log(object1.hasOwnProperty('property1'));
// expected output: true
console.log(object1.hasOwnProperty('toString'));
// expected output: false
console.log(object1.hasOwnProperty('hasOwnProperty'));
// expected output: false
即使属性的值是 null 或 undefined，只要属性存在，hasOwnProperty 依旧会返回 true。如：
o = new Object();
o.propOne = null;
o.hasOwnProperty('propOne'); // 返回 true
o.propTwo = undefined;
o.hasOwnProperty('propTwo'); // 返回 true
自身属性与继承属性
下面的例子演示了 hasOwnProperty 方法对待自身属性和继承属性的区别：
o = new Object();
o.prop = 'exists';
o.hasOwnProperty('prop'); // 返回 true
o.hasOwnProperty('toString'); // 返回 false
o.hasOwnProperty('hasOwnProperty'); // 返回 false
但是这种写法有个缺点，就是如果对象是由 创造的Object.create(null)，那么就不能使用这种方法了。
4、Object.prototype.hasOwnProperty() 方法
解决前面的问题很简单，我们只需要使用Object.prototype.hasOwnProperty. 该方法是直接调用内置的效用函数，跳过原型链。如：
let obj = Object.create(null);
obj.name = "卡卡测速网 webkaka.com";
console.log(Object.prototype.hasOwnProperty.call(obj,'name'));
返回：
true
而如下代码则返回false。
let obj = Object.create(null);
obj.name = "卡卡测速网 webkaka.com";
console.log(Object.prototype.hasOwnProperty.call(obj,'toString'));
5、 Object.hasOwn() 方法
由于前面的几种方式都不优雅，所以有了一个新的提议：Object.hasOwn。
如果指定的对象具有指定的属性作为其自己的Object.hasOwn()属性，则静态方法返回true。如果该属性被继承或不存在，则该方法返回false。 如：
let obj = Object.create(null);
obj.name = "卡卡测速网 webkaka.com";
console.log(Object.hasOwn(obj,'name'));
返回：
true
而下面代码则返回false。
let obj = Object.create(null);
obj.name = "卡卡测速网 webkaka.com";
console.log(Object.hasOwn(obj,'toString'));
示例：
const object1 = {
prop: 'exists'
};
console.log(Object.hasOwn(object1, 'prop'));
// expected output: true
console.log(Object.hasOwn(object1, 'toString'));
// expected output: false
console.log(Object.hasOwn(object1, 'undeclaredPropertyValue'));
// expected output: false
直接属性与继承属性
以下示例区分了直接属性和通过原型链继承的属性：
let example = {}
example.prop = 'exists';
// `hasOwn` will only return true for direct properties:
Object.hasOwn(example, 'prop'); // returns true
Object.hasOwn(example, 'toString'); // returns false
Object.hasOwn(example, 'hasOwnProperty'); // returns false
// The `in` operator will return true for direct or inherited properties:
'prop' in example; // returns true
'toString' in example; // returns true
'hasOwnProperty' in example; // returns true
总结
本文通过大量示例详细介绍了 JS 5种方法判断某属性是否在指定对象中，它们之间的用法不用，功能也有所区别，所以在实际编程中要特别注意哪些情况下不能用哪些方法。
相关文章
- jQuery $(‘document’).on() 比 $(‘body’).on() 速度快
- JS中文简繁体转换【演示-源码下载】
- jQuery find(“#id”)与find(“.class”)实例分析与比较
- JQuery计算HTML元素子元素(child elements)
- 鼠标点击输入框时高亮显示边框颜色【jquery和css实现】
- JQuery使用append()函数动态创建和应用CSS样式
- JQuery获取/添加/删除HTML控件的CSS类名(class name)
- $.ajax() data{} 传参三种常见写法及ajax()方法参数详解
- 表单序列化插件serializeJSON.js下载及使用示例
- JQuery如何把JSON字符串转为JSON对象
- 使用HTML5和JQuery读取CSV(Text)文件的实例
- HTML5和JQuery裁剪图像实时预览缩略图并上传
- HTML5和JQuery实现多图片上传预览
- 使用HTML5和JQuery获得上传图片大小尺寸（高和宽）
- 下拉菜单/下拉列表鼠标提示ToolTip【JQuery实现】
- 如何用JQuery删除或清空下拉列表的选项
- 怎样使用JQuery动态增加下拉列表选项（option）
- 如何使用JQuery动态填充下拉列表（DropDownList）或下拉菜单
- 使用jQuery计算子元素(child elements)
- 使用jQuery setInterval函数延迟5秒后跳转到另一个页面
