JavaScript數據結構之字典方法怎么用

今天小編給大家分享一下JavaScript數據結構之字典方法怎么用的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

一、什么是字典

上面說了，集合中是通過元素的值來決定元素的唯一性。然而在字典中，存儲的方式是鍵值對，也就是 key->value 的形式，字典只要求 key 必須唯一，value 則沒有限制。

這里 key 的作用是唯一標識，用來查詢對應的 value 值。也就是說可以通過唯一的 key 映射到對應的 value。所以字典也稱作映射，符號表或關聯數組。

在計算機世界中，字典經常用來標識對象的引用地址。比如在 JavaScript 當中的引用類型數據，變量名會指向數據的引用，這是一對映射關系。變量名不能重復，但是不同的變量名可以指向同一塊引用。

與 Set 類似，JavaScript ES6 中同樣包含了一個 Map 類，既我們所說的字典。

二、創建字典類

下面我們參照 ES6 Map 類的實現，自己動手實現一個 Dictionary 類。

class Dictionary {
  constructor() {
    this.table = {}
  }
}

與前面的其他數據結構實現類似，我們在一個對象 table 中存儲所有字典的元素。我們的保存形式為：table[key] = {key, value}。

在字典中，通常是用字符串作為鍵名（key），數據值可以是任意類型。但是 JavaScript 并不是強類型的語言，無法保證傳入的鍵名一定是字符串。所以我們需要將鍵名做一次字符串的轉化。

寫一個默認的轉換字符串函數：

function keyToString(item) {
  if(typeof item === null) {
    return 'NULL'
  }
  if(typeof item === undefined) {
    return 'UNDEFINED'
  }
  if(item instanceof String) {
    return `${item}`
  }
  return item.toString()
}

除此之外，我們還有必要將鍵值對的數據格式封裝成一個單獨的類。因為我們的 key 是不固定的，然而在后面的方法中要頻繁使用 key，此時你不知道鍵名具體是什么。所以要封裝一個 ValuePair 類，定義如下：

class ValuePair {
  constructor(key, value) {
    this.key = key;
    this.value = value;
  }
}

接下來在類中聲明一些必要的方法如下：

• set：向字典中添加新元素

• remove：以鍵名為參數，移除字典中對應的鍵值

• hasKey：檢測某個鍵名是否存在于字典中，存在則返回 true

• get：用鍵名查找對應的鍵值并返回

• clear：清空字典

• size：返回字典所包含鍵的數量

• isEmpty：在 size 等于零時返回 true

• keys：返回字典中所有鍵名組成的數組

• values：返回字典中所有鍵值組成的數組

• keyValues：返回所有鍵值對

• forEach：迭代所有的鍵值對

1.hasKey 方法

該方法的作用是檢測一個鍵是否在字典中。因為這個方法會在添加和刪除元素時使用，所以先實現：

hasKey(key) {
  return this.table[keyToString(key)] != null
}

首先對傳入的鍵進行字符串轉換，然后判斷鍵值是不是 null 或者 undefined。

2.set 方法

set 方法用來在字典中添加鍵值對：

set(key, value) {
  if(key != null && value != null) {
    let table_key = keyToString(key)
    this.table[table_key] = new ValuePair(key, value)
    return true
  }
  return false
}

3.remove 方法

remove 方法用來在字典中刪除一個鍵值對：

remove(key) {
  if(this.hasKey(key)) {
    delete this.table[keyToString(key)]
    return true
  }
  return false
}

4.get 方法

get 方法用來獲取鍵名對應的鍵值：

get(key) {
  if(this.hasKey(key)) {
    let table_key = keyToString(key)
    return this.table[table_key].value
  }
  return undefined
}

5.keys, values, keyValues 方法

這三個是比較簡單的輔助函數，一起介紹：

keyValues() {
  return Object.values(this.table)
}
keys() {
  return this.keyValues().map(valuePair=> valuePair.key)
}
values() {
  return this.keyValues().map(valuePair=> valuePair.value)
}

首先 keyValues 方法會以數組的形式返回字典的所有鍵值，返回結果是一個 ValuePair 實例的數組。然后在這個函數的基礎上，再分別獲取對應的 key 數組和 value 數組。

6.forEach 方法

forEach 方法與數組的 forEach 方法功能一致，就是迭代所有元素，我們看一下迭代字典的所有值怎么實現：

forEach(callFn) {
  let valuePairs = this.keyValues()
  for(let i = 0; i < valuePairs.length; i++) {
    let result = callFn(valuePairs[i].key, valuePairs[i].value)
    if(result === false) break;
  }
}

首先傳一個回調函數作為參數，然后遍歷字典的長度，并在循環里調用這個回調函數。這里我們的一個設計是，如果在回調函數內返回 false，則會中斷循環。

7.clear, size, isEmpty 方法

這個三個方法也比較基礎：

size() {
  return Object.keys(this.table).length;
}
isEmpty() {
  return this.size() === 0
}
clear() {
  this.table = {}
}

三、使用字典

前面我們寫了不少方法實現了一個字典類，現在來使用一下：

var dict = new Dictionary();
dict.set("name", "賽羅");
dict.set("color", "紅藍");
dict.set("skill", "頭標");

添加了三個鍵值對，我們看一下基本方法的返回結果：

console.log(dict.keys()); // ['name', 'color', 'skill']
console.log(dict.values()); // ['賽羅', '紅藍', '頭標']
console.log(dict.size()); // 3
console.log(dict.hasKey("color")); // true
console.log(dict.get("color")); // 紅藍
console.log(dict.hasKey("like")); // false
console.log(dict.get("like")); // undefined

看結果都沒問題，再來一波遍歷：

dict.forEach((key, value) => {
  console.log(key, value);
  if (key === "color") return false;
});
// 打印結果：
// name 賽羅
// color 紅藍

可見循環遍歷是沒有問題的，而且當函數執行返回 false 時，則會終止遍歷，因此第三個鍵值對沒有打印出來，結果達標。

最后再看一下刪除：

// 刪除鍵值對
console.log(dict.remove("color")); // true
console.log(dict.remove("like")); // false
console.log(dict.remove("skill")); // true
console.log(dict.keyValues());  // [ValuePair]
console.log(dict.hasKey("color")); false
console.log(dict.size()); 1
// 清空字典
dict.clear();
console.log(dict.keyValues()); // []
console.log(dict.isEmpty()); // true

以上就是“JavaScript數據結構之字典方法怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。