JS判断对象属性是否存在的五种方案分享

更新时间：2022年01月24日 12:35:24 作者：半夏的故事

编写JS的过程中,我们经常用到对象,也会用到对象中的属性,下面这篇文章主要给大家介绍了关于JS判断对象属性是否存在的五种方案,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

背景

在这篇Accessible Object.prototype.hasOwnProperty() 提案中，提出了一个更简单的方法来检查对象时候具有特定的属性-

Object.hasOwn()，主要目标是用来替代Object.prototype.hasOwnProperty()。目前本提案已经进去第四阶段，预计2022年纳入标准。

随着Object.hasOwn()的加入，目前我们已经有了5个判断对象属性是否存在的方法！

检查属性是否存在

in

JavaScript的in操作符可以用来判断一个属性是否属于一个对象，也可以用来变量一个对象的属性

本文我们只讨论in的检查作用

in运算符检查对象是否具有给定名称的属性：

> 'name' in {name: '搞前端的半夏'}
true
> 'name' in {}
false

但是因为in会判断继承过来的属性！

> 'toString' in {}
true

那是因为{}继承了方法Object.prototype.toString()

Reflect.has()

Reflect是在ES2015新增的一个内置对象，提供了与Javascript对象交互的方法。

判断一个对象是否存在某个属性，和 in 运算符] 的功能完全相同。

用法：Reflect.has(obj, propName)

Reflect.has({name:"搞前端的半夏"}, "name"); // true
Reflect.has({name:"搞前端的半夏"}, "age"); // false

Reflect.has({name:"搞前端的半夏"}, "toString"); //true

hasOwnProperty

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

通过对象字面量或者构造函数法创建的对象都从Object.prototype继承了hasOwnProperty()。

构造函数法

o = new Object();
o.name = '搞前端的半夏';
o.hasOwnProperty('name');             // 返回 true
o.hasOwnProperty('toString');         // 返回 false
o.hasOwnProperty('hasOwnProperty');   // 返回 false

对象字面量

o={name:"搞前端的半夏"}
o.hasOwnProperty('name');             // 返回 true
o.hasOwnProperty('toString');         // 返回 false
o.hasOwnProperty('hasOwnProperty');   // 返回 false

缺点

不支持create

但是下面这种情况：

o =  Object.create(null)
o.hasOwnProperty('name');             // 返回 true

会直接报错：

Uncaught TypeError: o.hasOwnProperty is not a function
    at <anonymous>:1:3

覆盖报错

如果一个对象有一个自己的名为 name 的属性'hasOwnProperty'，那么该属性将被覆盖Object.prototype.hasOwnProperty并且我们无法访问它：

o={hasOwnProperty:"搞前端的半夏"}
o.hasOwnProperty('name');

直接报错

VM123:3 Uncaught TypeError: o.hasOwnProperty is not a function
    at <anonymous>:3:3

Object.prototype.hasOwnProperty()

用法：Object.prototype.hasOwnProperty.call(obj, propName);，接受两个参数。请注意我们这里用到了call。改变this的指向。

Object.prototype.hasOwnProperty除了支持hasOwnProperty的相同用法，同时还解决了hasOwnProperty的两个缺点。

o={hasOwnProperty:"搞前端的半夏"}
Object.prototype.hasOwnProperty.call.hasOwnProperty(o,'name'); // 返回false

ES13（ES2022）Object.hasOwn()

Object.hasOwn()，目前来看就是替代Object.prototype.hasOwnProperty.call()。

如果用Object.prototype.hasOwnProperty.call() 来封装的话，代码如下：

function hasOwn(obj, propName) {
  return Object.prototype.hasOwnProperty.call(obj, propName);
}

Object.hasOwn({name: '搞前端的半夏'}, 'name')  // true
Object.hasOwn({}, 'name')               //false
Object.hasOwn({}, 'toString')             //false
Object.hasOwn(Object.create(null), 'name')     //false
Object.hasOwn({hasOwnProperty: 'yes'}, 'name')  //false
Object.hasOwn({hasOwn: 'yes'}, 'name')		 //false

总结

到此这篇关于JS判断对象属性是否存在的五种方案的文章就介绍到这了,更多相关JS判断对象属性存在内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

简单谈谈javascript Date类型
Date对象，是操作日期和时间的对象。Date对象对日期和时间的操作只能通过方法。本文就给大家简单讲述一下DATE类型的使用。
2015-09-09
JS事件流与事件处理程序实例分析
这篇文章主要介绍了JS事件流与事件处理程序,结合实例形式分析了事件流与事件处理程序相关概念、原理、用法及操作注意事项,需要的朋友可以参考下
2019-08-08
js实现多选项切换导航菜单的方法
这篇文章主要介绍了js实现多选项切换导航菜单的方法,可实现动态生成多选项切换导航菜单的功能,是非常实用的技巧,需要的朋友可以参考下
2015-02-02
JavaScript实现点击按钮复制指定区域文本(推荐)
这篇文章主要介绍了JavaScript实现点击按钮复制指定区域文本(推荐)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-11-11
JS实现图片居中悬浮效果
这篇文章给大家分享的是通过JS实现图片垂直居中悬浮，不跟随滚动条飘动的效果，有兴趣的朋友跟着学习下吧。
2017-12-12
使用JS代码实现点击按钮下载文件
有时候我们在网页上需要增加一个下载按钮，让用户能够点击后下载页面上的资料，那么怎样才能实现功能呢？今天小编给大家分享两种方法实现js实现点击按钮下载文件，需要的朋友参考下吧
2016-11-11
JavaScript数据类型学习笔记
这篇文章主要针对JavaScript数据类型整理的学习笔记，分享给大家，感兴趣的小伙伴们可以参考一下
2016-01-01
BootStrap整体框架之基础布局组件
这篇文章主要为大家详细介绍了BootStrap整体框架之基础布局组件的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
JavaScript 批量创建数组的方法
JavaScript有许多批量创建数组的方法，为了衡量它们的性能，我分别使用不同的方法创建一个长度为100000的数组，且键和值相等，今天小编给大家分享基于js批量创建数组的方法，一起看看吧
2017-03-03
bootstrapvalidator之API学习教程
这篇文章为大家分享了bootstrapvalidator之API学习教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06