JavaScript 關聯陣列和雜湊表

Mehvish Ashiq 2023年1月30日 2022年5月5日
  1. 使用物件建立 JavaScript 關聯陣列
  2. 使用 Map() 函式建立 JavaScript 關聯陣列
  3. 使用 JavaScript 物件實現雜湊表
JavaScript 關聯陣列和雜湊表

我們將學習如何使用物件和 Map() 實現 JavaScript 關聯陣列和雜湊表。

儘管 JavaScript 除了物件之外沒有關聯陣列/雜湊表。但是還有其他方法可以做到這一點。

在深入瞭解詳細實現之前,有必要了解關聯陣列、對映、字典和雜湊表之間的區別。雖然這些都是用來儲存鍵值對資料的,但還是有區別的。

  1. 關聯陣列是一種資料結構概念,包含(鍵、值)對中的資料。它也被稱為抽象資料型別,就像 Map 和字典一樣。這裡的索引是字串,而不是整數。有不同的方法來實現關聯陣列;雜湊表就是其中之一。
  2. 字典還儲存(鍵,值)對中的資料,與關聯陣列相同。但是,它的索引是整數。
  3. Map 也有鍵值對的資料。它會記住鍵的原始插入順序。
  4. 雜湊表就是使用雜湊方法在記憶體中排列資料。它是模擬關聯陣列的方法之一。

使用物件建立 JavaScript 關聯陣列

//first way to create associative array
const person=[];
person["firstname"] = "Mehvish";
person["lastname"] = "Ashiq";
person["age"] = 30;
person["city"] = "Multan";
person["email"] = "delfstack@example.com";

//second way to create associative array
const person = {
  firstname: "Mehvish",
  lastname: "Ashiq",
  age: 30,
  city: "Multan",
  email: "delfstack@example.com"
};

我們在上面的程式碼中建立了一個用作關聯陣列的 JavaScript 物件。firstnamelastnameagecityemail 是鍵(索引)。這些值是 MehvishAshiq30Multandelfstack@example.com

假設我們要新增一個新的鍵值對作為 phone:12334567。為此,我們可以使用 Object.assign() 函式。它將第二個物件複製到第一個物件的末尾。

//Here the second object is {phone:12334567}
//Here the first object is person
Object.assign(person, {phone:12334567});

我們可以通過定位鍵(索引)來訪問每個鍵的值。請記住,索引是字串,而不是數字。所以,你不能在這裡像 person[0] 一樣訪問(如果你使用字典,你可以使用 person[0])。

//to print in the browser
document.write(person.firstname);//OUTPUT: Mehvish
document.write(person['firstname']);//OUTPUT: Mehvish
document.write(person[0]); //OUTPUT: undefined
//to print on console
console.log(person.firstname); //OUTPUT: Mehvish
console.log(person[0]);//OUTPUT: undefined

我們可以使用 for 迴圈列印完整的關聯陣列。

//print complete associative array using for look
for(var key in person){
  var value = person[key];
  document.write(value);
  document.write(" ");
}

輸出:

"[firstname: Mehvish]"
"[lastname: Ashiq]"
"[age: 30]"
"[city: Multan]"
"[email: delfstack@example.com]"
"[phone: 12334567]"

列印整個關聯陣列的更優化方法是 Object.entries() 方法,它採用物件資料型別的一個引數。你可以閱讀 this 瞭解更多 Object 的功能。

//print complete associative array using for look
let completeAssociateArray = Object.entries(person); 
console.log(completeAssociateArray);

輸出:

[["firstname", "Mehvish"], ["lastname", "Ashiq"], ["age", 30], ["city", "Multan"], ["email", "delfstack@example.com"], ["phone", 12334567]]

使用 Map() 函式建立 JavaScript 關聯陣列

//first way to create associative array using Map function
const person= new Map();
person.set("firstname", "Mehvish");
person.set("lastname", "Ashiq");
person.set("age", 30);
person.set("city", "Multan");
person.set("email", "delfstack@example.com");

//second way to create associative array using Map function
const person = new Map([
  ["firstname", "Mehvish"],
  ["lastname", "Ashiq"],
  ["age", 30],
  ["city", "Multan"],
  ["email", "delfstack@example.com"]
]);

使用 get(key) 方法,我們可以獲得一個特定的值。

person.get("city"); //output is "Multan"

顯示整個關聯陣列鍵值對。

for (const [key, value] of person.entries()) {
  console.log(key + ' = ' + value)
}

輸出:

"firstname = Mehvish"
"lastname = Ashiq"
"age = 30"
"city = Multan"
"email = delfstack@example.com"

使用 keys() 函式僅列印鍵。

for (const key of person.keys()) {
  console.log(key)
}

輸出:

"firstname"
"lastname"
"age"
"city"
"email"

僅使用 values() 函式獲取值。

for (const value of person.values()) {
  console.log(value)
}

輸出:

"Mehvish"
"Ashiq"
30
"Multan"
"delfstack@example.com"

我們可以使用 delete(key) 刪除一個元素;如果成功刪除,則返回 true。如果元素與給定鍵相關聯,則 has(key) 返回 true,而 clear() 刪除所有鍵值對。

如需詳細瞭解,你可以訪問頁面。如果你正在尋找雜湊表的實現,你可以使用 Map() 函式,但我們使用 JavaScript 物件來實現雜湊表。

使用 JavaScript 物件實現雜湊表

var ht = new HashTable({firstname: "Mehvish", lastname: "Ashiq", age: 30});

function HashTable(person){
    this.size = 0;
    this.item = {};
    for (var p in person) {
        if (person.hasOwnProperty(p)) {
            this.item[p] = person[p];
            this.size++;
        }
    }

    this.set = function(key, value){
        var previousItem = undefined;
        if (this.has(key)) {
            previousItem = this.item[key];
        }
        else {
            this.size++;
        }
        this.item[key] = value;
        return previousItem;
    }

    this.get = function(key) {
        return this.has(key) ? this.item[key] : undefined;
    }

    this.has = function(key){
        return this.item.hasOwnProperty(key);
    }
   
}

讓我們使用以下程式碼對其進行測試。

console.log(ht.size);
console.log(ht.get('firstname'));

它給出了以下結果。

3
"Mehvish"

hasOwnProperty 用於檢查鍵是否屬於 item 物件。換句話說,如果給定的屬性直接屬於 item 物件,它返回 true

setgethas 只是 Object 函式的模仿形式。

Mehvish Ashiq avatar Mehvish Ashiq avatar

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.

LinkedIn GitHub Facebook