JS 判断对象属性是否存在,判断是否包含某个属性,是否为自身属性
壹 ❀ 引
看过博主JS 疫情宅在家,学习不能停,七千字长文助你彻底弄懂原型与原型链这篇文章的同学应该知道,文中有专门介绍这个问题。那么为什么我要另起一篇再说一次呢?原因有两个,一是介绍原型与原型链的文章过长,大家不一定看得完;二是这个月我只写了一篇博客!!!我良心过不去!!我对不起关注我的粉丝!!!真实原因是,我发现网上问这个问题的人还挺多,单独拿出来说也值得(其实就是水文章),那么本文开始。
贰 ❀ 判断是否包含某对象
我们知道访问对象属性有两种形式,如下:
var obj = {
name:'听风是风'
};
obj.name;//听风是风
obj['name'];//听风是风
那么马上有同学就想到用这两种形式判断对象是否包含某个属性,因为原型链上如果某个属性不存在就会返回undefined,比如:
if(!obj.age){
console.log('obj没有age属性');
}
这么做行不行,行,但是存在缺陷。最特殊的情况就是我们有age字段,而它的值偏偏就是undefined,那这样就尴尬了。
怎么办呢,一般推荐使用 in 运算符,用法是属性名 in 对象,如果存在返回true,反之为false,来看个例子:
var echo = {
name:'听风是风',
job:undefined
};
console.log('name' in echo);//true
console.log('job' in echo);//true
console.log('age' in echo);//false
但需要注意的是,in 只能判断对象有没有这个属性,无法判断这个属性是不是自身属性,啥意思?咱们接着说。
叁 ❀ 判断是否是自身属性
一个最简单的构造函数创建实例的例子:
function Parent(){
this.name = 'echo';
};
Parent.prototype.age = 26;
var o = new Parent();
o.name//echo
o.age//26
在这个例子中,对于实例 o 而言,name就是是自身属性,这是它自己有的,而age是原型属性,o虽然没有这个属性,但在需要时,它还是顺着原型链找到了自己的老父亲Parent,并借用了这个属性。
所以当我们用 in 判断时可以发现结果均为true:
'name' in o;//true
'age' in o;//true
针对这个问题,如果我们还要判断是否是自身属性,就得借用方法hasOwnProperty(),不信你看:
o.hasOwnProperty('name');//true
o.hasOwnProperty('age');//false
说到底hasOwnProperty()做了两件事,除了判断对象是否包含这个属性,还判断此属性是不是对象的自身属性。
所以我们可以简单总结一下,如果我们只需判断对象有没有某个属性,使用 in 运算符就好了。而如果我们还要关心这个属性是不是自身属性,那么推荐hasOwnProperty()方法。
说了这么多,这两个判断有什么使用场景呢?
关于 in 运算符判断对象有没有某个属性,最常见的,我们希望给某个对象添加一个方法,直接添加又担心其他同事已经声明过,存在覆盖的可能性,所以使用 in 来判断,没有这个属性,咱们再加。
当然针对这个问题,使用Symbol来确保对象key的唯一性也是不错的做法,这个就看实际场景了。
而关于hasOwnProperty()这个方法呢,我目前遇到的就是深拷贝实现时会使用,因为我们知道每个对象都有原型,而深拷贝时我们只是希望拷贝对象的自身属性,使用此方法做个区分就是非常奈斯的做法了。
好了,这篇文章就说到这里了,全文结束。
JS 判断对象属性是否存在,判断是否包含某个属性,是否为自身属性的更多相关文章
- Java判断对象是否为NULL
Java使用反射判断对象是否为NULL 判断Java对象是否为null可以有两层含义: 第一层: 直接使用 object == null 去判断,对象为null的时候返回true,不为null的时候 ...
- js判断对象的某个属性是否存在
参考:https://www.jb51.net/article/141994.htm 原始数据, [ {"name":"向阳镇","id": ...
- 将对象的所有属性名放到一个数组中 || 获得对象的所有属性名 || return;不具有原子性 || 怎样自己制作异常|| 判断对象有没有某个属性 || 当传递的参数比需要的参数少的时候,没有的值会被赋予undefined || 获得函数实际传递的参数 || 怎么用函数处理一个对象 || 用一个名字空间定义一个模块所有的函数 || 给一个对象添加方法
获得对象的所有属性名 || 将对象o的所有属性名放到数组中 var o = {x:1,y:2,z:3}; var arr = []; var i = 0; for(arr[i++] in o){};/ ...
- JS/React 判断对象是否为空对象
JS一般判断对象是否为空,我们可以采用: if(!x)的方式直接判断,但是如果是一个空对象,比如空的JSON对象,是这样的:{},简单的判断是不成功的,因为它已经占用着内存了,如果是JQuery的话, ...
- 判断js数组/对象是否为空
/** * 判断js数组/对象是否为空 * isPrototypeOf() 验证一个对象是否存在于另一个对象的原型链上.即判断 Object 是否存在于 $obj 的原型链上.js中一切皆对象,也就是 ...
- js中判断对象类型的几种方法
我们知道,JavaScript中检测对象类型的运算符有:typeof.instanceof,还有对象的constructor属性: 1) typeof 运算符 typeof 是一元运算符,返回结果是一 ...
- 简述Js中,判断对象为空对象的几种方式
1.空对象.空引用以及undefined三种概念的区别 空对象:是对象,但它的值是指向没有任何属性的对象的引用, {}是指 不含任何属性 的对象,当然对象属性包括 字面值和函数: 空引用:obj=nu ...
- js中判断对象具体类型
大家可能知道js中判断对象类型可以用typeof来判断.看下面的情况 <script> alert(typeof 1);//number alert(typeof "2" ...
- JS判断对象是否存在的方法
Javascript语言的设计不够严谨,很多地方一不小心就会出错. 举例来说,请考虑以下情况. 现在,我们要判断一个全局对象myObj是否存在,如果不存在,就对它进行声明.用自然语言描述的算法如下: ...
- Js判断对象是否为空,Js判断字符串是否为空
Js判断对象是否为空,Js判断字符串是否为空,JS检查字符串是否为空字符串 >>>>>>>>>>>>>>>&g ...
随机推荐
- python3使用json、pickle和sqlite3持久化存储字典对象
技术背景 在各种python的项目中,我们时常要持久化的在系统中存储各式各样的python的数据结构,常用的比如字典等.尤其是在云服务类型中的python项目中,要持久化或者临时的在缓存中储存一些用户 ...
- 2023年SWPU NSS 秋季招新赛 (校外赛道) MISC复盘WP
GIF Code 题目描述: 扫一扫即可获取Flag 给了一个含二维码的动图,分离一下得到九张二维码碎片,根据文件名数字按顺序组装,在线扫码即可 NSSCTF{3f0ac91b-3e0e-a7e2-7 ...
- Laravel - 使用查询构造器查询
public function constructorQuery() { # 1,新增 DB::table('student')->insert([ ...
- [转帖]Shell脚本数组(实现冒泡排序,直接选择排序,反转排序)
目录 数组 数组定义方法 数组包括的数据类型 获取数组长度 读取某下标赋值 数组遍历 数组切片 数组替换 删除数组 追加数组中的元素 从函数返回数组 加法传参运算 乘法传参运算 数组排序算法 冒泡排序 ...
- [转帖]Jmeter 压测中配置https证书
本文章 主要介绍证书的获取.处理.配置到jmeter中. 1. 获取证书 首先:谷歌浏览器 打开网站,点击 地址栏的锁(表示https),选择 "证书"---"隐私.搜索 ...
- 在WPF应用中,结合阿里矢量图标库使用Geometry图标
在我们的SqlSugar开发框架的WPF应端中,有时候我们需要在按钮或者其他界面元素上使用一些图标,框架中我们可以使用 lepoco/wpfui 项目的图标库,也可以使用Font-Awesome-WP ...
- vscode推荐插件
js相关的插件 JavaScript (ES6) code snippets Babel ES6/ES7 html css 汉化 Chinese (Simplified) (简体中文) Languag ...
- c和c++开发工具之clion和vs
个人体验结果 如果是CMake或者要跨平台的话,建议使用CLion 像我在看书写练习题的话,Clion使用cmake编译c/c++源码更简单上手使用. 如果项目不大,两者都可以.如果关联子项目或第三方 ...
- 【2】VScode 搭建python和tensorflow环境
相关文章: [一]tensorflow安装.常用python镜像源.tensorflow 深度学习强化学习教学 [二]tensorflow调试报错.tensorflow 深度学习强化学习教学 [三]t ...
- org.apache.hadoop.security.AccessControlException: Queue root.online already has 0 applications, cannot accept submission of application
org.apache.hadoop.security.AccessControlException: Queue root.online already has 0 applications, can ...