記錄--10個超級實用的Set、Map使用技巧

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

Set是一種類似於數組的數據結構，但是它的值是唯一的，即Set中的每個值只會出現一次。Set對象的實例可以用於存儲任何類型的唯一值，從而使它們非常適用於去重。

Map是一種鍵值對集合，其中每個鍵都是唯一的，可以是任何類型，而值則可以是任何類型。Map對象的實例可以用於存儲複雜的對象，並且可以根據鍵進行快速的查找和訪問。

以下是Set和Map的一些常用方法：

Set:

• new Set(): 創建一個新的Set對象
• add(value): 向Set對象中添加一個新的值
• delete(value): 從Set對象中刪除一個值
• has(value): 檢查Set對象中是否存在指定的值
• size: 獲取Set對象中的值的數量
• clear(): 從Set對象中刪除所有值

Map:

• new Map(): 創建一個新的Map對象
• set(key, value): 向Map對象中添加一個鍵值對
• get(key): 根據鍵獲取Map對象中的值
• delete(key): 從Map對象中刪除一個鍵值對
• has(key): 檢查Map對象中是否存在指定的鍵
• size: 獲取Map對象中的鍵值對數量
• clear(): 從Map對象中刪除所有鍵值對

Set和Map是非常有用的數據結構，它們可以提高程式的性能和可讀性，並且可以簡化代碼的編寫。

Set

去重

使用 Set 可以輕鬆地進行數組去重操作，因為 Set 只能存儲唯一的值。

const arr = [1, 2, 3, 1, 2, 4, 5];
const uniqueArr = [...new Set(arr)];
console.log(uniqueArr); // [1, 2, 3, 4, 5]

數組轉換

可以使用 Set 將數組轉換為不包含重覆元素的 Set 對象，再使用 Array.from() 將其轉換回數組。

const arr = [1, 2, 3, 1, 2, 4, 5];
const set = new Set(arr);
const uniqueArr = Array.from(set);
console.log(uniqueArr); // [1, 2, 3, 4, 5]

優化數據查找

使用 Set 存儲數據時，查找操作的時間複雜度為 O(1)，比數組的 O(n) 要快得多，因此可以使用 Set 來優化數據查找的效率。

const dataSet = new Set([1, 2, 3, 4, 5]);

if (dataSet.has(3)) {
  console.log('數據已經存在');
} else {
  console.log('數據不存在');
}

並集、交集、差集

Set數據結構可以用於計算兩個集合的並集、交集和差集。以下是一些使用Set進行集合運算的示例代碼：

const setA = new Set([1, 2, 3]);
const setB = new Set([2, 3, 4]);

// 並集
const union = new Set([...setA, ...setB]);
console.log(union); // Set {1, 2, 3, 4}

// 交集
const intersection = new Set([...setA].filter(x => setB.has(x)));
console.log(intersection); // Set {2, 3}

// 差集
const difference = new Set([...setA].filter(x => !setB.has(x)));
console.log(difference); // Set {1}

模糊搜索

Set 還可以通過正則表達式實現模糊搜索。可以將匹配結果保存到 Set 中，然後使用 Array.from() 方法將 Set 轉換成數組。

const data = ['apple', 'banana', 'pear', 'orange'];

// 搜索以 "a" 開頭的水果
const result = Array.from(new Set(data.filter(item => /^a/i.test(item))));
console.log(result); // ["apple"]

使用 Set 替代數組實現隊列和棧

可以使用 Set 來模擬隊列和棧的數據結構。

// 使用 Set 實現隊列
const queue = new Set();
queue.add(1);
queue.add(2);
queue.add(3);
queue.delete(queue.values().next().value); // 刪除第一個元素
console.log(queue); // Set(2) { 2, 3 }

// 使用 Set 實現棧
const stack = new Set();
stack.add(1);
stack.add(2);
stack.add(3);
stack.delete([...stack][stack.size - 1]); // 刪除最後一個元素
console.log(stack); // Set(2) { 1, 2 }

Map

將 Map 轉換為對象

const map = new Map().set('key1', 'value1').set('key2', 'value2');
const obj = Object.fromEntries(map);

將 Map 轉換為數組

const map = new Map().set('key1', 'value1').set('key2', 'value2');
const array = Array.from(map);

記錄數據的順序

如果你需要記錄添加元素的順序，那麼可以使用Map來解決這個問題。當你需要按照添加順序迭代元素時，可以使用Map來保持元素的順序。

const map = new Map();
map.set('a', 1);
map.set('b', 2);
map.set('c', 3);
map.set('d', 4);

for (const [key, value] of map) {
  console.log(key, value);
}
// Output: a 1, b 2, c 3, d 4

統計數組中元素出現次數

可以使用 Map 統計數組中每個元素出現的次數。

const arr = [1, 2, 3, 1, 2, 4, 5];

const countMap = new Map();
arr.forEach(item => {
  countMap.set(item, (countMap.get(item) || 0) + 1);
});

console.log(countMap.get(1)); // 2
console.log(countMap.get(2)); // 2
console.log(countMap.get(3)); // 1

統計字元出現次數

使用Map數據結構可以方便地統計字元串中每個字元出現的次數。

const str = 'hello world';
const charCountMap = new Map();
for (let char of str) {
  charCountMap.set(char, (charCountMap.get(char) || 0) + 1);
}
console.log(charCountMap); // Map { 'h' => 1, 'e' => 1, 'l' => 3, 'o' => 2, ' ' => 1, 'w' => 1, 'r' => 1, 'd' => 1 }

緩存計算結果

在處理複雜的計算時，可能需要對中間結果進行緩存以提高性能。可以使用Map數據結構緩存計算結果，以避免重覆計算。

const cache = new Map();
function fibonacci(n) {
  if (n === 0 || n === 1) {
    return n;
  }
  if (cache.has(n)) {
    return cache.get(n);
  }
  const result = fibonacci(n - 1) + fibonacci(n - 2);
  cache.set(n, result);
  return result;
}
console.log(fibonacci(10)); // 55

使用 Map 進行數據的分組

const students = [
  { name: "Tom", grade: "A" },
  { name: "Jerry", grade: "B" },
  { name: "Kate", grade: "A" },
  { name: "Mike", grade: "C" },
];

const gradeMap = new Map();
students.forEach((student) => {
  const grade = student.grade;
  if (!gradeMap.has(grade)) {
    gradeMap.set(grade, [student]);
  } else {
    gradeMap.get(grade).push(student);
  }
});

console.log(gradeMap.get("A")); // [{ name: "Tom", grade: "A" }, { name: "Kate", grade: "A" }]

使用 Map 過濾符合條件的對象

在實際開發中，我們常常需要在一個對象數組中查找符合某些條件的對象。此時，我們可以結合使用 Map 和 filter 方法來實現。比如：

const users = [
  { name: 'Alice', age: 22 },
  { name: 'Bob', age: 18 },
  { name: 'Charlie', age: 25 }
];
const userMap = new Map(users.map(user => [user.name, user]));
const result = users.filter(user => userMap.has(user.name) && user.age > 20);
console.log(result); // [{ name: 'Alice', age: 22 }, { name: 'Charlie', age: 25 }]

首先，我們將對象數組轉換為 Map，以便快速查找。然後，我們使用 filter 方法來過濾符合條件的對象。

這裡我們列舉了一些使用Set和Map的實用技巧，它們可以大大簡化你的代碼，並使你更有效地處理數據。Set和Map是JavaScript中非常有用的數據結構，值得我們在編寫代碼時好好利用。

本文轉載於:

https://juejin.cn/post/7225425984312328252

如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。