大家好,我是半夏👴,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注➕ 点赞 👍 加我微信:frontendpicker,一起学习交流前端,成为更优秀的工程师~关注公众号:搞前端的半夏,了解更多前端知识! 点我探索新世界!
背景
在这篇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
今天的文章5种JS判断对象属性是否存在的方案!分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/22308.html