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同步Import,同步调用外部js的方法
Jul 08 Javascript
Firefox中autocomplete="off" 设置不起作用Bug的解决方法
Mar 25 Javascript
Jquery刷新页面背景图片随机变换的实现方法
Mar 15 Javascript
jQuery实现边框动态效果的实例代码
Sep 23 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
Jan 10 Javascript
微信小程序页面开发注意事项整理
May 18 Javascript
vue中用H5实现文件上传的方法实例代码
May 27 Javascript
小程序server请求微信服务器超时的解决方法
May 21 Javascript
微信小程序 腾讯地图显示偏差问题解决
Jul 27 Javascript
Vue 用Vant实现时间选择器的示例代码
Oct 25 Javascript
Node.js操作MongoDB数据库实例分析
Jan 19 Javascript
Openlayers实现距离面积测量
Sep 28 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中开启gzip压缩的2种方法
2015/01/31 PHP
php中实现可以返回多个值的函数实例
2015/03/21 PHP
超级兔子让浮动层消失的前因后果
2007/03/09 Javascript
JQuery AJAX实现目录浏览与编辑的代码
2008/10/21 Javascript
JS本地刷新返回上一页代码
2016/07/25 Javascript
微信小程序图片自适应支持多图实例详解
2017/06/21 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
2017/08/17 Javascript
angular4自定义组件详解
2017/09/28 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
2017/12/05 Javascript
基于three.js编写的一个项目类示例代码
2018/01/05 Javascript
如何基于javascript实现贪吃蛇游戏
2020/02/09 Javascript
[03:05]DOTA2英雄基础教程 嗜血狂魔
2013/12/10 DOTA
[04:44]DOTA2 2017全国高校联赛视频回顾
2017/08/21 DOTA
scrapy自定义pipeline类实现将采集数据保存到mongodb的方法
2015/04/16 Python
利用Python的Django框架中的ORM建立查询API
2015/04/20 Python
Python中利用sorted()函数排序的简单教程
2015/04/27 Python
python 根据pid杀死相应进程的方法
2017/01/16 Python
Python分治法定义与应用实例详解
2017/07/28 Python
Python标准库:内置函数max(iterable, *[, key, default])说明
2020/04/25 Python
让IE可以变相支持CSS3选择器
2010/01/21 HTML / CSS
移动Web—CSS为Retina屏幕替换更高质量的图片
2012/12/24 HTML / CSS
HTML5实现获取地理位置信息并定位功能
2015/04/25 HTML / CSS
苹果美国官方商城:Apple美国
2016/08/24 全球购物
欧洲最大的滑雪假期供应商之一:Sunweb Holidays
2018/01/06 全球购物
帕克纽约:PARKER NY
2018/12/09 全球购物
世界领先的豪华床上用品供应商之一:Bedeck Home
2019/03/18 全球购物
车辆安全检查制度
2014/01/12 职场文书
综合实践教学反思
2014/01/31 职场文书
蜜蜂引路教学反思
2014/02/04 职场文书
动员大会主持词
2014/03/20 职场文书
文艺晚会主持词
2014/03/24 职场文书
创先争优承诺书范文
2014/03/31 职场文书
班干部演讲稿
2014/04/24 职场文书
2014年教育教学工作总结
2014/11/13 职场文书
婚礼伴郎致辞
2015/07/28 职场文书
医生行业员工的辞职信
2019/06/24 职场文书