一、Set（集合）

1.1 Set 的基本特性

• 唯一性：Set 中的每個(gè)值只能出現(xiàn)一次，重復(fù)的值會(huì)被自動(dòng)忽略。

• 無序性：Set 中的值沒有順序。

• 可迭代：Set 支持 for...of 循環(huán)和 forEach 方法。

• 值的類型：Set 可以存儲(chǔ)任意類型的值（包括基本類型和引用類型）。

1.2 創(chuàng)建 Set

使用 new Set() 創(chuàng)建一個(gè)集合。

const set = new Set(); // 創(chuàng)建一個(gè)空集合

1.3 Set 的常用方法

以下是 Set 的核心方法：

（1）set.add(value)

向集合中添加一個(gè)值。如果值已存在，則不會(huì)重復(fù)添加。

set.add(1); 
set.add(2); 
set.add(2); // 重復(fù)值會(huì)被忽略 
console.log(set); // 輸出 Set { 1, 2 }

（2）set.has(value)

判斷集合中是否包含某個(gè)值。如果鍵是對(duì)象或者數(shù)組，比較的是引用地址，內(nèi)容一樣也不行。

console.log(set.has(1)); // 輸出 true
console.log(set.has(3)); // 輸出 false

（3）set.delete(value)

從集合中刪除某個(gè)值。如果刪除成功，返回 true；否則返回 false。

set.delete(1); // 刪除值為 1 的元素
console.log(set); // 輸出 Set { 2 }

（4）set.clear()

清空集合中的所有值。

set.clear();
console.log(set); // 輸出 Set {}

（5）set.size

獲取集合中值的數(shù)量。

console.log(set.size); // 輸出集合的大小

1.4 Set 的遍歷方法

Set 提供了多種遍歷方式：

（1）for...of循環(huán)

const set = new Set([1, 2, 3]);
for (const value of set) {
  console.log(value); // 依次輸出 1, 2, 3
}

（2）set.forEach()

set.forEach((value) => {
  console.log(value); // 依次輸出 1, 2, 3
});

（3）set.values()

返回一個(gè)包含集合中所有值的迭代器。

const valuesIterator = set.values();
for (const value of valuesIterator) {
  console.log(value); // 依次輸出 1, 2, 3
}

（4）set.keys()

set.keys() 是 set.values() 的別名，行為完全相同。

const keysIterator = set.keys();
for (const key of keysIterator) {
  console.log(key); // 依次輸出 1, 2, 3
}

（5）set.entries()

返回一個(gè)包含 [value, value] 對(duì)的迭代器（為了與 Map 的 API 保持一致）。

const entriesIterator = set.entries();
for (const [key, value] of entriesIterator) {
  console.log(key, value); // 依次輸出 1 1, 2 2, 3 3
}

1.5 Set 的應(yīng)用場(chǎng)景

（1）數(shù)組去重

const array = [1, 2, 2, 3, 4, 4];
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // 輸出 [1, 2, 3, 4]

（2）集合運(yùn)算

• 并集：

  const set1 = new Set([1, 2, 3]);
  const set2 = new Set([3, 4, 5]);
  const union = new Set([...set1, ...set2]);
  console.log(union); // 輸出 Set { 1, 2, 3, 4, 5 }

• 交集：

  const intersection = new Set([...set1].filter(x => set2.has(x)));
  console.log(intersection); // 輸出 Set { 3 }

• 差集：

  const difference = new Set([...set1].filter(x => !set2.has(x)));
  console.log(difference); // 輸出 Set { 1, 2 }

（3）存儲(chǔ)唯一值

const uniqueValues = new Set();
uniqueValues.add(1);
uniqueValues.add(2);
uniqueValues.add(1); // 重復(fù)值會(huì)被忽略
console.log(uniqueValues); // 輸出 Set { 1, 2 }

二、Map（映射）

2.1 Map 的基本特性

• 鍵值對(duì)存儲(chǔ)：Map 存儲(chǔ)的是鍵值對(duì)（key-value pairs）。

• 鍵的類型：Map 的鍵可以是任意類型（包括對(duì)象、函數(shù)等），而對(duì)象的鍵只能是字符串或 Symbol。

• 順序性：Map 會(huì)記住鍵值對(duì)的插入順序。

• 性能：Map 在頻繁增刪鍵值對(duì)的場(chǎng)景下性能更好。

2.2 創(chuàng)建 Map

使用 new Map() 創(chuàng)建一個(gè)映射。

const map = new Map(); // 創(chuàng)建一個(gè)空映射

2.3 Map 的常用方法

以下是 Map 的核心方法：

（1）map.set(key, value)

向 Map 中添加或更新鍵值對(duì)。

map.set('name', 'Alice');
map.set(1, 'Number One');
map.set({ id: 1 }, 'Object Key');

（2）map.get(key)

根據(jù)鍵獲取對(duì)應(yīng)的值。如果鍵不存在，返回 undefined。

console.log(map.get('name')); // 輸出 "Alice"
console.log(map.get('age'));  // 輸出 undefined

（3）map.has(key)

判斷 Map 中是否存在指定的鍵。如果鍵是對(duì)象或者數(shù)組，比較的是引用地址，內(nèi)容一樣也不行。

console.log(map.has('name')); // 輸出 true
console.log(map.has('age'));  // 輸出 false

（4）map.delete(key)

刪除指定鍵的鍵值對(duì)。如果刪除成功，返回 true；否則返回 false。

map.delete('name'); // 刪除鍵為 'name' 的鍵值對(duì)

（5）map.clear()

清空 Map 中的所有鍵值對(duì)。

map.clear();

（6）map.size

獲取 Map 中鍵值對(duì)的數(shù)量。

console.log(map.size); // 輸出當(dāng)前鍵值對(duì)的數(shù)量

2.4 Map 的遍歷方法

Map 提供了多種遍歷方式：

（1）map.keys()

返回一個(gè)包含所有鍵的迭代器。

（2）map.values()

返回一個(gè)包含所有值的迭代器。

（3）map.entries()

返回一個(gè)包含所有鍵值對(duì)的迭代器（默認(rèn)迭代器）。

（4）map.forEach()

遍歷 Map 中的每個(gè)鍵值對(duì)。

for (const key of map.keys()) {
 console.log(key); 
}
for (const value of map.values()) {
 console.log(value); 
}
for (const [key, value] of map.entries()) {
 console.log(key, value); 
}
map.forEach((value, key) => {
  console.log(key, value);
});

2.5 Map 的應(yīng)用場(chǎng)景

（1）存儲(chǔ)鍵值對(duì)

const userMap = new Map();
userMap.set(1, { name: 'Alice' });
userMap.set(2, { name: 'Bob' });
console.log(userMap.get(1)); // 輸出 { name: 'Alice' }

（2）復(fù)雜鍵

const objKey = { id: 1 };
const map = new Map();
map.set(objKey, 'Value for object key');
console.log(map.get(objKey)); // 輸出 "Value for object key"

（3）緩存數(shù)據(jù)

const cache = new Map();
function fetchData(key) {
  if (cache.has(key)) {
    return cache.get(key);
  }
  const data = `Data for ${key}`;
  cache.set(key, data);
  return data;
}
console.log(fetchData('user1')); // 輸出 "Data for user1"
console.log(fetchData('user1')); // 從緩存中讀取

（4）修改key值或者修改value值

1，修改key值：

如果需要修改鍵，可以按照以下步驟操作：

1. 刪除舊的鍵值對(duì)：使用 map.delete(key)。

2. 添加新的鍵值對(duì)：使用 map.set(newKey, value)。

2，修改value值：

使用 map.set(key, newValue) 更新鍵值對(duì)。

三、Set 和 Map 的區(qū)別

到此這篇關(guān)于JavaScript 中 Set 和 Map 的示例詳解的文章就介紹到這了,更多相關(guān)js set和map內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論