判断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); // true console.log('b' in obj); // false const obj2 = Object.create(obj); // obj2的原型是obj console.log('a' in obj2); // true <-- 注意这里，沿着原型链找到了a -
hasOwnProperty方法： 只检查对象自身是否拥有该属性，不会沿着原型链向上查找。objectName.hasOwnProperty('propertyName')，如果对象自身有该属性，返回true，否则返回false。
const obj = { a: 1 }; console.log(obj.hasOwnProperty('a')); // true console.log(obj.hasOwnProperty('b')); // false const obj2 = Object.create(obj); // obj2的原型是obj console.log(obj2.hasOwnProperty('a')); // false <-- 注意这里，只检查自身，不检查原型链 -
直接访问属性： 直接
objectName.propertyName或者objectName['propertyName']。 如果属性存在，返回属性值；如果属性不存在，返回undefined。 需要注意的是，如果属性存在，但值为undefined，也会返回undefined，这就和属性不存在的情况混淆了。 所以，这种方法要小心使用。const obj = { a: 1, b: undefined }; console.log(obj.a); // 1 console.log(obj.b); // undefined console.log(obj.c); // undefined if (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); // 1 console.log(obj?.a?.c); // undefined console.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。
