JS怎么判断对象属性存不存在？这两种方法超简单

在JavaScript中，判断对象属性是否存在是开发者经常遇到的问题。本文深入探讨了使用`in`操作符、`hasOwnProperty`方法以及直接访问属性等多种方法，详细对比了`in`和`hasOwnProperty`的区别与适用场景。通过实例解析，强调了`in`操作符会检查对象自身及其原型链，而`hasOwnProperty`仅检查对象自身属性。同时，提醒开发者注意直接访问属性时，`undefined`可能带来的误判，并介绍了可选链操作符`?.`在深层访问中的作用。此外，文章还阐述了如何准确判断属性值是否为`null`，避免常见的判断陷阱，助你写出更健壮的JS代码。

判断JS对象属性是否存在，核心答案是优先使用in操作符或hasOwnProperty方法。1. in操作符会检查对象自身及其原型链，若属性存在则返回true，适用于需要包含继承属性的场景；2. hasOwnProperty仅检查对象自身属性，不包括原型链，适合精确判断自身是否定义了该属性；3. 直接访问属性可能因值为undefined而误判，应结合in或hasOwnProperty使用；4. 可选链?.虽不能直接判断存在性，但可避免深层访问时报错；5. 判断属性值是否为null时，需用=== null进行严格比较，因为in和hasOwnProperty无法区分null与其它值的存在性。

判断JS对象属性是否存在，核心就是别踩坑。看似简单，实则一不小心就掉进 undefined 和 null 的陷阱里。最直接的方法是用 in 操作符，或者 hasOwnProperty 方法，但这俩又有点细微差别，得根据具体情况选。

解决方案：

1. 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

2. 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  <-- 注意这里，只检查自身，不检查原型链

3. 直接访问属性： 直接 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 存在且有值"); // 不会执行
   }

4. 可选链操作符 ?.： 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。

今天关于《JS怎么判断对象属性存不存在？这两种方法超简单》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于JavaScript,Undefined,对象属性,hasOwnProperty,in操作符的内容请关注golang学习网公众号！