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 相关文章推荐
Extjs 继承Ext.data.Store不起作用原因分析及解决
Apr 15 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
Mar 07 Javascript
JavaScript参数个数可变的函数举例说明
Oct 10 Javascript
jQuery对象初始化的传参方式
Feb 26 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
Sep 10 Javascript
jQuery代码实现对话框右上角菜单带关闭×
May 03 Javascript
js定时器+简单的动画效果实例
Nov 10 Javascript
使用pm2自动化部署node项目的方法步骤
Jan 28 Javascript
webpack中如何加载静态文件的方法步骤
May 18 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
Dec 07 Javascript
JavaScript实现简单进度条效果
Mar 25 Javascript
小程序实现录音功能
Sep 22 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 Document 代码注释规范
2009/04/13 PHP
PHP实现随机发扑克牌
2020/04/22 PHP
硬盘浏览程序,保存成网页格式便可使用
2006/12/03 Javascript
JS支持带x身份证号码验证函数
2008/08/10 Javascript
获取网站跟路径的javascript代码(站点及虚拟目录)
2009/10/20 Javascript
jQuery数据缓存功能的实现思路及简单模拟
2013/05/27 Javascript
from 表单提交返回值用post或者是get方法实现
2013/08/21 Javascript
JQuery设置文本框和密码框得到焦点时的样式
2013/08/30 Javascript
2014 年最热门的21款JavaScript框架推荐
2014/12/25 Javascript
js代码验证手机号码和电话号码是否合法
2015/07/30 Javascript
JavaScript获取URL参数的方法之一
2017/03/24 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
2017/07/10 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
2017/07/26 Javascript
node.js基于express使用websocket的方法
2017/11/09 Javascript
基于Bootstrap表单验证功能
2017/11/17 Javascript
vue-cli开发环境实现跨域请求的方法
2018/04/07 Javascript
浅谈对于react-thunk中间件的简单理解
2019/05/01 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
2019/07/08 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
2019/07/10 Javascript
layui-table对返回的数据进行转变显示的实例
2019/09/04 Javascript
简单谈谈Python流程控制语句
2016/12/04 Python
Python基于回溯法子集树模板解决最佳作业调度问题示例
2017/09/08 Python
python+selenium实现京东自动登录及秒杀功能
2017/11/18 Python
django实现用户登陆功能详解
2017/12/11 Python
python实现12306抢票及自动邮件发送提醒付款功能
2018/03/08 Python
python字典快速保存于读取的方法
2018/03/23 Python
python实现归并排序算法
2018/11/22 Python
python 实现多维数组(array)排序
2020/02/28 Python
python求前n个阶乘的和实例
2020/04/02 Python
浅谈python opencv对图像颜色通道进行加减操作溢出
2020/06/03 Python
python boto和boto3操作bucket的示例
2020/10/30 Python
J2EE模式面试题
2016/10/11 面试题
大学军训的体会
2014/11/08 职场文书
2015年大班保育员工作总结
2015/05/18 职场文书
摩登时代观后感
2015/06/03 职场文书
企业愿景口号
2015/12/25 职场文书