 |
VOOZH | about |
|
VOOZH | about |
數組-集合-字典是幾乎程式語言都會默認提供的數據類型.
在JavaScript中默認提供了數組, 但沒有提供集合和字典(ES6中增加了),
本章, 我們基於對象實現一下字典.
一. 認識字典
字典的介紹
· 生活中的字典
i. 中文字典我們可以根據拼音去查找漢字, 並且找到漢字對應的詞以及解釋.
ii. 英文字典也是類似, 根據英文字母找到對應的單詞, 再查看其翻譯和應用場景.
iii. 很多程式語言中都有字典的概念
· 字典有什麼特點呢?
i. 字典的主要特點是一一對應的關係.
ii. 比如保存一個人的信息, 在合適的情況下取出這些信息.
iii. 使用數組的方式: [18, 「Coderwhy」, 1.88]. 可以通過下標值取出信息.
iv. 使用字典的方式: {「age」 : 18, 「name」 : 「Coderwhy」, 「height」: 1.88}. 可以通過key取出value
· 字典的映射關係:
i. 有些程式語言中成這種映射關係為字典, 因為它確實和生活中的字典比較相似. (比如Swift中Dictionary, Python中的dict)
ii. 有些程式語言中成這種映射關係為Map, 注意Map在這裡不要翻譯成地圖, 而是翻譯成映射. (比如Java中就有HashMap&TreeMap等)
· 字典和數組:
i. 字典和數組對比的話, 字典可以非常方便的通過key來搜索對應的value, key可以包含特殊含義, 也更容易被人們記住.
· 字典和對象:
i. 很多程式語言(比如Java)中對字典和對象區分比較明顯, 對象通常是一種在編譯期就確定下來的結構, 不可以動態的添加或者刪除屬性. 而字典通常會使用類似於哈希表的數據結構去實現一種可以動態的添加數據的結構.
ii. 但是在JavaScript中, 似乎對象本身就是一種字典. 所有在早期的JavaScript中, 沒有字典這種數據類型, 因為你完全可以使用對象去代替.
iii. 但是這裡我們還是按照其他語言經常使用字典的方式去封裝一個字典類型, 方便我們按照其他語言的方式去使用字典. (雖然本質上它內部還是用了一個對象, 後面學習完哈希表我會簡單談一下對象和哈希表的關係)
創建字典類
·
我們向之前封裝集合一樣, 封裝一個字典的構造函數
·
·
i. // 創建字典的構造函數
ii. function Dictionay {
iii. // 字典屬性
iv. this.items = {}
v.
vi. // 字典操作方法
vii. }
·
代碼解析:
·
· 非常簡單, 創建一個Dictionary的構造函數, 用於我們字典的封裝.
· 在字典中, 我們使用了一個items屬性, 該屬性是一個Object對象.
· 也就是我們的字典是基於Object封裝的, 這個不難理解: 就像我們之前封裝Stack和Queue是基於數組的一樣.
· 後面我們在添加字典相關的操作
二. 操作字典
我們之前封裝的數據結構, 都有封裝各種操作, 字典也是一樣
常見的操作
· 字典常見的操作
· set(key,value)：向字典中添加新元素。
· remove(key)：通過使用鍵值來從字典中移除鍵值對應的數據值。
· has(key)：如果某個鍵值存在於這個字典中，則返回true，反之則返回false。
· get(key)：通過鍵值查找特定的數值並返回。
· clear：將這個字典中的所有元素全部刪除。
· size：返回字典所包含元素的數量。與數組的length屬性類似。
· keys：將字典所包含的所有鍵名以數組形式返回。
· values：將字典所包含的所有數值以數組形式返回。
操作的實現
·
我們將這些方法放在一起實現
·
i. // 創建字典的構造函數
ii. function Dictionay {
iii. // 字典屬性
iv. this.items = {}
v.
vi. // 字典操作方法
vii. // 在字典中添加鍵值對
viii. Dictionay.prototype.set = function (key, value) {
ix. this.items[key] = value
x. }
xi.
xii. // 判斷字典中是否有某個key
xiii. Dictionay.prototype.has = function (key) {
xiv. return this.items.hasOwnProperty(key)
xv. }
xvi.
xvii. // 從字典中移除元素
xviii. Dictionay.prototype.remove = function (key) {
xix. // 1.判斷字典中是否有這個key
xx. if (!this.has(key)) return false
xxi.
xxii. // 2.從字典中刪除key
xxiii. delete this.items[key]
xxiv. return true
xxv. }
xxvi.
xxvii. // 根據key去獲取value
xxviii. Dictionay.prototype.get = function (key) {
xxix. return this.has(key) ? this.items[key] : undefined
xxx. }
xxxi.
xxxii. // 獲取所有的keys
xxxiii. Dictionay.prototype.keys = function {
xxxiv. return Object.keys(this.items)
xxxv. }
xxxvi.
xxxvii. // 獲取所有的value
xxxviii. Dictionay.prototype.values = function {
xxxix. return Object.values(this.items)
xl. }
xli.
xlii. // size方法
xliii. Dictionay.prototype.size = function {
xliv. return this.keys.length
xlv. }
xlvi.
xlvii. // clear方法
xlviii. Dictionay.prototype.clear = function {
xlix. this.items = {}
l. }
li. }
·
代碼解析:
·
· 代碼比較簡單, 和之前實現的Set也比較類似, 不再深度解析.
字典的使用
·
我們來使用和測試一下字典類:
·
i. // 創建字典對象
ii. var dict = new Dictionay
iii.
iv. // 在字典中添加元素
v. dict.set("age", 18)
vi. dict.set("name", "Coderwhy")
vii. dict.set("height", 1.88)
viii. dict.set("address", "廣州市")
ix.
x. // 獲取字典的信息
xi. alert(dict.keys) // age,name,height,address
xii. alert(dict.values) // 18,Coderwhy,1.88,廣州市
xiii. alert(dict.size) // 4
xiv. alert(dict.get("name")) // Coderwhy
xv.
xvi. // 字典的刪除方法
xvii. dict.remove("height")
xviii. alert(dict.keys)// age,name,address
xix.
xx. // 清空字典
xxi. dict.clear
