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高亮效果的二种实现方法
Sep 14 Javascript
JavaScript 私有成员分析
Jan 13 Javascript
Bootstrap表单布局样式源代码
Jul 04 Javascript
Javascript 制作图形验证码实例详解
Dec 22 Javascript
js实现省份下拉菜单效果
Feb 15 Javascript
浅谈angularJS的$watch失效问题的解决方案
Aug 11 Javascript
Vue.js如何实现路由懒加载浅析
Aug 14 Javascript
微信小程序网络封装(简单高效)
Aug 06 Javascript
antd Upload 文件上传的示例代码
Dec 14 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
Apr 26 Javascript
layui数据表格 table.render 报错的解决方法
Sep 29 Javascript
JavaScript实现网页计算器功能
Oct 29 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
dedecms系统的广告设置代码 基础版本
2010/04/09 PHP
php实现加减法验证码代码
2014/02/14 PHP
PHP curl 抓取AJAX异步内容示例
2014/09/09 PHP
jquery调用wcf并展示出数据的方法
2011/07/07 Javascript
javascript中Date对象的getDay方法使用指南
2014/12/22 Javascript
跨域请求的完美解决方法(JSONP, CORS)
2016/06/12 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
2017/01/19 Javascript
C#微信小程序服务端获取用户解密信息实例代码
2017/03/10 Javascript
微信小程序之购物车功能
2020/09/23 Javascript
jQuery使用ajax_动力节点Java学院整理
2017/07/05 jQuery
JavaScript实现各种排序的代码详解
2017/08/28 Javascript
vue 属性拦截实现双向绑定的实例代码
2018/10/24 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
2018/11/02 Javascript
vue elementUI 表单校验功能之数组多层嵌套
2019/06/04 Javascript
jquery实现垂直手风琴导航栏
2020/02/18 jQuery
解决ant design vue 表格a-table二次封装,slots渲染的问题
2020/10/28 Javascript
小结Python用fork来创建子进程注意事项
2014/07/03 Python
Python基于Socket实现的简单聊天程序示例
2017/08/05 Python
Tensorflow 实现修改张量特定元素的值方法
2018/07/30 Python
Python实现购物评论文本情感分析操作【基于中文文本挖掘库snownlp】
2018/08/07 Python
Python日期时间Time模块实例详解
2019/04/15 Python
PyQt5的PyQtGraph实践系列3之实时数据更新绘制图形
2019/05/13 Python
解决Python中回文数和质数的问题
2019/11/24 Python
TensorFlow2.X结合OpenCV 实现手势识别功能
2020/04/08 Python
python矩阵运算,转置,逆运算,共轭矩阵实例
2020/05/11 Python
达拉斯牛仔官方商店:Dallas Cowboys Pro Shop
2018/02/10 全球购物
Zooplus葡萄牙:欧洲领先的网上宠物商店
2018/07/01 全球购物
C有"按引用传递"吗
2016/09/06 面试题
三方协议书范本
2014/04/22 职场文书
团委书记的竞聘演讲稿
2014/04/24 职场文书
跳蚤市场口号
2014/06/13 职场文书
项目合作意向书模板
2014/07/29 职场文书
学生会感恩节活动方案
2014/10/11 职场文书
学校办公室主任岗位职责
2015/04/01 职场文书
高中美术教学反思
2016/02/17 职场文书
导游词之海南天涯海角
2019/12/05 职场文书