数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学解释 JavaScript 中“in”运算符的用途
本教程将讲解 JavaScript 中“in”运算符。JavaScript 中有很多运算符，例如用于执行数学运算的算术运算符、赋值运算符、相等运算符等等。“in”运算符也是其中之一，我们可以用它来查找对象的属性。
在我们开始之前，让我问你一个问题。在使用 JavaScript 编程时，你是否需要检查对象属性是否存在？如果是，你是如何处理的呢？答案很简单，你可以使用“in”运算符，它根据对象是否包含该属性返回布尔值。
使用“in”运算符检查对象属性是否存在
“in”运算符的工作方式与其他运算符相同。它有两个操作数。左操作数是对象属性，右操作数是对象本身。
语法
您可以按照以下语法使用“in”运算符检查对象属性是否存在。
let object = {
property: value,
}
let ifExist = "property" in object;
在上述语法中，您可以看到对象如何包含属性及其值。该值可以是数字、字符串、布尔值等类型。ifExist 变量根据属性是否存在于对象中存储 true 或 false 布尔值。
示例 1
在这个例子中，我们创建了包含不同属性和值的對象。此外，该对象还包含该方法。之后，我们使用“in”运算符来检查属性是否存在于对象中。
在示例输出中，用户可以观察到“in”运算符对 property1 和 property4 返回 true，但对 property7 返回 false，因为它不存在于对象中。
<html>
<body>
<h3>Using the <i> in operator </i> to check for the existence of the property in the object.</h3>
<div id = "output"> </div>
<script>
let output = document.getElementById("output");
let object = {
property1: "value",
property2: 20,
property3: false,
property4: () => {
console.log("This is a sample function.");
},
};
let ifExist = "property1" in object;
output.innerHTML +=
"The property1 exist in the object " + ifExist + "<br/>";
ifExist = "property4" in object;
output.innerHTML +=
"The property4 exist in the object " + ifExist + "<br/>";
ifExist = "property7" in object;
output.innerHTML +=
"The property7 exist in the object " + ifExist + "<br/>";
</script>
</body>
</html>
在 JavaScript 中，每个对象都有其原型。原型链对象实际上包含对象中的一些方法和属性。但是，我们没有将这些属性添加到对象中，而是 JavaScript 默认添加了它们。例如，数组和字符串原型包含“length”属性，而对象原型包含“toString”属性。
示例 2
在下面的示例中，我们创建了类并在其中定义了构造函数来初始化对象属性。此外，我们还在 table 类中定义了 getSize() 方法。
之后，我们使用构造函数创建 table 类的对象。我们使用“in”运算符来检查属性是否存在于对象原型中。在 JavaScript 中，每个对象在其原型中都包含 toString() 方法，这就是它返回 true 的原因。
<html>
<body>
<h3>Using the <i> in operator </i> to check for the existence of the property in the object prototype</h3>
<div id = "output"> </div>
<script>
let output = document.getElementById("output");
// creating the table class
class table {
// constructor function
constructor(prop1, prop2, prop3) {
this.prop1 = prop1;
this.prop2 = prop2;
this.prop3 = prop3;
}
getSize() {
return 10;
}
}
// creating the object of the table class
let tableObjet = new table("blue", "wood", "four drawers");
// check if a property exists in the object
let ifExist = "prop1" in tableObjet;
output.innerHTML +=
"The prop1 exists in the constructor properties of tableObject: " +
ifExist + "</br>";
// some properties also exist in the object prototype chain.
ifExist = "length" in tableObjet;
output.innerHTML +=
"The length property exists in the constructor properties of tableObject: "
+ ifExist + "</br>";
ifExist = "toString" in tableObjet;
output.innerHTML +=
"The toString Property exists in the constructor properties of tableObject: "
+ ifExist + "</br>";
</script>
</body>
</html>
使用“in”运算符检查数组中是否存在索引
我们只能将“in”运算符与对象一起使用。数组也是对象的实例。用户可以使用 instanceof 或 typeof 运算符来检查数组类型，它返回“Object”。因此，数组中的键是数组索引，键的值是数组值。
在这里，我们可以使用“in”运算符来检查索引是否存在于数组中。如果存在，我们可以访问数组值以避免 arrayOutOfBound 异常。
语法
用户可以按照以下语法检查数组中是否存在索引：
let array = [10, 20, 30]; let ifExist = 2 in array;
在上述语法中，“in”运算符之前的 2 是数组索引，而不是值。
示例 3
在下面的示例中，我们创建了数组并使用 typeof 运算符检查了数组的类型，它返回“Object”。
此外，我们还使用了“in”运算符来检查数组原型中是否存在数组索引和 length 属性。
<html>
<body>
<h2>Using the <i> in operator </i> to check whether the array index exists.</h2>
<div id = "output"> </div>
<script>
let output = document.getElementById("output");
let array = [10, 20, "Hello", "Hi", true];
output.innerHTML += "The type of the array is " + typeof array + "<br/>";
let ifExist = 2 in array;
output.innerHTML +=
"The index 2 exist in the array is " + ifExist + "<br/>";
ifExist = 7 in array;
output.innerHTML +=
"The index 7 exist in the array is " + ifExist + "<br/>";
ifExist = "length" in array;
output.innerHTML +=
"The length property exist in the array is " + ifExist + "<br/>";
</script>
</body>
</html>
本教程教我们如何将“in”运算符与对象和数组一起使用。在对象中，用户可以检查属性是否存在；在数组中，用户可以使用“in”运算符检查索引是否存在。
浏览量：136
