日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 前端文檔 正文

JavaScript的Set數據結構詳解_javascript技巧

作者：CSPsy ? 更新時間： 2022-03-24 前端文檔

1.?什么是 Set

Set 可以簡單的看作是數學上的集合。

它是一系列無序，沒有重復數值的數據集合。

2.?Set 構造函數

對于 Set 的構造函數的參數，可以傳遞以下幾種形式。

2.1)?數組

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

在這里插入圖片描述

這里傳遞了一個數組[1, 2, 1]作為參數，由于 Set 是無重復數值的集合，所以第三個 1 自動刪除了。

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>

在這里插入圖片描述

這里將三個p標簽的引用放進了Set?s中；

當我們要用的時候，就可以遍歷這個?Set，然后分別將p標簽的引用取出來，然后就可以對p標簽進行修改了。

2.5)? Set

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

在這里插入圖片描述

這里相當于把s1復制過去，給了s2，不過它們不是同一個Set

console.log(s1 === s2);

在這里插入圖片描述

3.?Set 的實例屬性和方法

Set 的屬性，有一個屬性size，用來存儲它的成員個數

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

在這里插入圖片描述

Set的方法

  • add

給 Set 中添加成員

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

在這里插入圖片描述

  • delete

用來刪除 Set 中的成員

const s = new Set([1, 2, 3]);
s.delete(2);
// 如果要刪除的東西在 Set 中找不到，將什么也不會發生，也不會報錯
s.delete(5);
console.log(s);

在這里插入圖片描述

  • has

用來判斷 Set 是否含有某個成員

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

在這里插入圖片描述

  • clear

將會刪除 Set 的所有成員

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

在這里插入圖片描述

4.?Set 的成員訪問

它的成員訪問要通過?forEach?方法實現，遍歷 Set，它的遍歷是按成員的添加順序來進行遍歷的。

它有兩個參數，第一個參數為回調函數，第二個參數設定回調函數中this指向什么，即

s.forEach(回調函數, 回調函數的指向)

我們先來看第一個參數：

對于第一個參數回調函數，它有三個參數：

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

通過一個例子理解一下：

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

在這里插入圖片描述

再來看第二個參數：

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

在這里插入圖片描述

5.?Set 的注意事項

Set 對重復值的判斷基本遵循嚴格相等===的判斷

不過對于NaN，在 Set 中，NaN?等于?NaN

6.?Set 的使用場景

數組去重

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("");
// 也可以寫成一句
// 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>

在這里插入圖片描述

總結

原文鏈接：https://blog.csdn.net/m0_51573433/article/details/122282581

欄目分類
最近更新