js判断对象是否存在某个属性的几种办法技巧

 更新时间:2023年12月20日 09:16:00   作者:詹姆斯bind  
这篇文章主要给大家介绍了关于js判断对象是否存在某个属性的几种办法技巧,判断对象中是否有某属性的常见方式总结,不同的场景要使用不同的方式,文中通过代码介绍的非常详细,需要的朋友可以参考下

前言

在 JavaScript 开发中,判断一个对象是否存某个属性在是非常基础的操作,也是开发者经常需要处理的问题之一。然而,繁琐的代码可能会让我们感到疲惫不堪,因此这里将介绍几种 JavaScript 小技巧,帮助你更高效地判断对象属性的存在性,提高代码效率⏱。

👋 技巧一: 使用 hasOwnProperty 方法

hasOwnProperty 是 JavaScript 中的内置方法,用于检测一个对象是否拥有特定的自身属性。如果包含,则返回 true,否则返回 false。注意,这里的“自身属性”指的是挂在对象自身上的属性,而不包括原型链上的属性。

const person = {
  name: 'Tom',
  age: 18
};

console.log(person.hasOwnProperty('name')); // true
console.log(person.hasOwnProperty('gender')); // false
console.log(person.hasOwnProperty('toString')); // false   对象原型上有 toString 属性

这种方式可以判断一个属性是否挂载在对象自身上,但无法判断其是否存在于原型链上。

👋 技巧二:使用 in 操作符

使用 in 操作符可以判断一个对象是否包含某个属性,如果该属性存在于对象自身或其原型链上,则返回 true,否则返回 false。

const person = {
  name: 'Tom',
  age: 18
};

console.log('name' in person); // true
console.log('gender' in person); // false
console.log('toString' in person); // true

这种方式可以判断一个属性是否存在于对象自身或其原型链上,但无法区分属性是挂载在对象自身还是原型链上。

👋 技巧三:使用 Reflect.has 方法

Reflect.has 是 ES6 中引入的新方法,用于检测一个对象是否包含某个属性,与 in 操作符类似,可以同时判断一个属性是否存在于对象自身或原型链上。

const person = {
  name: 'Tom',
  age: 18
};

console.log(Reflect.has(person, 'name')); // true
console.log(Reflect.has(person, 'gender')); // false
console.log(Reflect.has(obj, 'toString')); // true

上面几种方法都可以满足我们日常开发中对对象属性存在与否的判断,如果要精确判断属性是在对象自身还是原型链上可以这样做

const person = {
  name: 'Tom',
  age: 18
};

console.log(Object.getPrototypeOf(person).hasOwnProperty('name')); // false
console.log(Object.getPrototypeOf(person).hasOwnProperty('toString')); // true

简单总结

其实实现对属性的判断还有很多方法,有些方法可能在性能上有损耗、或者判断存在缺陷这里接不一一列举,目前这3个方法是我日常开发中使用比较多的,推荐给大家。

到此这篇关于js判断对象是否存在某个属性的几种办法技巧的文章就介绍到这了,更多相关js判断对象是否存在属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js+html5实现手机九宫格密码解锁功能

    js+html5实现手机九宫格密码解锁功能

    这篇文章主要为大家详细介绍了js+html5实现手机九宫格密码解锁功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-07-07
  • 微信小程序:报错(in promise) MiniProgramError

    微信小程序:报错(in promise) MiniProgramError

    这篇文章主要介绍了微信小程序:报错(in promise) MiniProgramError,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • JS实现音乐导航特效

    JS实现音乐导航特效

    这篇文章主要为大家详细介绍了JS实现音乐导航特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-01-01
  • 原生JavaScript实现remove()和recover()功能示例

    原生JavaScript实现remove()和recover()功能示例

    这篇文章主要介绍了原生JavaScript实现remove()和recover()功能,结合实例形式分析了javascript实现类似jQueryremove()和recover()功能的自定义函数,需要的朋友可以参考下
    2018-07-07
  • js 随机数代码大全

    js 随机数代码大全

    很多情况下,需要用到随机数,脚本之家特为大家整理了一些具体的使用与说明。
    2010-08-08
  • 小程序Scroll-view上拉滚动刷新数据

    小程序Scroll-view上拉滚动刷新数据

    这篇文章主要为大家详细介绍了小程序Scroll-view上拉滚动刷新数据,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • JS实现页面超时后自动跳转到登陆页面

    JS实现页面超时后自动跳转到登陆页面

    这篇文章主要介绍了JS实现页面超时后自动跳转到登陆页面,需要的朋友可以参考下
    2015-01-01
  • JavaScript运行过程中的“预编译阶段”和“执行阶段”

    JavaScript运行过程中的“预编译阶段”和“执行阶段”

    这篇文章主要介绍了JavaScript运行过程中的“预编译阶段”和“执行阶段”的相关资料,需要的朋友可以参考下
    2015-12-12
  • JS利用时间戳倒计时的实现示例

    JS利用时间戳倒计时的实现示例

    这篇文章主要介绍了JS利用时间戳倒计时的实现示例,本文将提供代码示例和详细的步骤,帮助你实现一个简单而实用的时间戳倒计时,感兴趣的可以了解一下
    2023-12-12
  • 详解微信小程序图片地扯转base64解决方案

    详解微信小程序图片地扯转base64解决方案

    这篇文章主要介绍了详解微信小程序图片地扯转base64解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08

最新评论