JavaScript 对象中的键——如何在 JS 中检查一个对象是否有一个键

JavaScript 中的对象是非原始的数据类型,它包含无序的键-值对集合。

正如你在上面的图片中看到的,键是属性,每个对象的值都必须有一个键。

当与对象进行交互时,可能会出现需要你检查某个特定键是否存在的情况。值得注意的是,如果你知道一个键存在,就自动意味着一个值存在。这个值可以是任何东西——甚至是空值、null 或 undefined。

在这篇文章中,我们将学习各种方法来检查 JavaScript 中一个对象的键是否存在。

如何在 JavaScript 中用 in 操作符检查一个对象是否有一个键

你可以使用 JavaScript in 操作符来检查一个对象中是否存在一个指定的属性/键。它有一个简单的语法,如果指定的属性/键存在于指定的对象或其原型链中,则返回 true

使用 in 操作符的语法是:

'key' in object

假设我们有一个包含用户详细信息的对象:

let user = {
  name: "John Doe",
  age: 40
};

我们可以用 in 操作符检查一个键是否存在,如下图所示:

'name' in user; // 返回 true
'hobby' in user; // 返回 false
'age' in user; // 返回 true

注意:in 关键字前的值应该是 string 或 symbol 类型。

如何在 JavaScript 中用 hasOwnProperty() 方法检查一个对象是否有一个键

你可以使用 JavaScript hasOwnProperty() 方法来检查一个指定的对象是否有给定的属性作为其属性。

这个方法与 in 操作符非常相似。它接收一个 string,如果该键存在于该对象中,将返回 true,否则返回 false

使用 hasOwnProperty() 方法的语法是:

object.hasOwnProperty('key')

假设我们有一个包含用户详细信息的对象:

let user = {
  name: "John Doe",
  age: 40
};

我们可以用 in 操作符检查一个键是否存在,如下图所示:

user.hasOwnProperty('name'); // 返回 true
user.hasOwnProperty('hobby'); // 返回 false
user.hasOwnProperty('age'); // 返回 true

注意:你传入 hasOwnProperty() 方法的值应该是 string 或 symbol 类型。

由于我们现在知道这些方法的存在,我们现在可以使用一个条件来检查并执行我们想执行的任何操作:

if ("name" in user) {
  console.log("the key exists on the object");
}

// 或者

if (user.hasOwnProperty("name")) {
  console.log("the key exists on the object");
}

总结

在这篇文章中,我们已经学会了如何使用两个标准方法来检查一个对象是否有一个键。这两种方法的区别在于,Object.hasOwnProperty() 只在一个对象中寻找一个键,而 in 操作符则在对象及其原型链中寻找键。

你还可以使用其他方法,但在某些时候,它们可能会变得过于复杂,而且不是那么容易理解。它们也可能在对某些条件进行测试时失败。

例如,我们可以使用可选的链,所以如果指定的键不存在,它将返回 undefined

let user = {
  name: "John Doe",
  age: 40
};

console.log(user?.name); // 返回 John Doe
console.log(user?.hobby); // 返回 undefined
console.log(user?.age); // 返回 40

所以我们可以创建一个条件,当它不等于 undefined 时,就意味着这个键存在:

if (user?.hobby !== undefined) {
  console.log("The key exists on the object");
}

正如我们前面所说,这些方法在对一些不常见的条件进行测试时失败。例如,在某一特定键被设置为 “undefined” 的情况下,如下图所示,条件失败:

let user = {
  name: "John Doe",
  age: undefined
};

console.log(user?.age); // 返回 undefined

另一个例子是,当我们在使用 Object.keys() 方法的同时使用 some() 方法时,它能起作用,但会变得很复杂。这可以工作,但并不容易理解:

let user = {
  name: "John Doe",
  age: undefined
};

const checkIfKeyExist = (objectName, keyName) => {
    let keyExist = Object.keys(objectName).some(key => key === keyName);
    return keyExist;
};
  
console.log(checkIfKeyExist(user, 'name')); // 返回 true

在上面的代码中,我们把所有的键都变成一个数组,然后应用 some() 方法来测试数组中是否至少有一个元素通过测试。如果通过,则返回 true,否则返回 false