iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 14
1
Software Development

使用JavaScript學習資料結構與演算法系列 第 14

Day14-來了解Map並實作它吧!

在JavaScript ES6 的規範中,新增了 Map 這種資料結構,每組資料都有對應的 key 值(索引值)與 value 值(資料值),而且索引值可以是各種資料型態的值(字串 / 數字 / 物件...等)。

接著我們來建立一個 Map 並搭配一些函式來操作它。
建立一個 Map:

let map1 = new Map();

使用 set() 函式:

新增資料

map1.set('harry', 1); // 'harry'為索引值(key),1為資料值(value)
map1.set('tom', 2);
map1.set('jerry', 3);

console.log(map1); // Map { 'harry' => 1, 'tom' => 2, 'jerry' => 3 }

使用 has() 函式:

判斷某資料是否存在於 Map 中

console.log(map1.has('harry')); // true
console.log(map1.has('kitty')); // false

使用 get() 函式:

取得索引值相對應的資料值

console.log(map1.get('tom')); // 2

使用 delete() 函式:

刪除某個索引值(key),成功回傳 true,失敗回傳 false

console.log(map1.delete('tom')); // true
console.log(map1.delete('john')); // false
console.log(map1); // Map { 'harry' => 1, 'jerry' => 3 }

使用 size 函式:

記得是size,size後面沒有括號

console.log(map1.size); // 2

使用clear() 函式:

清除 Map 內所有資料

map1.clear();
console.log(map1); // Map {}

將 Map 進行遍歷:

使用 keys() 函式:

取出所有索引值(key)

map1.clear();

map1.set('alex', 4);
map1.set('jimmy', 5);
map1.set('jason', 6);

for (let key of map1.keys()) {
  console.log(key);
}

// alex
// jimmy
// jason

使用 values() 函式:

取出所有資料值(value)

for (let value of map1.values()) {
  console.log(value);
}

// 4
// 5
// 6

使用 entries() 函式:

取出索引值(key)和資料值(value)

for (let [key, value] of map1.entries()) {
  console.log(key, value);
}

// alex 4
// jimmy 5
// jason 6

此函式輸出結果和以下函式相同:

for...of

for (let [key, value] of map1) {
  console.log(key, value);
}

// alex 4
// jimmy 5
// jason 6

也等同以下結果:

forEach

map1.forEach(function (value, key, map) {
  console.log(key, value);
});

// alex 4
// jimmy 5
// jason 6

這次實作的程式碼在以下連結:
https://github.com/a90100/javascript-data-structure/blob/master/day14-map.js


這次的介紹到這邊結束,目前也將自己比較有接觸的資料結構介紹完了,明天將會作個總結,並分享一些資料結構和演算法的學習資源。


上一篇
Day13-來了解 Set 並實作它吧!
下一篇
Day15-資料結構總結與一些免費學習資源
系列文
使用JavaScript學習資料結構與演算法30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言