JS中的Set和Map有什么區別?怎么用?

set用于存儲唯一值適合去重和存在性檢查map用于存儲鍵值對支持任意類型鍵適合復雜映射和元數據存儲。set通過add/has/delete操作自動去重內部使用類似===的相等判斷但對nan友好;map通過set/get操作允許對象、函數等作為鍵且遍歷順序保持插入順序。兩者均提供更高效的查找和更清晰的數據結構選擇優于傳統對象或數組的部分場景應用。

JS中的Set和Map有什么區別?怎么用?

JavaScript中,Set和Map是兩個常用的數據結構,它們都是es6引入的特性,適合處理需要高效查找、去重或鍵值映射的場景。雖然它們看起來有點像對象和數組,但各自有明確的使用場景和優勢。

Set:用來存儲唯一值

Set是一個集合,里面不能有重復的值。它特別適合做數據去重、判斷是否存在某個元素等操作。

基本用法:

const s = new Set(); s.add(1); s.add(2); s.add(2); // 重復添加無效 console.log(s); // 輸出: Set { 1, 2 }

常見用途和技巧:

  • 去重數組中的元素:

    const arr = [1, 2, 2, 3]; const uniqueArr = [...new Set(arr)]; // [1, 2, 3]
  • 判斷某個值是否存在:

    s.has(1); // true
  • 刪除元素:

    s.delete(1);

注意:Set內部判斷是否相等使用的機制類似于===,但對NaN比較友好(即NaN和NaN視為相同)。


Map:用來存儲鍵值對,支持任意類型的鍵

Map類似于對象,但它最大的特點是允許任何類型的鍵(比如對象、函數甚至NaN),不像普通對象只能用字符串symbol作為鍵。

基本用法:

const m = new Map(); m.set('name', 'Tom'); m.set(1, 'number key'); m.set({ id: 1 }, 'object key');  console.log(m.get('name')); // Tom console.log(m.get(1));      // number key

常見用途和技巧:

  • 使用對象作為鍵來存儲元數據,避免污染對象本身。
  • 比普通對象更安全地管理鍵值關系,尤其是鍵不確定的時候。
  • 遍歷順序保持插入順序,這點比普通對象更可靠。

注意點:

  • map.get() 是獲取值的方式,不是用.或[]。

  • 如果你用對象做鍵,每次傳入一個新對象都會被當作不同的鍵:

    const key1 = {}; const key2 = {}; m.set(key1, 'a'); m.set(key2, 'b'); console.log(m.size); // 2

Set 和 Map 的區別總結

特性 Set Map
存儲內容 單一值集合 鍵值對集合
是否去重 ?自動去重 ?不自動去重
鍵類型 不適用 支持任意類型
獲取方式 遍歷或檢查存在 通過.get(key)獲取值
常見用途 去重、集合運算 緩存、元數據存儲、復雜映射

基本上就這些了。掌握好Set和Map之后,你會發現有些以前需要用對象或數組折騰的邏輯,現在用它們可以更清晰、高效地實現。

? 版權聲明
THE END
喜歡就支持一下吧
點贊7 分享