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 jQuery $.post $.ajax用法
Jul 09 Javascript
Js获取事件对象代码
Aug 05 Javascript
javascript实现2048游戏示例
May 04 Javascript
js正则表达式匹配数字字母下划线等
Apr 14 Javascript
bootstrap table使用入门基本用法
May 24 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
Nov 10 Javascript
webpack本地开发环境无法用IP访问的解决方法
Mar 20 Javascript
React diff算法的实现示例
Apr 20 Javascript
Vue动态创建注册component的实例代码
Jun 14 Javascript
JavaScript之Blob对象类型的具体使用方法
Nov 29 Javascript
Vue实现图片与文字混输效果
Dec 04 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
Sep 07 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 无限极分类
2008/03/27 PHP
在VS2008中编译MYSQL5.1.48的方法
2010/07/03 PHP
thinkphp3.0 模板中函数的使用
2012/11/13 PHP
php array_merge函数使用需要注意的一个问题
2015/03/30 PHP
PHP7扩展开发教程之Hello World实现方法示例
2017/08/03 PHP
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
2009/02/18 Javascript
JS随即打乱数组实现代码
2012/12/03 Javascript
一步步教大家编写酷炫的导航栏js+css实现
2016/03/14 Javascript
jQuery视差滚动效果网页实现方法经验总结
2016/09/29 Javascript
Node.js与MySQL交互操作及其注意事项
2016/10/05 Javascript
JS前向后瞻正则表达式定义与用法示例
2016/12/27 Javascript
简单好用的nodejs 爬虫框架分享
2017/03/26 NodeJs
JavaScript原生数组Array常用方法
2017/04/06 Javascript
原生JS实现圆环拖拽效果
2017/04/07 Javascript
Vue.js对象转换实例
2017/06/07 Javascript
vue的keep-alive中使用EventBus的方法
2019/04/23 Javascript
解决Layui中layer报错的问题
2019/09/03 Javascript
[03:55]2014DOTA2国际邀请赛 Fnatic经理采访赢DK在情理之中
2014/07/10 DOTA
Python中的startswith和endswith函数使用实例
2014/08/25 Python
Python基础入门之seed()方法的使用
2015/05/15 Python
python Pygame的具体使用讲解
2017/11/03 Python
Pandas之MultiIndex对象的示例详解
2019/06/25 Python
Python连接mysql方法及常用参数
2020/09/01 Python
纯CSS3大转盘抽奖示例代码(响应式、可配置)
2017/01/13 HTML / CSS
css3的focus-within选择器的使用
2020/05/11 HTML / CSS
html5 application cache遇到的严重问题
2012/12/26 HTML / CSS
生产管理的三大手法
2013/11/11 职场文书
学期研究性学习个人的自我评价
2014/01/09 职场文书
活动总结模板
2014/05/09 职场文书
助残日活动总结
2014/08/27 职场文书
2014最新开业庆典策划方案(5篇)
2014/09/15 职场文书
考试作弊检讨书
2014/10/21 职场文书
2014年学校安全工作总结
2014/11/13 职场文书
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/07 其他游戏
java高级用法JNA强大的Memory和Pointer
2022/04/19 Java/Android
tomcat下部署jenkins的方法
2022/05/06 Servers