如需轉(zhuǎn)載, 請咨詢作者, 并且注明出處.
有任何問題, 可以關(guān)注我的微博: coderwhy, 或者添加我的微信: 372623326

數(shù)組-集合-字典是幾乎編程語言都會默認提供的數(shù)據(jù)類型.

在JavaScript中默認提供了數(shù)組, 但沒有提供集合和字典(ES6中增加了), 在上一章節(jié)中, 我們自己通過對象實現(xiàn)了一下集合.

本章, 我們還是基于對象實現(xiàn)一下字典.

一. 認識字典

字典的介紹

• 生活中的字典
  • 中文字典我們可以根據(jù)拼音去查找漢字, 并且找到漢字對應(yīng)的詞以及解釋.
  • 英文字典也是類似, 根據(jù)英文字母找到對應(yīng)的單詞, 再查看其翻譯和應(yīng)用場景.
  • 很多編程語言中都有字典的概念
• 字典有什么特點呢?
  • 字典的主要特點是一一對應(yīng)的關(guān)系.
  • 比如保存一個人的信息, 在合適的情況下取出這些信息.
  • 使用數(shù)組的方式: [18, "Coderwhy", 1.88]. 可以通過下標值取出信息.
  • 使用字典的方式: {"age" : 18, "name" : "Coderwhy", "height": 1.88}. 可以通過key取出value
• 字典的映射關(guān)系:
  • 有些編程語言中稱這種映射關(guān)系為字典, 因為它確實和生活中的字典比較相似. (比如Swift中Dictionary, Python中的dict)
  • 有些編程語言中稱這種映射關(guān)系為Map, 注意Map在這里不要翻譯成地圖, 而是翻譯成映射. (比如Java中就有HashMap&TreeMap等)
• 字典和數(shù)組:
  • 字典和數(shù)組對比的話, 字典可以非常方便的通過key來搜索對應(yīng)的value, key可以包含特殊含義, 也更容易被人們記住.
• 字典和對象:
  • 很多編程語言(比如Java)中對字典和對象區(qū)分比較明顯, 對象通常是一種在編譯期就確定下來的結(jié)構(gòu), 不可以動態(tài)的添加或者刪除屬性. 而字典通常會使用類似于哈希表的數(shù)據(jù)結(jié)構(gòu)去實現(xiàn)一種可以動態(tài)的添加數(shù)據(jù)的結(jié)構(gòu).
  • 但是在JavaScript中, 似乎對象本身就是一種字典. 所有在早期的JavaScript中, 沒有字典這種數(shù)據(jù)類型, 因為你完全可以使用對象去代替.
  • 但是這里我們還是按照其他語言經(jīng)常使用字典的方式去封裝一個字典類型, 方便我們按照其他語言的方式去使用字典. (雖然本質(zhì)上它內(nèi)部還是用了一個對象, 后面學(xué)習(xí)完哈希表我會簡單談一下對象和哈希表的關(guān)系)

創(chuàng)建字典類

• 我們向之前封裝集合一樣, 封裝一個字典的構(gòu)造函數(shù)

  // 創(chuàng)建字典的構(gòu)造函數(shù)
  function Dictionay() {
      // 字典屬性
      this.items = {}
      
      // 字典操作方法
  }
  

• 代碼解析:

  • 非常簡單, 創(chuàng)建一個Dictionary的構(gòu)造函數(shù), 用于我們字典的封裝.
  • 在字典中, 我們使用了一個items屬性, 該屬性是一個Object對象.
  • 也就是我們的字典是基于Object封裝的, 這個不難理解: 就像我們之前封裝Stack和Queue是基于數(shù)組的一樣.
  • 后面我們在添加字典相關(guān)的操作

二. 操作字典

我們之前封裝的數(shù)據(jù)結(jié)構(gòu), 都有封裝各種操作, 字典也是一樣

常見的操作

• 字典常見的操作
  • set(key,value)：向字典中添加新元素测砂。
  • remove(key)：通過使用鍵值來從字典中移除鍵值對應(yīng)的數(shù)據(jù)值。
  • has(key)：如果某個鍵值存在于這個字典中百匆，則返回true砌些，反之則返回false。
  • get(key)：通過鍵值查找特定的數(shù)值并返回加匈。
  • clear()：將這個字典中的所有元素全部刪除存璃。
  • size()：返回字典所包含元素的數(shù)量。與數(shù)組的length屬性類似雕拼。
  • keys()：將字典所包含的所有鍵名以數(shù)組形式返回纵东。
  • values()：將字典所包含的所有數(shù)值以數(shù)組形式返回。

操作的實現(xiàn)

• 我們將這些方法放在一起實現(xiàn)

  // 創(chuàng)建字典的構(gòu)造函數(shù)
  function Dictionay() {
      // 字典屬性
      this.items = {}
  
      // 字典操作方法
      // 在字典中添加鍵值對
      Dictionay.prototype.set = function (key, value) {
          this.items[key] = value
      }
  
      // 判斷字典中是否有某個key
      Dictionay.prototype.has = function (key) {
          return this.items.hasOwnProperty(key)
      }
  
      // 從字典中移除元素
      Dictionay.prototype.remove = function (key) {
          // 1.判斷字典中是否有這個key
          if (!this.has(key)) return false
  
          // 2.從字典中刪除key
          delete this.items[key]
          return true
      }
  
      // 根據(jù)key去獲取value
      Dictionay.prototype.get = function (key) {
          return this.has(key) ? this.items[key] : undefined
      }
  
      // 獲取所有的keys
      Dictionay.prototype.keys = function () {
          return Object.keys(this.items)
      }
  
      // 獲取所有的value
      Dictionay.prototype.values = function () {
          return Object.values(this.items)
      }
  
      // size方法
      Dictionay.prototype.size = function () {
          return this.keys().length
      }
  
      // clear方法
      Dictionay.prototype.clear = function () {
          this.items = {}
      }
  }
  

• 代碼解析:

  • 代碼比較簡單, 和之前實現(xiàn)的Set也比較類似, 不再深度解析.

字典的使用

• 我們來使用和測試一下字典類:

  // 創(chuàng)建字典對象
  var dict = new Dictionay()
  
  // 在字典中添加元素
  dict.set("age", 18)
  dict.set("name", "Coderwhy")
  dict.set("height", 1.88)
  dict.set("address", "廣州市")
  
  // 獲取字典的信息
  alert(dict.keys()) // age,name,height,address
  alert(dict.values()) // 18,Coderwhy,1.88,廣州市
  alert(dict.size()) // 4
  alert(dict.get("name")) // Coderwhy
  
  // 字典的刪除方法
  dict.remove("height")
  alert(dict.keys())// age,name,address
  
  // 清空字典
  dict.clear()