如何在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]”，而“[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有一個大小計數器，可用於檢索屬性。它也不允許重寫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.