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 DOM学习第六章 表单实例
Feb 19 Javascript
jQuery版Tab标签切换
Mar 16 Javascript
简介AngularJS中使用factory和service的方法
Jun 17 Javascript
jquery实现标题字体变换的滑动门菜单效果
Sep 07 Javascript
Bootstrap页面布局基础知识全面解析
Jun 13 Javascript
微信小程序实现图片自适应(支持多图)
Jan 25 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
Apr 28 Javascript
Vue 中使用 CSS Modules优雅方法
Apr 09 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
Dec 06 Javascript
如何让node运行es6模块文件及其原理详解
Dec 11 Javascript
配置一个vue3.0项目的完整步骤
Apr 26 Javascript
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
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+APACHE实现用户论证的方法
2006/10/09 PHP
10个超级有用的PHP代码片段果断收藏
2015/09/23 PHP
PHP 自动加载类原理与用法实例分析
2020/04/14 PHP
原型方法的不同写法居然会影响调试的解决方法
2007/03/08 Javascript
javascript 单选框,多选框美化代码
2008/08/01 Javascript
jquery1.83 之前所有与异步列队相关的模块详细介绍
2012/11/13 Javascript
JS清除IE浏览器缓存的方法
2013/07/26 Javascript
javascript中文本框中输入法切换的问题
2013/12/10 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
2014/02/04 Javascript
JS+CSS实现可拖动的弹出提示框
2015/02/16 Javascript
浅析JavaScript中的对象类型Object
2016/05/26 Javascript
最棒的Angular2表格控件
2016/08/10 Javascript
使用JavaScript为一张图片设置备选路径的方法
2017/01/04 Javascript
详解A标签中href=""的几种用法
2017/08/20 Javascript
JavaScript创建对象方法实例小结
2018/09/03 Javascript
微信小程序实现轨迹回放的示例代码
2019/12/13 Javascript
Python中set与frozenset方法和区别详解
2016/05/23 Python
matplotlib设置legend图例代码示例
2017/12/19 Python
详解Python二维数组与三维数组切片的方法
2019/07/18 Python
python3 深浅copy对比详解
2019/08/12 Python
python GUI库图形界面开发之PyQt5表格控件QTableView详细使用方法与实例
2020/03/01 Python
使用python修改文件并立即写回到原始位置操作(inplace读写)
2020/06/28 Python
size?德国官方网站:英国伦敦的球鞋精品店
2018/03/17 全球购物
美国购买体育赛事门票网站:TicketCity
2019/03/06 全球购物
美国室内和室外装饰花盆购物网站:ePlanters
2019/03/22 全球购物
化学学院毕业生自荐信范文
2013/12/17 职场文书
十佳美德少年事迹材料
2014/02/05 职场文书
网络技术专业推荐信
2014/02/20 职场文书
制药工程专业职业生涯规划范文
2014/03/10 职场文书
“向国旗敬礼”主题班会活动设计方案
2014/09/27 职场文书
质量整改报告范文
2014/11/08 职场文书
2014七年级班主任工作总结
2014/12/05 职场文书
工程项目合作意向书
2015/05/08 职场文书
社区扶贫帮困工作总结
2015/05/20 职场文书
学生会自荐信
2019/05/16 职场文书
python 如何用map()函数创建多线程任务
2021/04/07 Python