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 进阶篇1 正则表达式,cookie管理,userData
Mar 14 Javascript
bootstrap中模态框、模态框的属性实例详解
Feb 17 Javascript
详解Node.js 命令行程序开发教程
Jun 07 Javascript
vuex的简单使用教程
Feb 02 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
Apr 17 Javascript
垃圾回收器的相关知识点总结
May 13 Javascript
详解Ubuntu安装angular-cli遇到的坑
Sep 08 Javascript
解决VUE中document.body.scrollTop为0的问题
Sep 15 Javascript
详解vue挂载到dom上会发生什么
Jan 20 Javascript
JS使用栈判断给定字符串是否是回文算法示例
Mar 04 Javascript
Node.js 实现抢票小工具 & 短信通知提醒功能
Oct 22 Javascript
javascript用defineProperty实现简单的双向绑定方法
Apr 03 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中Ctype函数用法详解
2014/12/09 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
JQuery $.each遍历JavaScript数组对象实例
2014/09/01 Javascript
js实现文字在按钮上滚动的方法
2015/08/20 Javascript
JavaScript原型及原型链终极详解
2016/01/04 Javascript
JavaScript数据结构与算法之链表
2016/01/29 Javascript
详解Javascript中的Object对象
2016/02/28 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
2016/03/28 Javascript
基于BootStarp的Dailog
2016/04/28 Javascript
性能优化之代码优化页面加载速度
2017/03/01 Javascript
Javascript实现数组中的元素上下移动
2017/04/28 Javascript
JQuery实现定时刷新功能代码
2017/05/09 jQuery
详解node.js的http模块实例演示
2018/07/12 Javascript
vue 属性拦截实现双向绑定的实例代码
2018/10/24 Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
2018/11/10 Javascript
mpvue开发音频类小程序踩坑和建议详解
2019/03/12 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
2019/09/28 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
2019/11/16 Javascript
原生js实现html手机端城市列表索引选择城市
2020/06/24 Javascript
[04:03]DOTA2肉山黑名单梦之声 风暴之灵中文配音鉴赏
2013/07/03 DOTA
Python字符串处理函数简明总结
2015/04/13 Python
python中lambda()的用法
2017/11/16 Python
Python之web模板应用
2017/12/26 Python
python flask中静态文件的管理方法
2018/03/20 Python
python使用pygame框架实现推箱子游戏
2018/11/20 Python
Python操作mongodb数据库的方法详解
2018/12/08 Python
python+playwright微软自动化工具的使用
2021/02/02 Python
Madewell美德威尔美国官网:美国休闲服饰品牌
2016/11/25 全球购物
区域销售经理职责
2013/12/22 职场文书
致全体运动员广播稿
2014/02/01 职场文书
语文课外活动总结
2014/08/27 职场文书
员工工作自我评价
2014/09/26 职场文书
2014学习十八届四中全会精神思想汇报范文
2014/10/23 职场文书
班主任工作经验交流会总结
2015/11/02 职场文书
mysql升级到5.7时,wordpress导数据报错1067的问题
2021/05/27 MySQL
win10输入法不见了只能打出字母怎么解决?
2022/08/05 数码科技