JavaScript 判断对象中是否有某属性的常用方法


Posted in Javascript onJune 14, 2018

判断对象中是否有某属性的常见方式总结,不同的场景要使用不同的方式。

一、点( . )或者方括号( [ ] )

通过点或者方括号可以获取对象的属性值,如果对象上不存在该属性,则会返回undefined。当然,这里的“不存在”指的是对象自身和原型链上都不存在,如果原型链有该属性,则会返回原型链上的属性值。

// 创建对象
let test = {name : 'lei'}
// 获取对象的自身的属性
test.name   //"lei"
test["name"]   //"lei"

// 获取不存在的属性
test.age    //undefined

// 获取原型上的属性
test["toString"]  //toString() { [native code] }

// 新增一个值为undefined的属性
test.un = undefined

test.un    //undefined 不能用在属性值存在,但可能为 undefined的场景

所以,我们可以根据 Obj.x !== undefined 的返回值 来判断Obj是否有x属性。

这种方式很简单方便,局限性就是:不能用在x的属性值存在,但可能为 undefined的场景。 in运算符可以解决这个问题

二、 in 运算符

MDN 上对in运算符的介绍:如果指定的属性在指定的对象或其原型链中,则in 运算符返回true。

'name' in test  //true
'un' in test    //true
'toString' in test //true
'age' in test   //false

示例中可以看出,值为undefined的属性也可正常判断。

这种方式的局限性就是无法区分自身和原型链上的属性,在只需要判断自身属性是否存在时,这种方式就不适用了。这时需要hasOwnProperty()

 三、hasOwnProperty()

test.hasOwnProperty('name')  //true 自身属性
test.hasOwnProperty('age')   //false 不存在
test.hasOwnProperty('toString') //false 原型链上属性

可以看到,只有自身存在该属性时,才会返回true。适用于只判断自身属性的场景。

总结

三种方式各有优缺点,不同的场景使用不同的方式,有时还需要结合使用,比如遍历自身属性的时候,就会把 for ··· in  ···和 hasOwnProperty()结合使用。

以上所述是小编给大家介绍的JavaScript 判断对象中是否有某属性的常用方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
prototype Element学习笔记(Element篇三)
Oct 26 Javascript
jquery 弹出登录窗口实现代码
Dec 24 Javascript
js获取当前日期代码适用于网页头部
Jun 27 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
Dec 10 Javascript
JavaScript学习笔记之内置对象
Jan 22 Javascript
JavaScript表单验证实例之验证表单项是否为空
Jan 10 Javascript
JQuery日期插件datepicker的使用方法
Mar 03 Javascript
JavaScript 字符串常用操作小结(非常实用)
Nov 30 Javascript
高效的jQuery代码编写技巧总结
Feb 22 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
Jul 10 Javascript
vue组件化中slot的基本使用方法
May 01 Javascript
Vue解析剪切板图片并实现发送功能
Feb 04 Javascript
Vue.js添加组件操作示例
Jun 13 #Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
Jun 13 #Javascript
clipboard.js在移动端复制失败的解决方法
Jun 13 #Javascript
ES6与CommonJS中的模块处理的区别
Jun 13 #Javascript
浅谈webpack 构建性能优化策略小结
Jun 13 #Javascript
详解webpack运行Babel教程
Jun 13 #Javascript
Babel 入门教程学习笔记
Jun 13 #Javascript
You might like
AMFPHP php远程调用(RPC, Remote Procedure Call)工具 快速入门教程
2010/05/10 PHP
PHP stream_context_create()函数的使用示例
2015/05/12 PHP
一个简单的php MVC留言本实例代码(必看篇)
2016/09/22 PHP
Zend Framework前端控制器用法示例
2016/12/11 PHP
JS中confirm,alert,prompt函数区别分析
2011/01/17 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
2012/05/23 Javascript
ListBox实现上移,下移,左移,右移的简单实例
2014/02/13 Javascript
js的2种继承方式详解
2014/03/04 Javascript
超炫的jquery仿flash导航栏特效
2014/11/11 Javascript
Javascript使用SWFUpload进行多文件上传
2016/11/16 Javascript
浅谈Webpack自动化构建实践指南
2017/12/18 Javascript
ejsExcel模板在Vue.js项目中的实际运用
2018/01/27 Javascript
vue父组件触发事件改变子组件的值的方法实例详解
2019/05/07 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
2019/09/18 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
2019/10/31 Javascript
Node.JS如何实现JWT原理
2020/09/18 Javascript
[01:09:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第一场 6.2
2018/06/04 DOTA
[02:37]TI8勇士令状不朽珍藏II视频展示
2018/06/23 DOTA
爬山算法简介和Python实现实例
2014/04/26 Python
跟老齐学Python之开始真正编程
2014/09/12 Python
浅析AST抽象语法树及Python代码实现
2016/06/06 Python
用yum安装MySQLdb模块的步骤方法
2016/12/15 Python
Python实现将数据框数据写入mongodb及mysql数据库的方法
2018/04/02 Python
Python2包含中文报错的解决方法
2018/07/09 Python
python实现微信每日一句自动发送给喜欢的人
2019/04/29 Python
基于Python的微信机器人开发 微信登录和获取好友列表实现解析
2019/08/21 Python
Tensorflow的常用矩阵生成方式
2020/01/04 Python
python利用文件时间批量重命名照片和视频
2021/02/09 Python
推荐WEB开发者最佳HTML5和CSS3代码生成器
2015/11/24 HTML / CSS
销售代表求职自荐信
2013/10/01 职场文书
集团公司总经理岗位职责
2013/12/20 职场文书
2014教师评职称工作总结
2014/11/10 职场文书
MySQL数据库Innodb 引擎实现mvcc锁
2022/05/06 MySQL
关于mysql中string和number的转换问题
2022/06/14 MySQL
Java实现HTML转为Word的示例代码
2022/06/28 Java/Android
pnpm对npm及yarn降维打击详解
2022/08/05 Javascript