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 相关文章推荐
JavaScript读取中文cookie时的乱码问题的解决方法
Oct 14 Javascript
javascript中通过arguments参数伪装方法重载
Oct 08 Javascript
JS模拟键盘打字效果的方法
Aug 05 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
Mar 05 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
Sep 16 Javascript
AngularJS实现页面定时刷新
Mar 14 Javascript
jquery获取transform里的值实现方法
Dec 12 jQuery
JavaScript设计模式之建造者模式实例教程
Jul 02 Javascript
Iview Table组件中各种组件扩展的使用
Oct 20 Javascript
layui之数据表格--与后台交互获取数据的方法
Sep 29 Javascript
jquery选择器和属性对象的操作实例分析
Jan 10 jQuery
Js Snowflake(雪花算法)生成随机ID的实现方法
Aug 26 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实现的验证码文件类实例
2015/06/18 PHP
PHP生成随机码的思路与方法实例探索
2019/04/11 PHP
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
2010/11/23 Javascript
解决jquery的datepicker的本地化以及Today问题
2012/05/23 Javascript
JQuery写动态树示例代码
2013/07/31 Javascript
javascript字母大小写转换的4个函数详解
2014/05/09 Javascript
Javascript中的几种继承方式对比分析
2016/03/22 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
2017/01/16 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
2018/12/05 Javascript
js实现橱窗展示效果
2020/01/11 Javascript
原生js实现俄罗斯方块
2020/10/20 Javascript
python使用urllib2模块获取gravatar头像实例
2013/12/18 Python
python中pycurl库的用法实例
2014/09/30 Python
Python数据分析之双色球中蓝红球分析统计示例
2018/02/03 Python
Python操作Sql Server 2008数据库的方法详解
2018/05/17 Python
Python自然语言处理 NLTK 库用法入门教程【经典】
2018/06/26 Python
wxpython实现按钮切换界面的方法
2019/11/19 Python
python openssl模块安装及用法
2020/12/06 Python
python中编写函数并调用的知识点总结
2021/01/13 Python
CSS3的Flexbox布局的简明入门指南
2016/04/08 HTML / CSS
Nili Lotan官网:Nili Lotan同名品牌
2018/01/07 全球购物
Tahari ASL官方网站:高级设计师女装
2021/03/15 全球购物
可以使用抽象函数重写基类中的虚函数吗
2013/06/02 面试题
网上常见的一份Linux面试题(多项选择部分)
2015/02/07 面试题
HttpServlet类中的主要方法都有哪些?各自的作用是什么?
2014/03/16 面试题
现代化办公人员工作的自我评价
2013/10/16 职场文书
《小儿垂钓》教学反思
2014/02/23 职场文书
婚纱摄影师求职信
2014/03/07 职场文书
学校师德承诺书
2014/05/23 职场文书
自动化专业大学生职业生涯规划范文:爱拚才会赢
2014/09/12 职场文书
2014年妇幼卫生工作总结
2014/12/09 职场文书
艺术节开幕词
2015/01/28 职场文书
汽车转让协议书
2015/01/29 职场文书
工地材料员岗位职责
2015/04/11 职场文书
php字符串倒叙
2021/04/01 PHP
Windows Server 2016 配置 IIS 的详细步骤
2022/04/28 Servers