javascript中的set的常用方法和操作
前言
在 JavaScript 中,Set
是一種內(nèi)置的數(shù)據(jù)結(jié)構(gòu),用于存儲唯一值的集合。Set
對象允許你存儲任意類型的值,無論是基本類型還是對象類型。以下是 Set
的常用方法和操作:
1. 創(chuàng)建一個 Set:
你可以通過 new Set()
來創(chuàng)建一個新的 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 中是否存在某個值:
使用 .has()
方法來檢查一個值是否在 Set
中。
console.log(mySet.has(1)); // true console.log(mySet.has(10)); // false
4. 刪除 Set 中的元素:
使用 .delete()
方法可以刪除某個元素。
mySet.delete(5); // true console.log(mySet); // Set { 1, 'hello' }
5. 獲取 Set 的大小:
使用 .size
屬性可以獲得 Set
的元素數(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']為一個數(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. 去重數(shù)組中的重復(fù)值:
利用 Set
的唯一性,你可以快速去除數(shù)組中的重復(fù)項。
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:只存儲唯一值,不存儲鍵值對。每個元素都是一個值,且不能重復(fù)。
const mySet = new Set(); mySet.add(1); mySet.add(2); mySet.add(2); // 無法添加重復(fù)的值 console.log(mySet); // Set { 1, 2 }
Map:存儲的是鍵值對。每個元素都有一個鍵和一個對應(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 會確保集合中的每個元素都是唯一的。
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:只有值,沒有鍵。每個值在
Set
中都是唯一的元素。const set = new Set([1, 2, 3]); set.forEach(value => console.log(value)); // 遍歷的是值
Map:每個元素都有鍵和值,使用
.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
時,你只能遍歷值。const set = new Set([1, 2, 3]); for (let value of set) { console.log(value); // 1, 2, 3 }
Map:遍歷
Map
時可以遍歷鍵、值或者鍵值對。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
中是否有某個值。.clear()
:清空Set
。.size
:獲取Set
的大小。
Map:
.set(key, value)
:向Map
中添加鍵值對。.get(key)
:通過鍵獲取對應(yīng)的值。.delete(key)
:刪除某個鍵值對。.has(key)
:檢查Map
中是否有某個鍵。.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)文章希望大家以后多多支持腳本之家!
相關(guān)文章
在js文件中引入(調(diào)用)另一個js文件的三種方法
這篇文章主要介紹了在js文件中引入(調(diào)用)另一個js文件的三種方法,幫助大家更好的理解和學(xué)習(xí)JavaScript,感興趣的朋友可以了解下2020-09-09TypeScript使用axios庫進行高效的網(wǎng)頁數(shù)據(jù)抓取
在當(dāng)今的互聯(lián)網(wǎng)時代,數(shù)據(jù)已成為企業(yè)最寶貴的資產(chǎn)之一,無論是社交媒體分析、市場趨勢預(yù)測還是用戶行為研究,高效地獲取和處理網(wǎng)頁數(shù)據(jù)都是至關(guān)重要的,本文將通過訪問抖音平臺的案例,介紹如何在TypeScript中使用axios庫進行高效的網(wǎng)頁數(shù)據(jù)抓取2024-08-08JS動態(tài)修改表格cellPadding和cellSpacing的方法
這篇文章主要介紹了JS動態(tài)修改表格cellPadding和cellSpacing的方法,涉及javascript操作cellPadding和cellSpacing屬性的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03