译文： 在JavaScript中判断对象属性是否存在

当我们需要检查 JavaScript 对象是否包含特定属性时，我们可以使用多种方法，包括 JavaScript 运算符、Object 类的特定静态方法、对象实例方法、数组实例方法和自定义 JavaScript 函数。

下面将展示上面提到所有方法的例子，所以，让我们开始吧。

1. in 操作符

如果指定的属性存在于对象或其原型链中，则 in 运算符会返回 true。该运算符也适用于使用 Object.create() 静态方法创建的对象。

const person = {
    name: 'John',
    surname: 'Doe',
    age: 41
  };
  
  const hasLocation = 'location' in person;
  if (hasLocation) {
    console.log("We have the location data");
  } else {
    console.log("We don't have the location data")
  }
  
  // result
  // We don't have the location data
  
  const user = Object.create({ name: 'Donald' });
  console.log('name' in user); // true

2.Object.prototype.hasOwnProperty() 方法

在这里，我们可以使用对象实例方法 hasOwnProperty() 来检查对象是否包含特定属性。

虽然 Object.prototype.hasOwnProperty() 在 JavaScript 规范中已经存在了相当长的时间，但它有一些缺点。hasOwnProperty() 对于使用 Object.create(null) 创建的对象无法工作，因为它不继承自 Object.prototype，这使得 hasOwnProperty() 方法对该对象不可达。如果使用 hasOwnProperty() 方法，该对象将会抛出异常。

const person = {
    name: 'John',
    surname: 'Doe',
    age: 41
  };
  
  const hasName = person.hasOwnProperty('name');
  if (hasName) {
    console.log(`We have name property, value ${person.name}`);
  } else {
    console.log("We don't have name property");
  }
  // result
  // We have name property, value John
  
  const user = Object.create({ name: 'Paul' });
  console.log(user.hasOwnProperty('name')); // false

3.Object.hasOwn() 方法

作为 ECMAScript 2022 版本的一部分，我们在 Object 类中有一个静态的 hasOwn() 方法。在支持该方法的浏览器中，推荐使用 Object.hasOwn() 而不是 hasOwnProperty()。Object.hasOwn() 是 Object.prototype.hasOwnProperty() 方法的预期替代方法。

const person = {
    name: 'John',
    surname: 'Doe',
    age: 41
  };
  const hasAge = Object.hasOwn(person, 'age');
  if (hasAge) {
    console.log(`We have age property, value ${person.age}`);
  } else {
    console.log("We don't have age property");
  }
  
  // result
  // We have age property, value 41
  
  const user = Object.create({ name: 'Jorge' });
  console.log(Object.hasOwn(person, 'name')); // true

4. 检查值是否为undefined

当我们尝试访问对象的不存在的属性时，其结果是返回 undefined 值。因此，我们可以采用这种方法，仅在属性值不为 undefined 时执行某些操作。

const person = {
  name: 'John',
  surname: 'Doe',
  age: 41,
};
if (person.location !== undefined) {
  // do some operation
} else {
  console.log('Location property is not present on person object');
}

5.Object.keys() 结合 Array.prototype.some() 方法

这种方法使用 Object.keys() 和 Array.prototype.some() 方法。通常我们可以将对象转换为属性数组，然后使用带有预测能力的 some 方法来检查目标属性名是否存在。这种方法与 Object.prototype.hasOwnProperty() 具有相同的缺点，因为对于使用 Object.create() 方法创建对象，我们无法找到对象属性。

const person = {
    name: 'John',
    surname: 'Doe',
    age: 41
  };
  
  const hasSurname = Object.keys(person).some(key => key === 'surname');
  console.log(hasSurname); // true
  
  const user = Object.create({ name: 'Thomas' });
  const hasName = Object.keys(user).some(property => property === 'name');
  console.log(hasName); // false

6.自定义JavaScript工具方法

这个 hasKey() 函数接受对象和目标属性名称作为参数，如果两个参数都被定义，我们就会通过 for-in 循环遍历对象，在每次迭代中检查当前属性键是否等于目标属性键（输入参数）。

const person = {
  name: 'John',
  surname: 'Doe',
  age: 41,
};

const user = Object.create({ name: 'Kevin' });

function hasKey(object, target) {
  if (object && target) {
    for (const key in object) {
      if (key === target) {
        return true;
      }
    }
    return false;
  } else {
    return false;
  }
}

console.log(hasKey(person, 'name')); // true
console.log(hasKey(person, 'location')); // false
console.log(hasKey(user, 'name')); // true

总结

一般来说，在 Web 开发中，精通 JavaScript 对象是非常重要的。

正如你所看到的，当我们需要检查特定 JavaScript 对象中属性的存在时，有很多选项可供选择。根据我的经验，"in" 运算符和 Object.hasOwn() 方法是我们在日常工作中需要坚持使用的方法。此外，如果由于某些原因我们没有 ECMAScript 2022 版本，我们可以使用"in"运算符或检查 undefined 值。

原文链接

如侵则删