JavaScript 的 in 关键字
最后修改于 2025 年 4 月 16 日
在本文中，我们将展示如何使用 JavaScript 中的 in 运算符检查属性是否存在。
in 关键字
如果指定属性存在于对象或其原型链中，in 运算符将返回 true。它检查自有属性和继承属性。语法是 property in object，其中 property 是一个字符串或符号。
当您需要在访问对象之前验证它是否具有某个特定属性时，in 运算符非常有用。它与数组一起使用以检查索引是否存在。它与检查属性的值是否未定义有所不同。
与 hasOwnProperty() 不同，in 运算符会检查整个原型链。对于仅有自有属性，请将 in 与 hasOwnProperty() 结合使用，或在现代 JS 中使用 Object.hasOwn()。
基本对象属性检查
以下示例演示了 in 运算符与对象的基本用法。
const person = {
name: 'John',
age: 30
};
console.log('name' in person); // true
console.log('email' in person); // false
这检查 'name' 和 'email' 属性是否存在于 person 对象中。第一个检查返回 true，因为 'name' 存在，而 'email' 返回 false。属性名称必须指定为字符串。
$ node main.js true false
检查数组索引
in 运算符可以检查数组是否具有特定的索引。
const colors = ['red', 'green', 'blue'];
console.log(0 in colors); // true
console.log(3 in colors); // false
console.log('length' in colors); // true
数组在 JavaScript 中是对象，因此我们可以检查索引是否存在。请注意，'length' 是一个内置的数组属性。该检查对现有索引返回 true，对不存在的索引返回 false。
$ node main.js true false true
继承属性检查
in 运算符检查整个原型链中的属性。
function Person(name) {
this.name = name;
}
Person.prototype.age = 30;
const john = new Person('John');
console.log('name' in john); // true
console.log('age' in john); // true
console.log('toString' in john); // true
在这里，我们看到 in 找到了自有属性 (name) 和继承属性 (age, toString)。age 属性来自原型，而 toString 来自 Object.prototype。
$ node main.js true true true
in 和 hasOwnProperty 的区别
此示例显示了 in 和 hasOwnProperty 之间的区别。
const car = {
make: 'Toyota'
};
console.log('make' in car); // true
console.log(car.hasOwnProperty('make')); // true
console.log('toString' in car); // true
console.log(car.hasOwnProperty('toString')); // false
in 运算符找到继承的属性，如 toString，而 hasOwnProperty 仅检查自有属性。当您需要从检查中排除继承的属性时，请使用 hasOwnProperty。
$ node main.js true true true false
检查 Symbol 属性
in 运算符也适用于 Symbol 属性。
const id = Symbol('id');
const user = {
[id]: 123,
name: 'Alice'
};
console.log(id in user); // true
console.log('name' in user); // true
console.log(Symbol('id') in user); // false
必须确切地引用 Symbol 才能找到它们。最后一个检查失败，因为它使用了不同的 Symbol 实例。Symbol 属性是唯一的，不能被意外覆盖。
$ node main.js true true false
检查 DOM 元素属性
in 运算符可以检查 DOM 元素属性和方法。
const element = document.createElement('div');
console.log('innerHTML' in element); // true
console.log('click' in element); // true
console.log('nonExistent' in element); // false
这检查某些属性和方法是否存在于 DOM 元素上。请注意，这在浏览器环境中有效。DOM 元素从它们的原型链继承了许多属性。
$ node main.js true true false
实际用例：特性检测
这是一个使用 in 进行特性检测的实际例子。
// Check if browser supports the fetch API
if ('fetch' in window) {
console.log('Fetch API is supported');
} else {
console.log('Consider using XMLHttpRequest or a polyfill');
}
// Check if a specific method exists
const obj = {
modernMethod() {
console.log('Modern method called');
}
};
if ('modernMethod' in obj) {
obj.modernMethod();
}
这演示了如何在 API 支持之前检查它。特性检测比浏览器嗅探更可靠。第二部分显示了在调用对象中的特定方法之前检查该方法。
$ node main.js Consider using XMLHttpRequest or a polyfill Modern method called
来源
在本文中，我们演示了如何使用 in 运算符来检查 JavaScript 对象和数组中属性是否存在。