javascript中的set的常用方法和操作
前言
在 JavaScript 中,Set 是一種內(nèi)置的數(shù)據(jù)結(jié)構(gòu),用于存儲(chǔ)唯一值的集合。Set 對(duì)象允許你存儲(chǔ)任意類型的值,無(wú)論是基本類型還是對(duì)象類型。以下是 Set 的常用方法和操作:
1. 創(chuàng)建一個(gè) Set:
你可以通過 new Set() 來創(chuàng)建一個(gè)新的 Set 對(duì)象。
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)存在,不會(huì)重復(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. 存儲(chǔ)類型:
Set:只存儲(chǔ)唯一值,不存儲(chǔ)鍵值對(duì)。每個(gè)元素都是一個(gè)值,且不能重復(fù)。
const mySet = new Set(); mySet.add(1); mySet.add(2); mySet.add(2); // 無(wú)法添加重復(fù)的值 console.log(mySet); // Set { 1, 2 }Map:存儲(chǔ)的是鍵值對(duì)。每個(gè)元素都有一個(gè)鍵和一個(gè)對(duì)應(yīng)的值,鍵可以是任何類型(包括對(duì)象)。
const myMap = new Map(); myMap.set('key1', 'value1'); myMap.set('key2', 'value2'); console.log(myMap); // Map { 'key1' => 'value1', 'key2' => 'value2' }
2. 元素的唯一性:
Set:不能存儲(chǔ)重復(fù)的值。Set 會(huì)確保集合中的每個(gè)元素都是唯一的。
const set = new Set([1, 1, 2, 3]); console.log(set); // Set { 1, 2, 3 } (1 不會(huì)重復(fù))Map:鍵必須是唯一的,但不同的鍵可以對(duì)應(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)來添加鍵值對(duì),用.get(key)來獲取對(duì)應(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í)可以遍歷鍵、值或者鍵值對(duì)。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 } // 遍歷鍵值對(duì) 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中添加鍵值對(duì)。.get(key):通過鍵獲取對(duì)應(yīng)的值。.delete(key):刪除某個(gè)鍵值對(duì)。.has(key):檢查Map中是否有某個(gè)鍵。.clear():清空Map。.size:獲取Map的大小。
6. 使用場(chǎng)景:
Set:適用于處理唯一值集合的場(chǎng)景,如數(shù)組去重、存儲(chǔ)一組無(wú)重復(fù)的值。
const uniqueValues = new Set([1, 2, 2, 3, 4]); // Set { 1, 2, 3, 4 }Map:適用于需要鍵值對(duì)存儲(chǔ)的場(chǎng)景,如緩存、字典、關(guān)聯(lián)數(shù)組等。
const dictionary = new Map(); dictionary.set('apple', 'A fruit'); dictionary.set('car', 'A vehicle');
總結(jié):
- Set 用于存儲(chǔ)唯一的值集合,沒有鍵。
- Map 用于存儲(chǔ)鍵值對(duì),鍵和值都可以是任意類型。
到此這篇關(guān)于javascript中的set的常用方法和操作的文章就介紹到這了,更多相關(guān)js中set用法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Javascript 生成無(wú)限下拉列表實(shí)現(xiàn)代碼
js生成無(wú)線下拉列表的實(shí)現(xiàn)代碼。2009-03-03
在js文件中引入(調(diào)用)另一個(gè)js文件的三種方法
這篇文章主要介紹了在js文件中引入(調(diào)用)另一個(gè)js文件的三種方法,幫助大家更好的理解和學(xué)習(xí)JavaScript,感興趣的朋友可以了解下2020-09-09
TypeScript使用axios庫(kù)進(jìn)行高效的網(wǎng)頁(yè)數(shù)據(jù)抓取
在當(dāng)今的互聯(lián)網(wǎng)時(shí)代,數(shù)據(jù)已成為企業(yè)最寶貴的資產(chǎn)之一,無(wú)論是社交媒體分析、市場(chǎng)趨勢(shì)預(yù)測(cè)還是用戶行為研究,高效地獲取和處理網(wǎng)頁(yè)數(shù)據(jù)都是至關(guān)重要的,本文將通過訪問抖音平臺(tái)的案例,介紹如何在TypeScript中使用axios庫(kù)進(jìn)行高效的網(wǎng)頁(yè)數(shù)據(jù)抓取2024-08-08
JS動(dòng)態(tài)修改表格cellPadding和cellSpacing的方法
這篇文章主要介紹了JS動(dòng)態(tài)修改表格cellPadding和cellSpacing的方法,涉及javascript操作cellPadding和cellSpacing屬性的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
TypeScript內(nèi)置工具類型快速入門運(yùn)用
TypeScript 中內(nèi)置了很多工具類型,我們無(wú)需導(dǎo)入,可以直接使用。 其中的很多都是比較常用的,接下來我們根據(jù)使用范圍來一一介紹,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-03-03
Bootstrap實(shí)現(xiàn)的表格合并單元格示例
這篇文章主要介紹了Bootstrap實(shí)現(xiàn)的表格合并單元格,涉及bootstrap界面布局相關(guān)操作技巧,需要的朋友可以參考下2018-02-02
ajax接收后臺(tái)數(shù)據(jù)在html頁(yè)面顯示
本篇文章主要介紹了ajax接收后臺(tái)數(shù)據(jù)在html頁(yè)面顯示的方法,具有很好的參考價(jià)值,下面跟著小編一起來看下吧2017-02-02

