資料結構
網路
關係資料庫管理系統 (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
