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 相关文章推荐
javascript中的107个基础知识收集整理 推荐
Mar 29 Javascript
jQuery EasyUI中对表格进行编辑的实现代码
Jun 10 Javascript
jquer之ajaxQueue简单实现代码
Sep 15 Javascript
jQuery的attr与prop使用介绍
Oct 10 Javascript
js获取指定日期周数以及星期几的小例子
Jun 27 Javascript
node.js中的http.get方法使用说明
Dec 14 Javascript
jquery实现的树形目录实例
Jun 26 Javascript
BootStrap的Datepicker控件使用心得分享
May 25 Javascript
基于d3.js实现实时刷新的折线图
Aug 03 Javascript
使用jquery实现的循环连续可停顿滚动实例
Nov 23 Javascript
剖析Angular Component的源码示例
Mar 23 Javascript
js实现简单的轮播图效果
Dec 13 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
用PHP连接MySQL代码的参数说明
2008/06/07 PHP
解析php中的escape函数
2013/06/29 PHP
php简单实现快速排序的方法
2015/04/04 PHP
PHP+Mysql无刷新问答评论系统(源码)
2016/12/20 PHP
js 判断文件类型并控制表单提交示例代码
2013/11/14 Javascript
在父页面得到zTree已选中的节点的方法
2015/02/12 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
2015/03/11 Javascript
JavaScript动态改变div属性的实现方法
2015/07/22 Javascript
js实现图片加载淡入淡出效果
2017/04/07 Javascript
bootstrap daterangepicker汉化以及扩展功能
2017/06/15 Javascript
C#实现将一个字符转换为整数
2017/12/12 Javascript
JS实现点击按钮可实现编辑功能
2018/07/03 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
2019/03/19 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
2019/09/25 Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
2020/05/21 Javascript
python基础教程之缩进介绍
2014/08/29 Python
python和ruby,我选谁?
2017/09/13 Python
Python随机生成均匀分布在单位圆内的点代码示例
2017/11/13 Python
python登录并爬取淘宝信息代码示例
2017/12/09 Python
Python基于win32ui模块创建弹出式菜单示例
2018/05/09 Python
在cmder下安装ipython以及环境的搭建
2018/10/19 Python
Python 实现的 Google 批量翻译功能
2019/08/26 Python
使用OpenCV实现仿射变换—平移功能
2019/08/29 Python
python cv2在验证码识别中应用实例解析
2019/12/25 Python
Python 统计位数为偶数的数字代码详解
2020/03/15 Python
带你认识HTML5中的WebSocket
2015/05/22 HTML / CSS
贝玲妃美国官方网站:Benefit美国
2016/08/28 全球购物
Bulk Powders意大利:运动补充在线商店
2019/02/09 全球购物
高级技校毕业生自荐信
2013/11/18 职场文书
商务主管岗位职责
2013/12/08 职场文书
文明班集体申报材料
2014/05/23 职场文书
优秀大学生自荐信
2014/06/09 职场文书
幼儿园推普周活动总结
2015/05/07 职场文书
python 机器学习的标准化、归一化、正则化、离散化和白化
2021/04/16 Python
MySQL REVOKE实现删除用户权限
2021/06/18 MySQL
前端vue+express实现文件的上传下载示例
2022/02/18 Vue.js