详解JS如何判断对象上是否存在某个属性
作者:只会番茄炒蛋 发布时间:2024-04-16 09:49:28
判断某一个对象里面是否存在某个属性,常见错误场景排查,但是你真的知道该如何使用嘛。
关于这个问题,大家第一眼看到脑海中肯定会有多种方案去实现,但你有具体想过每个方案的实现有哪些其他问题存在嘛,这样的写法是否错误等,实际上在实现这个需求的的时候大家都会犯很多常见的问题。这个问题也是往往能考察出大家基础知识掌握的熟练不熟练。
以下列出几种错误的写法,方便大家去思考错在哪里,为什么错了
第一种
判断这个属性是否有值
/**
* @method hasProperty 判断对象中是否存在某个属性
* @param {Object} obj
* @param {String} key
* @returns Boolean
*/
function hasProperty(obj, key) {
return obj[key] !== undefined;
}
以上的方法有个明显的错误,假如我这个对象刚好有个属性的值就是undefined的话
const obj = { a: undefined };
hasProperty(obj, "a"); // false
所以不能用undefined去做判断
第二种
通过Object.keys()方法得到对象里所有属性形成的数组,然后使用includes方法判断该属性存不存在
/**
* @method hasProperty 判断对象中是否存在某个属性
* @param {Object} obj
* @param {String} key
* @returns Boolean
*/
function hasProperty(obj, key) {
return Object.keys(obj).includes(key);
}
const obj = { a: undefined };
hasProperty(obj, "a"); // true
通过上述方法,我们发现它实现了第一种方式不能判断undefined的方法,感觉这个方法好像可以,但是有另外的一种情况它又不能判断了
const obj = { a: undefined, b: 1 };
Object.defineProperty(obj, "c", {
value: 2,
enumerable: false,
});
console.log(obj.c); // 2
hasProperty(obj, "c"); // false
我们通过Object.defineProperty给该对象添加一个c属性值为2,但是不可遍历,这时候发现判断c属性是否存在时是拿不到c的,说明这种方案也存在缺陷。
第三种
使用js提供的一个函数hasOwnProperty,这是js专门提供的一个用来判断对象里面是否存在某一个属性的方法
/**
* @method hasProperty 判断对象中是否存在某个属性
* @param {Object} obj
* @param {String} key
* @returns Boolean
*/
function hasProperty(obj, key) {
return obj.hasOwnProperty(key);
}
const obj = { a: undefined, b: 1 };
Object.defineProperty(obj, "c", {
value: 2,
enumerable: false,
});
hasProperty(obj, "c"); // true
我们发现这个方案实现了上述两种方案缺陷的部分,也能正确的判断了,但是问题来了,这个方法有没有缺陷呢?没错它也有缺陷
console.log(hasProperty(obj, "toString")); // false
console.log(obj.toString); // [Function: toString]
没错,如果你基础知识掌握的可以的话你会知道,对象的原型链上存在一个toString方法,但是上述的方案就没办法判断了,因为hasOwnProperty只能判断自身的属性,没有办法判断原型链上的属性,但通常我们能说到这个方案也基本可以了。那有没有最终的解决方案呢
最佳方案
通过 in 关键判断,它不单单能判断属性是否在对象身上,它还可以通过原型链去查找
/**
* @method hasProperty 判断对象中是否存在某个属性
* @param {Object} obj
* @param {String} key
* @returns Boolean
*/
function hasProperty(obj, key) {
return key in obj;
}
const obj = { a: undefined, b: 1 };
Object.defineProperty(obj, "c", {
value: 2,
enumerable: false,
});
hasProperty(obj, "toString"); // true
通过上述的几种方案我想大家应该知道为什么会采用最后一种方案来判断对象上是否存在某个属性,当然在某些业务场景下可能上述的几种方案都能满足需求,但我们一定是熟练掌握基础知识后才能知道在哪种业务场景下使用哪种方案。
来源:https://juejin.cn/post/7238845423379710013
猜你喜欢
- python将数据换为txt的方法有很多,可以用xlrd库实现。本人比较懒,不想按太多用的少的插件,利用已有库pandas将excel文件转
- 关于元组,上一讲中涉及到了这个名词。本讲完整地讲述它。先看一个例子:>>>#变量引用str>>> s =
- 首先定义了一个test.py的文件,然后再定义一个函数,并在函数定义后直接运行:test.pydef HaveFun(): if __nam
- 本文实例讲述了Python3.5多进程原理与用法。分享给大家供大家参考,具体如下:进程类:Process示例及代码:(1)创建函数作为单进程
- 最近做的项目中有一个小功能:在python中调用scp命令使用ssh登录,然后将指定目录中的图片上传到服务器指定目录网上搜了很多方法都没用,
- auto-push-oss Action虽然在 Github 市场有推送 OSS 相关的 Action,但是我还是选择改造我运行了好多年的脚
- 本文实例为大家分享了python实现简易动态时钟的具体代码,供大家参考,具体内容如下from turtle import *from dat
- 在我的上篇文章发出之后,我听到对“WEb2.0视觉风格”这个称谓的不认同声音。其实这并不出乎我的意料,因为,我在认真的开始思考“WEb2.0
- 将源目录的图片用MD5命名并设定目标目录尝试了一下用 python 实现了一个生成密码的程序。感觉还是比较好上手的。但是那个程序还是非常简单
- 如下所示:update-alternatives --config python一条简单的命令,如下图所示:来源:https://blog.
- 准备1、下载所需安装包wget https://www.php.net/distributions/php-7.4.0.tar.gzwget
- python中支持SSH协议的模块主要有Paramiko和netmiko两种,本次实验采用netmiko模块。netmikko模块为pyth
- 如下所示:device = torch.device("cuda:0" if torch.cuda.is_availab
- 本文实例为大家分享了vue实现价格日历效果的具体代码,供大家参考,具体内容如下1、效果图2、下载全局安装:npm install ele-c
- 一、subprocess以及常用的封装函数运行python的时候,我们都是在创建并运行一个进程。像Linux进程那样,一个进程可以fork一
- 本文实例为大家分享了python制作英文字典的具体代码,供大家参考,具体内容如下功能有添加单词,多次添加单词的意思,查询,退出,建立单词文件
- python中eval函数的用法十分的灵活,这里主要介绍一下它的原理和一些使用的场合。下面是从python的官方文档中的解释: &
- 目的:在百度贴吧输入关键字和要查找的起始结束页,获取帖子里面楼主所发的图片思路:获取分页里面的帖子链接列表获取帖子里面楼主所发的图片链接列表
- 我就废话不多说了,大家还是直接看代码吧~package mainimport ("bytes""context
- mysql复制表中的一列到另一个表中有时候,我们需要复制某个字段一整列的数据到另外一个新的字段中,这很简单,SQL可以这么写:UPDATE