JS 學習筆記 : Map

其實在解 Javascript 題目時，就遇過 map 與 set 了，並不是在 React 中才出現的新知，不過身為 React 新手，有幾個基本的功能似乎不能脫離 map 和 filter，於是決定加入之前解題時不熟悉的 set 用法，整理一個能夠隨時回來翻看的筆記。

map() 基本語法

在 React 中，以基礎的 Todolist 為範例，當我們需要改變或編輯 Todoitem 的狀態或內容 ( 狀態 : 例如從 "未完成" 改為 "已完成" )，那就需要使用到 map()。

Fooish 程式技術 - JavaScript Array map() 中，將 map()的使用方式做了簡單的概述:

陣列 (array) 的 map() 方法用來遍歷一個陣列中的每個元素，將元素分別傳入你指定的函數，最後將所有函數的返回值組成一個新的陣列。

const prices = [80, 90, 100];
const discount = prices.map( (price) => {
    return price * 0.8;
});

console.log(discount); // [64, 72, 80]
console.log(prices); //  [80, 90, 100]

以上是 map() 相當基礎的使用方法，根據 Array.prototype.map() - MDN 文件中還有更詳細的說明， map() 的使用還有其他選擇性的參數可以帶入，這個部分待之後再進行研究。

並根據以上的基礎範例，將 map() 規則整理如下:

map() 會將原陣列透過 function 進行處理，處理後的值會回傳一個新的陣列
並不會改變原來的陣列
兩個陣列的長度會相等

接著的範例是在 React 中簡單的 Todoitem 改變狀態的功能寫法，
我們將按鈕綁上 handleToggleIsDone 這個函式，傳入一個指定 id，
然後將整個 todos 陣列用 map() 的方法遍歷後，
若該項 todo 的 id 不等於傳入的指定 id，就表示該項不是我們要改變的對象，就直接回傳原本內容；
如果該項就是指定 id，我們就回傳改變後的內容。

const handleToggleIsDone = (id) => {
    const changeTodos = todos.map((todo) => {
      if (todo.id !== id) return todo;
      return {
        ...todo,
        isDone: !todo.isDone,
      };
    });
    setTodos(changeTodos);
};

另外也透過 PJCHENDer - [JS] JavaScript Map 的文章，了解 map() 的特性:
另外的基礎的 map() 語法:

建立空的 map
```
let newMap = new Map()
```

建立新的 map

 let newMap = new Map([
   [1, 'one'],
   [2, 'two'],
 ])

在空的 map 物件中新增
```
 let map = new Map();

 map.set("num1", "one");
 map.set("num2", "two");
 map.set("num3", "three");
```
文章中有整理 map() 的其他重點，節錄如下 :
1. Map 裡面的 key 是唯一的，如果 set 到重複的 key，則舊的 value 會被覆蓋。
2. Map 中的 keys 會根據被添加資料的時間而有順序性。
3. Map 的 key (鍵) 可以是任何值，包含物件、函式或原始型別（primitive type）。
4. 取得 Map 的大小非常容易，只需要取得 size 屬性即可。
5. 當需要經常增添刪減屬性時，使用 Map 的效能會比 Object 來得好。