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判断对象是否存在属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript中的纯函数与偏函数你了解吗

    JavaScript中的纯函数与偏函数你了解吗

    JS中,纯函数指在相同的输入下始终产生相同的输出并且没有副作用的函数,偏函数指一种创建新函数的方法,通过预设一个或多个参数从而实现对原始函数的封装和定制,本文主要来讲讲纯函数与偏函数的一些使用,需要的可以参考一下
    2023-05-05
  • JS实现图片局部放大或缩小的方法

    JS实现图片局部放大或缩小的方法

    这篇文章主要介绍了JS实现图片局部放大或缩小的方法,涉及javascript事件响应及页面元素动态操作相关技巧,需要的朋友可以参考下
    2016-08-08
  • JavaScript计算出现精度丢失问题的解决方法

    JavaScript计算出现精度丢失问题的解决方法

    Javascript作为一门大型编程语言,在日常开发中难免会涉及到大量的数学计算,然而,浮点数在计算过程中可能出现精度的问题,下面我们就来学习一下Javascript中高精度计算及其相关知识吧
    2023-11-11
  • JS中的继承操作实例总结

    JS中的继承操作实例总结

    这篇文章主要介绍了JS中的继承操作,结合实例形式总结分析了JS中的原型链继承、构造函数继承、组合继承、class继承等常见继承操作实现技巧,需要的朋友可以参考下
    2020-06-06
  • JS生态系统加速模块解析赋能性能优化探索

    JS生态系统加速模块解析赋能性能优化探索

    这篇文章主要为大家介绍了JS生态系统加速模块解析赋能性能优化探索,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2024-01-01
  • 让firefox支持IE的一些方法的javascript扩展函数代码

    让firefox支持IE的一些方法的javascript扩展函数代码

    因为一些代码,只能在IE下实现,如果用firefox实现就必须用一些扩展函数。
    2010-01-01
  • JavaScript 最佳实践:帮你提升代码质量

    JavaScript 最佳实践:帮你提升代码质量

    在本篇教程中,我将指出一些重要的 JavaScript 最佳实践,让你不必去用另外一种艰难的方式来了解它们。准备好去升级你的代码吧
    2016-12-12
  • 重学JS之显示强制类型转换详解

    重学JS之显示强制类型转换详解

    这篇文章主要给大家介绍了关于重学JS之显示强制类型转换的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用JS具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-06-06
  • 聊聊KeyCode被弃用后的问题

    聊聊KeyCode被弃用后的问题

    今天咱们就来聊聊KeyCode被弃用后的问题,希望对大家有所启发,如有错误或未考虑完全的地方,望不吝赐教
    2023-12-12
  • 微信小程序实现通过双向滑动缩放图片大小的方法

    微信小程序实现通过双向滑动缩放图片大小的方法

    这篇文章主要介绍了微信小程序实现通过双向滑动缩放图片大小的方法,结合实例形式分析了微信小程序事件响应及图片元素属性动态操作相关实现技巧,需要的朋友可以参考下
    2018-12-12

最新评论