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 相关文章推荐
从新浪弄下来的全屏广告代码 与使用说明
Mar 15 Javascript
img标签中onerror用法
Aug 13 Javascript
js取滚动条的尺寸的函数代码
Nov 30 Javascript
使用jQuery插件创建常规模态窗口登陆效果
Aug 23 Javascript
使用js完成节点的增删改复制等的操作
Jan 02 Javascript
js改变embed标签src值的方法
Apr 10 Javascript
基于JavaScript短信验证码如何实现
Jan 24 Javascript
如何理解Vue的作用域插槽的实现原理
Aug 19 Javascript
微信小程序中添加客服按钮contact-button功能
Apr 27 Javascript
Vue 实现展开折叠效果的示例代码
Aug 27 Javascript
js设置鼠标悬停改变背景色实现详解
Jun 26 Javascript
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
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
一些星际专用术语解释
2020/03/04 星际争霸
php 函数使用方法与函数定义方法
2010/05/09 PHP
SESSION信息保存在哪个文件目录下以及能够用来保存什么类型的数据
2012/06/17 PHP
ThinkPHP实现递归无级分类――代码少
2015/07/29 PHP
JavaScript DOM学习第一章 W3C DOM简介
2010/02/19 Javascript
jquery form表单提交插件asp.net后台中文解码
2010/06/12 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
2012/03/01 Javascript
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
2012/05/23 Javascript
常见表单重复提交问题整理及解决方法
2013/11/13 Javascript
JS实现文件动态顺序载入的方法
2015/03/07 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
2015/04/16 Javascript
javascript通过元素id和name直接取得元素的方法
2015/04/28 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
2015/10/01 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
2016/03/07 Javascript
jquery弹出遮掩层效果【附实例代码】
2016/04/28 Javascript
浅谈js中的引用和复制(传值和传址)
2016/09/18 Javascript
详解JavaScript RegExp对象
2017/02/04 Javascript
详解关于vue2.0工程发布上线操作步骤
2018/09/27 Javascript
js图片无缝滚动插件使用详解
2020/05/26 Javascript
使用Python脚本将Bing的每日图片作为桌面的教程
2015/05/04 Python
python3利用Dlib19.7实现人脸68个特征点标定
2018/02/26 Python
Python使用pymongo模块操作MongoDB的方法示例
2018/07/20 Python
python如何实现代码检查
2019/06/28 Python
Python制作微信好友背景墙教程(附完整代码)
2019/07/17 Python
使用OpenCV实现道路车辆计数的使用方法
2020/07/15 Python
Python操作PostgreSql数据库的方法(基本的增删改查)
2020/12/29 Python
Html5插件教程之添加浏览器放大镜效果的商品橱窗
2016/01/07 HTML / CSS
英国排名第一的LED灯泡网站:LED Bulbs
2019/09/03 全球购物
小学英语教学反思案例
2014/02/04 职场文书
初中高效课堂实施方案
2014/02/26 职场文书
财务管理专业毕业生求职信
2014/06/02 职场文书
六一亲子活动总结
2014/07/01 职场文书
镇人大副主席民主生活会对照检查材料思想汇报
2014/10/01 职场文书
圆明园纪录片观后感
2015/06/03 职场文书
入党自传范文2015
2015/06/26 职场文书
2019银行员工个人工作自我鉴定
2019/06/27 职场文书