判断js对象属性是否存在，核心答案是优先使用in操作符或hasownproperty方法。1. in操作符会检查对象自身及其原型链，若属性存在则返回true，适用于需要包含继承属性的场景；2. hasownproperty仅检查对象自身属性，不包括原型链，适合精确判断自身是否定义了该属性；3. 直接访问属性可能因值为undefined而误判，应结合in或hasownproperty使用；4. 可选链?.虽不能直接判断存在性，但可避免深层访问时报错；5. 判断属性值是否为null时，需用=== null进行严格比较，因为in和hasownproperty无法区分null与其它值的存在性。
判断JS对象属性是否存在，核心就是别踩坑。看似简单，实则一不小心就掉进 undefined 和 null 的陷阱里。最直接的方法是用 in 操作符，或者 hasOwnProperty 方法，但这俩又有点细微差别，得根据具体情况选。
解决方案：
in 操作符： 最简单粗暴的方式。 'propertyName' in objectName，存在就返回 true，不存在就返回 false。 需要注意的是，in 会沿着原型链向上查找，如果原型链上有同名属性，也会返回 true。
const obj = { a: 1 };console.log('a' in obj); // trueconsole.log('b' in obj); // falseconst obj2 = Object.create(obj); // obj2的原型是objconsole.log('a' in obj2); // true <-- 注意这里，沿着原型链找到了a
hasOwnProperty 方法： 只检查对象自身是否拥有该属性，不会沿着原型链向上查找。 objectName.hasOwnProperty('propertyName')，如果对象自身有该属性，返回 true，否则返回 false。
const obj = { a: 1 };console.log(obj.hasOwnProperty('a')); // trueconsole.log(obj.hasOwnProperty('b')); // falseconst obj2 = Object.create(obj); // obj2的原型是objconsole.log(obj2.hasOwnProperty('a')); // false <-- 注意这里，只检查自身，不检查原型链
直接访问属性： 直接 objectName.propertyName 或者 objectName['propertyName']。 如果属性存在，返回属性值；如果属性不存在，返回 undefined。 需要注意的是，如果属性存在，但值为 undefined，也会返回 undefined，这就和属性不存在的情况混淆了。 所以，这种方法要小心使用。
const obj = { a: 1, b: undefined };console.log(obj.a); // 1console.log(obj.b); // undefinedconsole.log(obj.c); // undefinedif (obj.b) { // 坑！ undefined会被当做false console.log("b 存在且有值"); // 不会执行}if (obj.c) { // 坑！ undefined会被当做false console.log("c 存在且有值"); // 不会执行}
可选链操作符 ?.： ES2020 引入的语法糖，可以避免访问深层嵌套对象时出现 TypeError。 objectName?.propertyName，如果 objectName 为 null 或 undefined，则直接返回 undefined，否则返回 objectName.propertyName 的值。 虽然不是专门用来判断属性是否存在的，但在某些场景下可以简化代码。
const obj = { a: { b: 1 } };console.log(obj?.a?.b); // 1console.log(obj?.a?.c); // undefinedconsole.log(obj?.d?.e); // undefined 避免了TypeError
in 操作符和 hasOwnProperty 方法的区别是什么？什么时候用哪个？
简单来说，in 操作符会沿着原型链查找，而 hasOwnProperty 只检查对象自身。
如果只需要判断对象自身是否拥有该属性，就用 hasOwnProperty。 例如，你想知道一个对象是否直接定义了某个属性，而不是从原型链继承来的。如果需要判断对象及其原型链上是否存在该属性，就用 in 操作符。 例如，你想知道一个对象是否可以访问某个属性，不管它是自身定义的还是继承来的。性能上，hasOwnProperty 通常比 in 操作符快，因为不需要遍历原型链。
如何避免直接访问属性时，属性值为 undefined 导致的误判？
最靠谱的方法是结合 in 操作符或 hasOwnProperty 方法使用。
const obj = { a: 1, b: undefined };// 使用 in 操作符if ('b' in obj) { console.log("b 存在"); // 会执行} else { console.log("b 不存在");}// 使用 hasOwnProperty 方法if (obj.hasOwnProperty('b')) { console.log("b 存在"); // 会执行} else { console.log("b 不存在");}
如果对象属性的值可能是 null，该如何判断？
null 和 undefined 是不同的。 undefined 表示变量未定义或已定义但未赋值，而 null 表示一个空对象指针。
判断属性值是否为 null，可以直接使用严格相等运算符 ===。
const obj = { a: 1, b: null };if (obj.b === null) { console.log("b 的值为 null"); // 会执行}if (obj.c === null) { console.log("c 的值为 null"); // 不会执行，因为c不存在}
注意，in 和 hasOwnProperty 只能判断属性是否存在，不能判断属性值是否为 null。 即使属性值为 null，这两个方法仍然会返回 true。
以上就是js中判断对象属性是否存在怎么写的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1508193.html
微信扫一扫 
支付宝扫一扫 
