如何在 JavaScript 中使用關聯陣列/雜湊表？

我們使用Object和Map類來模擬 JavaScript 中關聯陣列/雜湊表的行為。JavaScript 本身沒有內建的關聯陣列。我們能獲得的最接近類似行為的是 JavaScript 中的 Map 類。

讓我們逐一看看它們。

JavaScript 中的 Object 類

Object 類允許我們建立具有名稱-值對的物件。這類似於雜湊表，因為物件知道哪個屬性與哪個值相關聯。

語法

const obj = {
   name : "Abhishek",
   age : 22
}
var name = obj.name

這將建立一個名為obj的物件，其中包含兩個鍵值對：name 和 age。可以使用點運算子 (.) 訪問這些屬性，如下一行所示。點運算子前面是物件名稱，後面是屬性名稱。

然而，與其他程式語言提供的傳統關聯陣列相比，Object 類有許多限制。JavaScript不會跟蹤物件的大小，因此必須由程式設計師維護。對於少量屬性來說，這很好，但是隨著複雜性的增加，跟蹤事物變得很困難。

以下是一個示例，展示了物件用作關聯陣列。

示例 1

在這裡，我們將建立一個物件，然後使用鍵來檢索這些屬性。讓我們看看相應的程式碼。

<!DOCTYPE html> 
<html> 
<title>Online Javascript Editor</title> 
<head>
</head> 
<body> 
   <h3>associative array/hashing in JavaScript <br></h3> 
   <p> 
      <div id="result"> </div> 
   </p> 
   <script>
      const obj = { name: "Abhishek", age: 22 } 
      var text = ""; 
      
      text += "name : " + obj.name + "<br>";
      text += "age : " + obj.age; 
      
      document.getElementById("result").innerHTML = text; 
   </script> 
</body> 
</html>

在上面的程式碼中，物件的屬性訪問方式類似於關聯陣列。

我們建立的物件繼承了 Object 類的屬性。但是，Object 類沒有限制程式設計師嘗試重新定義或修改這些屬性。這與傳統關聯陣列的工作方式形成對比，在傳統關聯陣列中，鍵對於整個資料結構是唯一的。

例如，我們有toString()函式內置於所有物件原型中。即，如果我們嘗試

objectName.toString()

這將返回“[object Object]”作為輸出。但是，我們可以在物件定義中覆蓋它，使此函式返回其他內容。

以下是如何操作的示例。

示例 2

在這裡，我們將建立一個物件並覆蓋toString()方法，使其返回與內建響應不同的字串。

讓我們看看相應的程式碼。

<!DOCTYPE html>
<html>
<body>
   <h3>associative array/hashing in JavaScript <br></h3>
   <p>
      <div id="result"> </div>
   </p>
   <script>
      const obj = {
         name: "Abhishek",
         age: 22,
         toString: function() {
            return "Hello !";
         }
      }
      var text = "";
      text += "name : " + obj.name + "<br>";
      text += "age : " + obj.age + "<br>";
      text += "toString : " + obj.toString() + "<br>";
      document.getElementById("result").innerHTML = text;
   </script>
</body>
</html>

在上面的程式碼中，toString()函式返回“Hello !”作為輸出，而不是“[object Object]”，後者應該是常規響應。

現在讓我們看看 JavaScript 中的 Map 類，以模擬關聯陣列的行為。

JavaScript 中的 Map 類

與 Object 類類似，Map 類允許我們建立鍵值對。我們使用 Map 類的 set() 和 get() 方法來操作屬性。

語法

var mp = new Map();
mp.set("name", "Abhishek")
mp.get("name")

這將建立一個 Map 物件，並在其上設定一個名為“name”的屬性，將其值設定為“Abhishek”。可以使用鍵和get()函式檢索相同的屬性。

與 Object 類不同，Map 有一個 size 計數器，可用於檢索屬性。它也不允許覆蓋 Map 類繼承的屬性和方法。

讓我們看一個示例來了解此用例。

示例 3

我們將建立一個 map 物件並執行設定和獲取 map 中值的的基本操作。

<!DOCTYPE html>
<html>
<body>
   <h3>associative array/hashing in JavaScript <br></h3>
   <p>
      <div id="result"> </div>
   </p>
   <script>
      var coll = new Map();
      coll.set("name", "Abhishek");
      coll.set("age", 22);
      var text = "";
      text += "Number of Key-value pairs: " + coll.size + "<br>";
      text += "name : " + coll.get("name") + "<br>";
      text += "age : " + coll.get("age") + "<br>";
      document.getElementById("result").innerHTML = text;
   </script>
</body>
</html>

在上面的程式碼中，建立了一個新的 map，並在其中添加了兩個鍵值對，然後使用get(key_name)函式檢索它們。

結論

Map 是 JavaScript 中關聯陣列的一個不錯的替代方案。它們提供了幾乎所有傳統關聯陣列的功能。

更新於： 2022年11月10日

515 次瀏覽

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告

© . All rights reserved.