详解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判断对象是否存在属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！