前言

在 JavaScript 中，Set 是一種內(nèi)置的數(shù)據(jù)結(jié)構(gòu)，用于存儲唯一值的集合。Set 對象允許你存儲任意類型的值，無論是基本類型還是對象類型。以下是 Set 的常用方法和操作：

1. 創(chuàng)建一個(gè) Set:

你可以通過 new Set() 來創(chuàng)建一個(gè)新的 Set 對象。

const mySet = new Set();

2. 向 Set 中添加元素:

使用 .add() 方法可以向 Set 中添加元素。

mySet.add(1);       // Set { 1 }
mySet.add(5);       // Set { 1, 5 }
mySet.add(1);       // Set { 1, 5 } (1 已經(jīng)存在，不會重復(fù)添加)
mySet.add('hello'); // Set { 1, 5, 'hello' }

3. 檢查 Set 中是否存在某個(gè)值:

使用 .has() 方法來檢查一個(gè)值是否在 Set 中。

console.log(mySet.has(1));    // true
console.log(mySet.has(10));   // false

4. 刪除 Set 中的元素:

使用 .delete() 方法可以刪除某個(gè)元素。

mySet.delete(5);    // true
console.log(mySet); // Set { 1, 'hello' }

5. 獲取 Set 的大小:

使用 .size 屬性可以獲得 Set 的元素?cái)?shù)量。

console.log(mySet.size); // 2

6. 清空 Set:

使用 .clear() 方法可以清空 Set 中的所有元素。

mySet.clear();
console.log(mySet.size); // 0

7. 遍歷 Set:

你可以使用 forEach() 或 for...of 循環(huán)來遍歷 Set。

PS：[1, 2, 3, 'a', 'b']為一個(gè)數(shù)組。

const anotherSet = new Set([1, 2, 3, 'a', 'b']);

// 使用 forEach 遍歷
anotherSet.forEach(value => {
  console.log(value);
});

// 使用 for...of 遍歷
for (let value of anotherSet) {
  console.log(value);
}

8. Set 和數(shù)組的轉(zhuǎn)換:

你可以很容易地將 Set 轉(zhuǎn)換為數(shù)組，或者將數(shù)組轉(zhuǎn)換為 Set。

// Set 轉(zhuǎn)換為數(shù)組
const setArray = [...anotherSet]; // [1, 2, 3, 'a', 'b']

// 數(shù)組轉(zhuǎn)換為 Set
const array = [1, 2, 2, 3, 4];
const arraySet = new Set(array); // Set { 1, 2, 3, 4 }

9. 去重?cái)?shù)組中的重復(fù)值:

利用 Set 的唯一性，你可以快速去除數(shù)組中的重復(fù)項(xiàng)。

const numbers = [1, 2, 3, 3, 4, 5, 5];
const uniqueNumbers = [...new Set(numbers)]; // [1, 2, 3, 4, 5] 首先將數(shù)據(jù)轉(zhuǎn)換為set，再將set轉(zhuǎn)換為數(shù)組。

set和map的區(qū)別：

1. 存儲類型：

• Set：只存儲唯一值，不存儲鍵值對。每個(gè)元素都是一個(gè)值，且不能重復(fù)。

  const mySet = new Set(); 
  mySet.add(1); 
  mySet.add(2); 
  mySet.add(2); // 無法添加重復(fù)的值 
  console.log(mySet); // Set { 1, 2 }

• Map：存儲的是鍵值對。每個(gè)元素都有一個(gè)鍵和一個(gè)對應(yīng)的值，鍵可以是任何類型（包括對象）。

  const myMap = new Map(); 
  myMap.set('key1', 'value1'); 
  myMap.set('key2', 'value2'); 
  console.log(myMap); // Map { 'key1' => 'value1', 'key2' => 'value2' }

2. 元素的唯一性：

• Set：不能存儲重復(fù)的值。Set 會確保集合中的每個(gè)元素都是唯一的。

  const set = new Set([1, 1, 2, 3]); 
  console.log(set); // Set { 1, 2, 3 } (1 不會重復(fù))

• Map：鍵必須是唯一的，但不同的鍵可以對應(yīng)相同的值。Map 中允許重復(fù)的值，只要鍵不同。

  const map = new Map(); 
  map.set('a', 1); 
  map.set('b', 1); // 相同的值，鍵不同 
  console.log(map); // Map { 'a' => 1, 'b' => 1 }

3. 鍵和值的使用：

• Set：只有值，沒有鍵。每個(gè)值在 Set 中都是唯一的元素。

  const set = new Set([1, 2, 3]); 
  set.forEach(value => console.log(value)); // 遍歷的是值

• Map：每個(gè)元素都有鍵和值，使用 .set(key, value) 來添加鍵值對，用 .get(key) 來獲取對應(yīng)的值。

  const map = new Map(); 
  map.set('name', 'Alice'); 
  map.set('age', 30); 
  console.log(map.get('name')); // 'Alice'

4. 迭代：

• Set：遍歷 Set 時(shí)，你只能遍歷值。

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

• Map：遍歷 Map 時(shí)可以遍歷鍵、值或者鍵值對。

  const map = new Map([['key1', 'value1'], ['key2', 'value2']]); // 遍歷鍵 
  for (let key of map.keys()) { 
    console.log(key); // key1, key2 
  } // 遍歷值 
  for (let value of map.values()) { 
    console.log(value); // value1, value2 
  } // 遍歷鍵值對 
  for (let [key, value] of map.entries()) { 
    console.log(key, value); // key1 value1, key2 value2 
  }

5. 方法：

• Set：

  • .add(value)：向 Set 中添加值。
  • .delete(value)：刪除 Set 中的值。
  • .has(value)：檢查 Set 中是否有某個(gè)值。
  • .clear()：清空 Set。
  • .size：獲取 Set 的大小。

• Map：

  • .set(key, value)：向 Map 中添加鍵值對。
  • .get(key)：通過鍵獲取對應(yīng)的值。
  • .delete(key)：刪除某個(gè)鍵值對。
  • .has(key)：檢查 Map 中是否有某個(gè)鍵。
  • .clear()：清空 Map。
  • .size：獲取 Map 的大小。

6. 使用場景：

• Set：適用于處理唯一值集合的場景，如數(shù)組去重、存儲一組無重復(fù)的值。

  const uniqueValues = new Set([1, 2, 2, 3, 4]); // Set { 1, 2, 3, 4 }

• Map：適用于需要鍵值對存儲的場景，如緩存、字典、關(guān)聯(lián)數(shù)組等。

  const dictionary = new Map(); 
  dictionary.set('apple', 'A fruit'); 
  dictionary.set('car', 'A vehicle');

總結(jié)：

• Set 用于存儲唯一的值集合，沒有鍵。
• Map 用于存儲鍵值對，鍵和值都可以是任意類型。

到此這篇關(guān)于javascript中的set的常用方法和操作的文章就介紹到這了,更多相關(guān)js中set用法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論