JS 學習筆記 : Map


Posted by mumu892101 on 2021-09-01

其實在解 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() 規則整理如下:

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

接著的範例是在 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() 語法:

  1. 建立空的 map

    let newMap = new Map()
    
  2. 建立新的 map

     let newMap = new Map([
       [1, 'one'],
       [2, 'two'],
     ])
    
  3. 在空的 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 來得好。

以上就是對 map() 的簡單整理。


#js #React #map







Related Posts

[JS] 認識變數:let、const、var

[JS] 認識變數:let、const、var

我的第一堂 - 網路基礎概論

我的第一堂 - 網路基礎概論

網路概論

網路概論


Comments