JavaScript如何判断对象有某属性


Posted in Javascript onJuly 03, 2020

 判断对象中是否有某属性的常见方式总结,不同的场景要使用不同的方式。

一、点( . )或者方括号( [ ] )

通过点或者方括号可以获取对象的属性值,如果对象上不存在该属性,则会返回undefined。当然,这里的“不存在”指的是对象自身和原型链上都不存在,如果原型链有该属性,则会返回原型链上的属性值。

// 创建对象
let test = {name : 'lei'}
// 获取对象的自身的属性
test.name      //"lei"
test["name"]     //"lei"

// 获取不存在的属性
test.age       //undefined

// 获取原型上的属性
test["toString"]   //toString() { [native code] }// 新增一个值为undefined的属性test.un = undefinedtest.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。适用于只判断自身属性的场景。

四、propertyIsEnumerable()

const object1 = {};
const array1 = [];
object1.property1 = 42;
array1[0] = 42;

console.log(object1.propertyIsEnumerable('property1'));
// expected output: true

console.log(array1.propertyIsEnumerable(0));
// expected output: true

console.log(array1.propertyIsEnumerable('length'));
// expected output: false

propertyIsEnumerable() 方法返回一个布尔值,表示指定的属性是否可枚举。

总结

四种方式各有优缺点,不同的场景使用不同的方式,有时还需要结合使用,比如遍历自身属性的时候,就会把 for ··· in ···和 hasOwnProperty()结合使用。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
Feb 14 Javascript
javascript URL锚点取值方法
Feb 25 Javascript
jQuery中将函数赋值给变量的调用方法
Mar 23 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
Feb 21 Javascript
jquery uploadify 在FF下无效的解决办法
Sep 26 Javascript
jQuery中live()方法用法实例
Jan 19 Javascript
谈谈JavaScript自定义回调函数
Oct 18 Javascript
巧用数组制作图片切换js代码
Nov 29 Javascript
Vue组件的使用教程详解
Jan 05 Javascript
vue定义全局变量和全局方法的方法示例
Aug 01 Javascript
vue动态设置img的src路径实例
Sep 18 Javascript
Angular实现svg和png图片下载实现
May 05 Javascript
详解element-ui动态限定的日期范围选择器代码片段
Jul 03 #Javascript
JS常见错误(Error)及处理方案详解
Jul 02 #Javascript
vue过滤器实现日期格式化的案例分析
Jul 02 #Javascript
Vue使用预渲染代替SSR的方法
Jul 02 #Javascript
node运行js获得输出的三种方式示例详解
Jul 02 #Javascript
基于小程序请求接口wx.request封装的类axios请求
Jul 02 #Javascript
JS异步宏队列与微队列原理区别详解
Jul 02 #Javascript
You might like
PHP 防恶意刷新实现代码
2010/05/16 PHP
PHP源代码数组统计count分析
2011/08/02 PHP
PHP开发注意事项总结
2015/02/04 PHP
PHP贪婪算法解决0-1背包问题实例分析
2015/03/23 PHP
php实现的农历算法实例
2015/08/11 PHP
大家须知简单的php性能优化注意点
2016/01/04 PHP
PHP抓取淘宝商品的用户晒单评论+图片+搜索商品列表实例
2016/04/14 PHP
PHP 使用二进制保存用户状态的实例
2018/01/29 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
一个不错的用JavaScript实现的UBB编码函数
2007/03/09 Javascript
Apply an AutoFormat to an Excel Spreadsheet
2007/06/12 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
2013/03/12 Javascript
跟我学习javascript解决异步编程异常方案
2015/11/23 Javascript
JavaScript:Date类型全面解析
2016/05/19 Javascript
vue父子组件的数据传递示例
2017/03/07 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
2017/05/15 Javascript
基于jQuery中ajax的相关方法汇总(必看篇)
2017/11/08 jQuery
javascript实现Emrips反质数枚举的示例代码
2017/12/06 Javascript
详解Node.js一行命令上传本地文件到服务器
2019/04/22 Javascript
原生JS实现动态添加新元素、删除元素方法
2019/05/05 Javascript
vue-cli3项目展示本地Markdown文件的方法
2019/06/07 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
2019/10/15 Javascript
vue实现计算器功能
2020/02/22 Javascript
Python如何实现MySQL实例初始化详解
2017/11/06 Python
基于tensorflow加载部分层的方法
2018/07/26 Python
使用TensorFlow实现简单线性回归模型
2019/07/19 Python
python异步编程 使用yield from过程解析
2019/09/25 Python
class类在python中获取金融数据的实例方法
2020/12/10 Python
英国袜子店:Sock Shop
2017/01/11 全球购物
什么是ARP(Address Resolution Protocol)地址解析协议
2013/10/31 面试题
邓小平理论心得体会
2014/09/09 职场文书
高中校园广播稿
2014/10/21 职场文书
毕业实习证明(4篇)
2014/10/28 职场文书
我的中国梦主题教育活动总结
2015/05/07 职场文书
2015军训通讯稿大全
2015/07/18 职场文书
《有余数的除法》教学反思
2016/02/22 职场文书