腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

JavaScript的Set數(shù)據(jù)結(jié)構(gòu)詳解

更新時(shí)間：2022年01月05日 17:28:58 作者：CSPsy

這篇文章主要為大家介紹了JavaScript的Set數(shù)據(jù)結(jié)構(gòu)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助

1. 什么是 Set

Set 可以簡(jiǎn)單的看作是數(shù)學(xué)上的集合。

它是一系列無(wú)序，沒(méi)有重復(fù)數(shù)值的數(shù)據(jù)集合。

2. Set 構(gòu)造函數(shù)

對(duì)于 Set 的構(gòu)造函數(shù)的參數(shù)，可以傳遞以下幾種形式。

2.1) 數(shù)組

const s = new Set([1, 2, 1]);
console.log(s);

在這里插入圖片描述

這里傳遞了一個(gè)數(shù)組[1, 2, 1]作為參數(shù)，由于 Set 是無(wú)重復(fù)數(shù)值的集合，所以第三個(gè) 1 自動(dòng)刪除了。

2.2) 字符串

const s = new Set("Hello World!");
console.log(s);

在這里插入圖片描述

2.3) arguments

function fun() {
    const s = new Set(arguments);
    console.log(s);
}

fun(1, 2, 3);

在這里插入圖片描述

2.4) NodeList

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>set</title>
</head>
<body>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    
    <script>
        const s = new Set(document.querySelectorAll('p'));
        console.log(s);
    </script>
</body>
</html>

在這里插入圖片描述

這里將三個(gè)p標(biāo)簽的引用放進(jìn)了Set s中；

當(dāng)我們要用的時(shí)候，就可以遍歷這個(gè) Set，然后分別將p標(biāo)簽的引用取出來(lái)，然后就可以對(duì)p標(biāo)簽進(jìn)行修改了。

2.5) Set

const s1 = new Set([1, 2, 3]);
const s2 = new Set(s1);
console.log(s2);

在這里插入圖片描述

這里相當(dāng)于把s1復(fù)制過(guò)去，給了s2，不過(guò)它們不是同一個(gè)Set

console.log(s1 === s2);

在這里插入圖片描述

3. Set 的實(shí)例屬性和方法

Set 的屬性，有一個(gè)屬性size，用來(lái)存儲(chǔ)它的成員個(gè)數(shù)

const s = new Set([1, 2, 3]);
console.log(s.size);

在這里插入圖片描述

Set的方法

add

給 Set 中添加成員

const s = new Set([1, 2, 3]);
// 它的參數(shù)只能傳一個(gè)
s.add(5);
console.log(s);
// 可以連綴 add
s.add(7).add(9);
console.log(s);

在這里插入圖片描述

delete

用來(lái)刪除 Set 中的成員

const s = new Set([1, 2, 3]);
s.delete(2);
// 如果要?jiǎng)h除的東西在 Set 中找不到，將什么也不會(huì)發(fā)生，也不會(huì)報(bào)錯(cuò)
s.delete(5);
console.log(s);

在這里插入圖片描述

has

用來(lái)判斷 Set 是否含有某個(gè)成員

const s = new Set([1, 2, 3]);
console.log(s.has(1));
console.log(s.has(5));

在這里插入圖片描述

clear

將會(huì)刪除 Set 的所有成員

const s = new Set([1, 2, 3]);
s.clear();
console.log(s);

在這里插入圖片描述

4. Set 的成員訪問(wèn)

它的成員訪問(wèn)要通過(guò) forEach 方法實(shí)現(xiàn)，遍歷 Set，它的遍歷是按成員的添加順序來(lái)進(jìn)行遍歷的。

它有兩個(gè)參數(shù)，第一個(gè)參數(shù)為回調(diào)函數(shù)，第二個(gè)參數(shù)設(shè)定回調(diào)函數(shù)中this指向什么，即

s.forEach(回調(diào)函數(shù), 回調(diào)函數(shù)的指向)

我們先來(lái)看第一個(gè)參數(shù)：

對(duì)于第一個(gè)參數(shù)回調(diào)函數(shù)，它有三個(gè)參數(shù)：

s.forEach(function(value, key, set){
	value 就是 Set 的成員
	在 Set 中，value 和 key 是相等的
	set 就是前面Set的本身，即這里 set === s
});

通過(guò)一個(gè)例子理解一下：

const s = new Set([1, 2, 3]);
s.forEach(function(value, key, set) {
    console.log(value, key, value === key);
    console.log(set, set === s);
});

在這里插入圖片描述

再來(lái)看第二個(gè)參數(shù)：

const s = new Set([1, 2, 3]);
s.forEach(function(value, key, set) {
    console.log(this);
}, document);

在這里插入圖片描述

5. Set 的注意事項(xiàng)

Set 對(duì)重復(fù)值的判斷基本遵循嚴(yán)格相等===的判斷

不過(guò)對(duì)于NaN，在 Set 中，NaN 等于 NaN

6. Set 的使用場(chǎng)景

數(shù)組去重

let arr = [1, 2, 1];
const s = new Set(arr);
arr = [...s];
// 也可以合成一句
// arr = [...new Set(arr)];
console.log(arr);

在這里插入圖片描述

字符串去重

let str = "11231131242";
const s = new Set(str);
str = [...s].join("");
// 也可以寫(xiě)成一句
// str = [...new Set(str)].join("");
console.log(str);

在這里插入圖片描述

存放 DOM 元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>set</title>
</head>
<body>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    
    <script>
        const s = new Set(document.querySelectorAll('p'));
        s.forEach((elem) => {
            console.log(elem)
        });
    </script>
</body>
</html>

在這里插入圖片描述