壹 ❀ 引

看过博主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 判断对象属性是否存在,判断是否包含某个属性,是否为自身属性的更多相关文章

  1. Java判断对象是否为NULL

    Java使用反射判断对象是否为NULL 判断Java对象是否为null可以有两层含义: 第一层:  直接使用 object == null 去判断,对象为null的时候返回true,不为null的时候 ...

  2. js判断对象的某个属性是否存在

    参考:https://www.jb51.net/article/141994.htm 原始数据, [ {"name":"向阳镇","id": ...

  3. 将对象的所有属性名放到一个数组中 || 获得对象的所有属性名 || return;不具有原子性 || 怎样自己制作异常|| 判断对象有没有某个属性 || 当传递的参数比需要的参数少的时候,没有的值会被赋予undefined || 获得函数实际传递的参数 || 怎么用函数处理一个对象 || 用一个名字空间定义一个模块所有的函数 || 给一个对象添加方法

    获得对象的所有属性名 || 将对象o的所有属性名放到数组中 var o = {x:1,y:2,z:3}; var arr = []; var i = 0; for(arr[i++] in o){};/ ...

  4. JS/React 判断对象是否为空对象

    JS一般判断对象是否为空,我们可以采用: if(!x)的方式直接判断,但是如果是一个空对象,比如空的JSON对象,是这样的:{},简单的判断是不成功的,因为它已经占用着内存了,如果是JQuery的话, ...

  5. 判断js数组/对象是否为空

    /** * 判断js数组/对象是否为空 * isPrototypeOf() 验证一个对象是否存在于另一个对象的原型链上.即判断 Object 是否存在于 $obj 的原型链上.js中一切皆对象,也就是 ...

  6. js中判断对象类型的几种方法

    我们知道,JavaScript中检测对象类型的运算符有:typeof.instanceof,还有对象的constructor属性: 1) typeof 运算符 typeof 是一元运算符,返回结果是一 ...

  7. 简述Js中,判断对象为空对象的几种方式

    1.空对象.空引用以及undefined三种概念的区别 空对象:是对象,但它的值是指向没有任何属性的对象的引用, {}是指 不含任何属性 的对象,当然对象属性包括 字面值和函数: 空引用:obj=nu ...

  8. js中判断对象具体类型

    大家可能知道js中判断对象类型可以用typeof来判断.看下面的情况 <script> alert(typeof 1);//number alert(typeof "2" ...

  9. JS判断对象是否存在的方法

    Javascript语言的设计不够严谨,很多地方一不小心就会出错. 举例来说,请考虑以下情况. 现在,我们要判断一个全局对象myObj是否存在,如果不存在,就对它进行声明.用自然语言描述的算法如下: ...

  10. Js判断对象是否为空,Js判断字符串是否为空

    Js判断对象是否为空,Js判断字符串是否为空,JS检查字符串是否为空字符串 >>>>>>>>>>>>>>>&g ...

随机推荐

  1. idea 配置 service 服务,多模块同时启动

    转载请注明出处: 1,打开IDEA项目 .idea 下 的workspace.xml 2,查找"RunDashboard" 节点 3,添加如下内容 <option name= ...

  2. C++数据结构(树)

    树是一种递归定义的数据结构,如果树中节点的各子树从左到右是有次序的,不能互换,则称该树为有序树,否则叫无序树. 关于树的节点: 节点拥有的子树的个数叫做节点的度 如果度为0,那么该节点叫做叶节点或终端 ...

  3. [转帖]JSR223控件简介

    JSR223控件简介 1.调用内置函数 2.执行外部java文件 3.执行jar包 JSR223取样器允许执行JSR223脚本代码用于创建/更新所需的某些变量. 由于JSR223脚本编译方式基本相同, ...

  4. [转帖]kafka漏洞升级记录,基于SASL JAAS 配置和 SASL 协议,涉及版本3.4以下

    攻击者可以使用基于 SASL JAAS 配置和 SASL 协议的任意 Kafka 客户端,在对 Kafka Connect worker 创建或修改连接器时,通过构造特殊的配置,进行 JNDI 注入. ...

  5. [转帖]AnolisOS8安装ntp同步时间

    https://www.wlnmp.com/post-673.html 在AnolisOS8中默认不再支持ntp软件包,时间同步将由chrony来实现,如果你习惯了使用ntp来同步时间,一时难以去适应 ...

  6. 【行云流水线】满足你对工作流编排的一切幻想~skr

    流水线模型 众所周知,DevOps流水线(DevOps pipeline)的本质是实现自动化工作流程,用于支持软件开发.测试和部署的连续集成.交付和部署(CI/CD)实践.它是DevOps方法论的核心 ...

  7. uni-app中使用map

    uni-app中使用地图显示当前的位置 我们现在的需求是,显示用户在地图上所处的位置. 有的小伙伴可能会说,这个是不是需要接入第三方的地图. 其实是不需要的,从目前这个需求来看. 我们只需要引入uni ...

  8. 【解决了一个小问题】macbook m2 下交叉编译 musl-gcc 支持的 gozstd 库

    作者:张富春(ahfuzhang),转载时请注明作者和引用链接,谢谢! cnblogs博客 zhihu Github 公众号:一本正经的瞎扯 我的 golang 项目中使用了 gozstd, 在 ma ...

  9. CTF&爬虫:掌握这些特征,一秒识别密文加密方式

    关注微信公众号:K哥爬虫,持续分享爬虫进阶.JS/安卓逆向等技术干货! 前言 爬虫工程师在做加密参数逆向的时候,经常会遇到各种各样的加密算法.编码.混淆,每个算法都有其对应的特征,对于一些较小的网站, ...

  10. Jekyll安装

    本文来自Jekyll官方文档. 简介 Jekyll是一个静态网站生成器,它可以把Markdown写就的文本根据指定的布局生成静态网站.你可以调整网站的外观.URL.页面展示数据等信息. 准备工作 Je ...