详解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判断对象是否存在属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本篇文章主要介绍了template.js前端模板引擎使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要为大家详细介绍了JavaScript实现飞舞的泡泡效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
这篇文章主要为大家详细介绍了微信小程序实现留言板，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
这篇文章主要介绍了微信小程序之数据缓存的实例详解的相关资料,希望通过本文能帮助到大家，让大家掌握这部分内容，需要的朋友可以参考下2017-09-09
这篇文章主要介绍了JavaScript中精度失准问题及解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
这篇文章主要介绍了JavaScript的this关键字，真正帮助大家做到精通this关键字，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-02-02
解决JS请求路径控制台报错 Failed to launch'xxx' because t
这篇文章主要介绍了JS请求路径控制台报错 Failed to launch ‘xxx‘ because the scheme does not have a registered handler的问题,本文给大家分享最新完美解决方法，需要的朋友可以参考下2023-03-03
这篇文章主要为大家详细介绍了H5实现手机拍照和选择上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-12-12
JavaScript判断表单中多选框checkbox选中个数的方法
这篇文章主要介绍了JavaScript判断表单中多选框checkbox选中个数的方法,涉及javascript针对checkbox复选框的遍历与判断技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
今天在为网站增加一些代码功能的时候，需要用到if条件判断，发现简写方法忘了，这里特整理下2014-05-05
最新评论