JavaScript 關聯陣列和雜湊表
我們將學習如何使用物件和 Map() 實現 JavaScript 關聯陣列和雜湊表。
儘管 JavaScript 除了物件之外沒有關聯陣列/雜湊表。但是還有其他方法可以做到這一點。
在深入瞭解詳細實現之前，有必要了解關聯陣列、對映、字典和雜湊表之間的區別。雖然這些都是用來儲存鍵值對資料的，但還是有區別的。
- 關聯陣列是一種資料結構概念，包含（鍵、值）對中的資料。它也被稱為抽象資料型別，就像 Map 和字典一樣。這裡的索引是字串，而不是整數。有不同的方法來實現關聯陣列；雜湊表就是其中之一。
- 字典還儲存（鍵，值）對中的資料，與關聯陣列相同。但是，它的索引是整數。
- Map 也有鍵值對的資料。它會記住鍵的原始插入順序。
- 雜湊表就是使用雜湊方法在記憶體中排列資料。它是模擬關聯陣列的方法之一。
使用物件建立 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 物件。firstname、lastname、age、city 和 email 是鍵（索引）。這些值是 Mehvish、Ashiq、30、Multan、delfstack@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。
set、get 和 has 只是 Object 函式的模仿形式。
