JS Dictionary – (JS教學) – Dictionary 就是包含keys list 及 value list 的一個集合. 在集合中, 每一行的key也會Map在value上, 只需要加入Key就可取得值.
為何需要Dictionary?
有時候我們不需把一批資料作批次處理, 只需要把一個或一堆資料拿出來便可了, 這樣的話, 用List或Array會比較不便, 可能要加上Rxjs或for迴圈等, 再加上幾行if, then, else等, 這樣程序碼會變長, 而也許會變慢. 這時, 這適合用Dictionary了.
如何使用Dictionary
- Dictionary 的主要用途就是用一個key來尋找值, 值可以是一個Array, 一個List或一個object instance.
- 以一個key來獲取一個, 或一堆值把資料的提取變得容易.
- 注意Dictionary的Key要是唯一的, 不可重覆.
用Dictionary的例子
- Cache: 如果想要cache一個版面的初始值(session), 只需把page name 作key就可獲得. 這些都是不需要一批批地把資料處理而只需一個或一堆值的情況.
- Configuration: 有時候, Website或Program需要一些Configuration來初始化程式, 他們可能會用些Ini file等format格式的方法存儲, 這時讀出來的資料就可用Dictionary儲存, 就好像一個Application的static 資料表, 隨時可用.
- User Setting: 這個用法就好像Session, 一個User往往只有一行User Setting, 所以只要用Dictionary就足夠應用
- Language: 介面有時需要轉換語言, 它們往往也是Fixed的, 不會因User的Action而改變. 對應Keyword和語言, 用Dictionary把它們存起, 隨時能轉換.
- Search Keyword: 有時網站需要作資料查找, 有些keyword是常見的, 這樣就可把Result存下來, 更快地拿來用. P.S. 注要要恰當地更新.
- Template: 用Keyword來Cache Template, 隨時拿來用.
- Website Route, Link: 如題.
Dictionary功能一覽表
本篇會介紹Dictionary的5種基本應用方法 – Dictionary 初始化, Dictionary 加入值, Dictionary 更新值, Dictionary 刪除值, Dictionary foreach迴圈. Let’s start!
| 方法 | 例子: |
| 初始化1 | names = {} console.log(names); //{} |
| 初始化2 | names = {“Tim”:”Clerk”, “John”:”Manager”, “Mary”: “Boss”}; console.log(names); // { Tim: ‘Clerk’, John: ‘Manager’, Mary: ‘Boss’ } |
| 加入值 | names = {“Tim”:“Clerk”, “John”:“Manager”, “Mary”: “Boss”}; names[“Peter”] = “Cooker”; console.log(names); // { Tim: ‘Clerk’, John: ‘Manager’, Mary: ‘Boss’, ‘Peter’: ‘Cooker’ } |
| 獲得值 | names = {“Tim”:”Clerk”, “John”:”Manager”, “Mary”: “Boss”}; console.log(names[“John”]); // Manager |
| KEY是否存在 | names = {“Tim”:”Clerk”, “John”:”Manager”, “Mary”: “Boss”}; console.log(names.hasOwnProperty(“John”)); // true |
| 更新值 | names = {“Tim”:”Clerk”, “John”:”Manager”, “Mary”: “Boss”}; names[“Tim”] = “Cooker”; console.log(names[‘Tim’]); // Cooker |
| 刪除值 | names = {“Tim”:”Clerk”, “John”:”Manager”, “Mary”: “Boss”}; delete names[“Tim”]; console.log(names[‘Tim’]); // undefined |
| 清除所有值 | names = {“Tim”:“Clerk”, “John”:“Manager”, “Mary”: “Boss”}; names = {} // clear console.log(names); // {} |
| 拿Keys List | names = {“Tim”:”Clerk”, “John”:”Manager”, “Mary”: “Boss”}; console.log(Object.keys(names)); // [ ‘Tim’, ‘John’, ‘Mary’ ] |
| 拿Values List | names = {“Tim”:“Clerk”, “John”:“Manager”, “Mary”: “Boss”}; console.log(Object.values(names)); // [ ‘Clerk’, ‘Manager’, ‘Boss’ ] |
| foreach迴圈 | names = {“Tim”:“Clerk”, “John”:“Manager”, “Mary”: “Boss”}; for (const [key, value] of Object.entries(names)) { console.log(key, value);} // Tim Clerk // John Manager // Mary Boss |
| (等如) | |
| for迴圈 | names = {“Tim”:“Clerk”, “John”:“Manager”, “Mary”: “Boss”}; for(var i = 0; i < Object.keys(names).length; i++) { console.log (Object.keys(names)[i], Object.values(names)[i]); } //Result: //John – Manager //Mary – Boss |