5种JS判断对象属性是否存在的方案！

2023-07-05 20:46| 来源: 网络整理| 查看: 265

大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 👍 加我微信：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 :1:3 复制代码覆盖报错

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

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

直接报错

VM123:3 Uncaught TypeError: o.hasOwnProperty is not a function at :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 复制代码

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章