详解JS如何判断对象上是否存在某个属性
判断某一个对象里面是否存在某个属性，常见错误场景排查，但是你真的知道该如何使用嘛。
关于这个问题，大家第一眼看到脑海中肯定会有多种方案去实现，但你有具体想过每个方案的实现有哪些其他问题存在嘛，这样的写法是否错误等，实际上在实现这个需求的的时候大家都会犯很多常见的问题。这个问题也是往往能考察出大家基础知识掌握的熟练不熟练。
以下列出几种错误的写法，方便大家去思考错在哪里，为什么错了
第一种
判断这个属性是否有值
/**
* @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
通过上述的几种方案我想大家应该知道为什么会采用最后一种方案来判断对象上是否存在某个属性，当然在某些业务场景下可能上述的几种方案都能满足需求，但我们一定是熟练掌握基础知识后才能知道在哪种业务场景下使用哪种方案。
到此这篇关于详解JS如何判断对象上是否存在某个属性的文章就介绍到这了,更多相关JS判断对象是否存在属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了JS实现点击文本框改变背景颜色，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
这篇文章主要介绍了在前端中Proj4.js使用简单介绍及进阶应用的相关资料,Proj4是一个用于处理JavaScript里的几何图形和坐标计算的库,它提供了多边形、点、线等几何对象的计算功能,需要的朋友可以参考下2025-01-01
这篇文章主要介绍了JS的时间格式化和时间戳转换函数，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-07-07
这篇文章主要给大家介绍了关于微信小程序使用Echarts和分包的完整步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
这篇文章主要介绍了JS实现微信 "炸屎"大作战,本文通过实例代码图文展示给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-07-07
这篇文章主要给大家介绍了关于如何安装控制器JavaScript生成插件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-10-10
今天小编就为大家分享一篇 layui扩展上传组件模拟进度条的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要介绍了Javascript中的包装类型介绍,包装类型是指在执行代码的一瞬间把数据包装成引用类型,本文讲解的就是这个小知识,需要的朋友可以参考下2015-04-04
这篇文章主要给大家介绍了JavaScript中双符号的运算，其中包括双波浪号和双感叹号的运算，文中给出了详细的示例代码，需要的朋友们可以参考借鉴，下面来一起看看吧。2017-03-03
显示/隐藏侧边栏...2006-10-10
最新评论