极客教程JavaScript in运算符的作用
本教程将教授JavaScript中的 “in “运算符。在JavaScript中，有很多运算符，比如进行数学运算的算术运算符、赋值运算符、等价运算符等等。in “运算符也是其中之一，我们可以用它来从对象中寻找属性。
在我们开始之前，让我问你一个问题。在用JavaScript编码时，你是否曾经需要检查对象的属性是否存在？如果有，你是怎么处理的？答案很简单，你可以使用’in’运算符，它根据对象是否包含该属性来返回布尔值。
使用’in’操作符来检查对象属性的存在。
in “运算符的工作原理与其他运算符相同。它需要两个操作数。对象属性作为左操作数，而对象本身作为右操作数。
语法
你可以按照下面的语法，使用’in’操作符检查对象属性的存在。
let object = {
property: value,
}
let ifExist = "property" in object;
在上面的语法中，你可以看到对象如何包含属性和它的值。该值可以是数字、字符串、布尔值等类型。ifExist变量根据该属性在对象中是否存在，存储了真或假的布尔值。
示例 1
在这个例子中，我们已经创建了包含不同属性和值的对象。此外，该对象还包含方法。之后，我们使用 “in “操作符来检查对象中是否存在属性。
在这个例子的输出中，用户可以观察到’in’运算符对property1和property4返回真，但对property7返回假，因为它不存在于对象中。
<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
在下面的例子中，我们已经创建了类，并在里面定义了构造函数来初始化对象的属性。此外，我们还在表类中定义了getSize()方法。
之后，我们使用构造函数来创建表类的对象。我们使用 “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’操作符来检查索引是否存在于数组中。如果它存在，我们可以访问数组的值，以避免数组超出范围的异常。
语法
用户可以按照下面的语法来检查数组中是否存在索引—-。
let array = [10, 20, 30];
let ifExist = 2 in array;
在上述语法中，运算符中写在前面的2是数组索引，而不是值。
示例 3
在下面的例子中，我们已经创建了数组，并使用typeOf操作符检查了数组的类型，结果是 “Object”。
另外，我们使用了’in’操作符来检查数组原型中是否存在数组索引和长度属性。
<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’运算符检查索引的存在。