解釋 JavaScript 中「in」運算子的用途-js教程-PHP中文網

首頁

web前端

js教程

解釋 JavaScript 中「in」運算子的用途

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 24, 2023 pm 02:25 PM

解释 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 id="Using-the-i-in-operator-i-to-check-for-the-existence-of-the-property-in-the-object">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 id="Using-the-i-in-operator-i-to-check-for-the-existence-of-the-property-in-the-object-prototype">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;

在上面的語法中，運算子前面寫的2是數組索引，而不是值。

範例 3

在下面的範例中，我們建立了陣列並使用 typeOf 運算子檢查陣列的類型，該運算子傳回「Object」。

此外，我們也使用了「in」運算子來檢查陣列原型中是否存在陣列索引和長度屬性。

<html>
<body>
   <h2 id="Using-the-i-in-operator-i-to-check-whether-the-array-index-exists">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」運算子檢查索引是否存在。

以上是解釋 JavaScript 中「in」運算子的用途的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：tutorialspoint。如有侵權，請聯絡admin@php.cn刪除

JavaScript的角色：使網絡交互和動態Apr 24, 2025 am 12:12 AM

JavaScript是現代網站的核心，因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容，2)通過DOMAPI操作網頁，3)支持複雜的交互效果如動畫和拖放，4)優化性能和最佳實踐提高用戶體驗。

C和JavaScript：連接解釋Apr 23, 2025 am 12:07 AM

C 和JavaScript通過WebAssembly實現互操作性。 1）C 代碼編譯成WebAssembly模塊，引入到JavaScript環境中，增強計算能力。 2）在遊戲開發中，C 處理物理引擎和圖形渲染，JavaScript負責遊戲邏輯和用戶界面。

從網站到應用程序：JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中，JavaScript與HTML、CSS一起操作DOM，實現動態效果，並支持如jQuery、React等框架。 2)通過ReactNative和Ionic，JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行，支持高並發請求。

Python vs. JavaScript：比較用例和應用程序Apr 21, 2025 am 12:01 AM

Python更適合數據科學和自動化，JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色，使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺，用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用，支持全棧開發。

C/C在JavaScript口譯員和編譯器中的作用Apr 20, 2025 am 12:01 AM

C和C 在JavaScript引擎中扮演了至关重要的角色，主要用于实现解释器和JIT编译器。1）C 用于解析JavaScript源码并生成抽象语法树。2）C 负责生成和执行字节码。3）C 实现JIT编译器，在运行时优化和编译热点代码，显著提高JavaScript的执行效率。

JavaScript在行動中：現實世界中的示例和項目Apr 19, 2025 am 12:13 AM

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用，涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。

了解JavaScript引擎：實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。

See all articles