ES6新特性-JavaScript中Set和WeakSet類型的資料結構的程式碼詳細介紹-js教程-PHP中文網

建立Set實例的基本方法為:

WeakSet

首頁

web前端

js教程

ES6新特性-JavaScript中Set和WeakSet類型的資料結構的程式碼詳細介紹

黄舟

Mar 07, 2017 pm 02:15 PM

ES6提供了新的資料結構 Set，Set物件不是數組，可以用來保存物件或基本類型，所有保存的值都是唯一的, chrome瀏覽器>38和FF>13，以及nodeJS，對Set支援良好，以下的一些程式碼，都可以拷貝到控制台直接運行哦；

建立Set實例的基本方法為:

let set = new Set(); //或者 new Set(null);
console.log(set);

登入後複製

或這樣：

let set = new Set([1,2,3,4,4,4,4,4]);
console.log( Array.from(set) ); //输出：[ 1, 2, 3, 4 ]

登入後複製

可以看到，以上重複的4，在set裡面只儲存了一個，所以Set物件可以用來給陣列去重；

Set也能用來保存NaN和undefined，如果有重複的NaN， Set會認為就一個NaN(實際上NaN!=NaN);

實例Set以後的物件擁有這些屬性與方法：

##屬性

Set.prototype

Set.prototype.size

#方法

Set.prototype.add()

Set. prototype.clear()
Set.prototype.delete()
Set.prototype.entries()
Set.prototype.forEach()
Set.prototype.has()
Set. prototype.values()
Set.prototype[@@iterator]()

Set這種類型的資料結構其實我們可以直接用陣列模擬#出來，雖然不能和原生的比，只能模擬以上列表的一些方法和屬性( 還有一些功能無法實現的， Set實例的[Symbol.species]指向自己，但chrome中沒有[Symbol.species]這個玩意兒…. )

使用陣列模擬一個Set建構器：

<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<script>
    "use strict";
    class Set {
        //对_set进行去重;
        static refresh () {
            let _this = this;
            let __set = []
            this._set.forEach(function(obj) {
                if( __set.indexOf(obj) === -1 && obj!=undefined) {
                    __set.push(obj);
                }
            });
            _this._set =__set;
            this.size = _this._set.length;
        }
        constructor(arg) {
            this.size = 0;
            this[Symbol.species] = this;
            this._set = Array.isArray(arg)&&arg||[];
            Set.refresh.call(this)
        }
        add (obj) {
            this._set.push(obj);
            Set.refresh.call(this)
            return this;
        }
        clear () {
            this._set.length = 0;
            return this;
        }
        delete (obj) {
            if( this._set.indexOf(obj)!=-1 ) {
                this._set[this._set.indexOf(obj)] = undefined;
            };
            Set.refresh.call(this);
            return this;
        }
        /**
         * @desc
         * @return Entries [[],[],[],[]]
         * */
                entries () {
            let result = [];
            this.forEach(function(key, value) {
                result.push([key,value]);
            });
            return result;
        }
        has () {
            if( this._set.indexOf(obj)!=-1 ) return true;
        }
        keys () {
            return this[Symbol.iterator]();
        }
        values () {
            return this[Symbol.iterator]();
        }
        //直接使用数组的forEach方便啊;
        forEach (fn, context) {
            let _this = this;
            this._set.forEach((value) => fn.call(context||value, value, value, _this) );
        }
        //必须支持生成器的写法;
    *[Symbol.iterator] (){
        let index = 0;
        let val = undefined;
        while(index<this.size) {
        val = this._set[index];
        yield  val;
        index++;
    }
    }
    }
    var set = new Set([0,0]);
    //对Set进行基本的操作;
    set.add(1).add(2).add(3).add({1:1})
    set.delete(1);
    set.add(1);
    //使用Set的forEach方法;
    set.forEach(function(key,value,s){console.log(key,value,s,"this")},{this:"this"})
    //检测生成器是否正常运行;
    for(let s of set) {
        console.log(s)
    }
    //因为这个对象有Symbol.iterator， 所以使用扩展符也是好使的；
    console.log([...set]);
</script>
</body>
</html>

登入後複製

Set實例的屬性：

size屬性：size是指這個Set的長度，和陣列的length效果一樣的」

constructor屬性：這個屬性指向Set建構函數，這個程式碼即可實現(new Set).constructor === Set //輸出：true

Set實例的方法：

add方法，在set中加入資料；

<script>
    Array.from((new Set([1,2])).add(3)); // 输出：[1, 2, 3]
</script>

登入後複製

clear方法，把set裡面的資料清空;

let set = (new Set([1,2,3,4]));
set.clear();
Array.from(set);

登入後複製

delete方法，刪除set裡面的指定資料：

let set = (new Set([1,2,3,4]));
set.delete(1);
Array.from(set); //输出：[2, 3, 4]

登入後複製

entries方法：

let set = (new Set([1,2,3,4]));
Array.from(set.entries());

登入後複製

forEach方法：set的forEach有兩個參數，第一個參數為一個函數，第二個參數是非必須的，如果傳了第二個參數，那麼該函數的上下文this就是我們傳的第二個參數：

<script>
let set = (new Set([1,2,3,4]));
set.forEach(function() {
    console.log(arguments);
    console.log(this)
},"1111");
</script>

登入後複製

輸出：

has方法， has是判斷這個set是否有指定的值，回傳false或true;

<script>
let set = (new Set([1,2,3,4]));
console.log(set.has(1)) //输出：true;
console.log(set.has(5)) //输出：false
</script>

登入後複製

keys方法和values()方法, 這兩個方法都是回傳一個迭代器；

<script>
let set = new Set([1,2,3,4]);
console.log(set.keys());
console.log(set.values());

var keys = set.keys();
for(let key of keys) {
    console.log(key);
};
</script>

登入後複製

@@iterator()方法, @iterator方法是set預設的迭代器;

<script>
let set = new Set([1,2,3,4]);
let setIner = set[Symbol.iterator]();
console.log(setIner.next().value) //输出：1
console.log(setIner.next().value) //输出：2
console.log(setIner.next().value) //输出：3
console.log(setIner.next().value) //输出：4
</script>

登入後複製

其實我們可以重寫set[Symbol.iterator]，但不會對set的keys和values方法產生影響;

整個DEMO：

var mySet = new Set();
//往mySet里面添加数据， 1 ， 5
mySet.add(1);
mySet.add(5);
mySet.add("some text");
//添加对象
var o = {a: 1, b: 2};
mySet.add(o);

mySet.has(1); // 返回：true
mySet.has(3); // 返回：false
mySet.has(5);              // 返回：true
mySet.has(Math.sqrt(25));  // 返回：true
mySet.has("Some Text".toLowerCase()); // t返回：rue
mySet.has(o); // 返回：true

mySet.size; // 4

mySet.delete(5); // 从mySet里面删除5
mySet.has(5);    // 输出：false, 5 已经被删除了

mySet.size; // 现在的长度为：3

// 通过 for...or循环获取数据;
// 输出: 1, "some text"
for (let item of mySet) console.log(item);

// 输出: 1, "some text"
for (let item of mySet.keys()) console.log(item);

// 输出: 1, "some text"
for (let item of mySet.values()) console.log(item);

// 输出: 1, "some text"， 对于Set来说：key和value是一样的
for (let [key, value] of mySet.entries()) console.log(key);

// 把迭代器转化为数组的第一种方式；
var myArr = [v for (v of mySet)]; // [1, "some text"]
// 把迭代器转化为数组的第二种方式；
var myArr = Array.from(mySet); // [1, "some text"]
// 也可以用next()方法，手动去获取每一个值;

登入後複製

Set的實際用處：

利用set可以方便的進行交集和並集：

求併集，我們可以給兩個方案或更多：

var union = (setA, setB) => {
    //[...setA]这种方式目前只有babel才支持
    return new Seet([...setA,...setB]);
};
var union = (setA, setB) => {
    return new Set(Array.from(setA).concat(Array.from(setB)));
}

登入後複製

這種取得交集的方式，和數組求交集差不多;

var intersect = (set1, set2) => {
    //return [x for (x of set1) if (set2.has(x))]; 这种写法完全不行嘛....
    var resultSet = new Set();
    for(let set of set1) {
        if(set2.has(set)) {
            resultSet.add(set);
        };
    };
    return resultSet;
};

登入後複製

以下這種程式碼更短，太酷了啊，這個方法來自：http://es6.ruanyifeng.com/#docs/set-map;

var intersect = (set1, set2) => {
    return new Set([...set1].filter(x => set2.has(x)));
}
console.log(intersect(new Set([1,2,3,4]), new Set([2,3,4,5]))); //输出：Set {2,3,4}

登入後複製

弱引用的

WeakSet

##WeakSet

物件是一些物件值的集合, 並且其中的每個物件值都只能出現一次，WeakSet只能存物件類型的元素，例如：Object, Array , Function 等等；有了弱引用的WeakSet，就不用擔心記憶體洩漏了，如果別的對像不引用該對象，這個對象會被垃圾回收機制自動回收；

<script>
    console.log(new WeakSet([{},[],()=>({1:1})]));
</script>

登入後複製

WeakSet物件的方法只有三個，而且WeakSet物件沒有size屬性；

weakSet.delete();

##########weakSet.has();###### #########如果物件不存在引用，那麼WeakSet物件會把沒有引用的物件佔用的記憶體回收，下面這個demo，你可以跑一下，然後過一會兒(我的chrome瀏覽器### 10S###就看到效果了)再看控制台：###

<script>
var ws = new WeakSet()
var obj = {}; ws.add(obj);
ws.add([])
setInterval(()=>{
    console.log(ws);
},1000)
</script>

登入後複製

######weakSet###可以用來保存DOM節點，當節點被刪除， ###weakSet###裡面的該節點如果不存在別的引用的話，一段時間內會被記憶體回收；###### 以上就是ES6新特性-JavaScript中Set和WeakSet類型的資料結構的程式碼詳細介紹的內容，更多相關內容請關注PHP中文網（www.php.cn）！ ########## ###

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學

1664

CakePHP 教程

1423

Laravel 教程

1317

PHP教程

1268

C# 教程

1242

Related knowledge

如何使用WebSocket和JavaScript實現線上語音辨識系統 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript實現線上語音辨識系統引言：隨著科技的不斷發展，語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統，具備了低延遲、即時性和跨平台的特點，成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系

WebSocket與JavaScript：實現即時監控系統的關鍵技術 Dec 17, 2023 pm 05:30 PM

WebSocket與JavaScript：實現即時監控系統的關鍵技術引言：隨著互聯網技術的快速發展，即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用，並給出程式碼範例，詳細解釋其實作原理。一、WebSocket技

如何利用JavaScript和WebSocket實現即時線上點餐系統 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket實現即時線上點餐系統介紹：隨著網路的普及和技術的進步，越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統，我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議，可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中，當使用者選擇菜餚並下訂單

如何使用WebSocket和JavaScript實現線上預約系統 Dec 17, 2023 am 09:39 AM

如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代，越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統，並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工

JavaScript與WebSocket：打造高效率的即時天氣預報系統 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket：打造高效的即時天氣預報系統引言：如今，天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展，我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中，我們將學習如何使用JavaScript和WebSocket技術，來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We

簡易JavaScript教學：取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教學：如何取得HTTP狀態碼，需要具體程式碼範例前言：在Web開發中，經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時，我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功，並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼，並提供一些實用的程式碼範例。使用XMLHttpRequest

javascript如何使用insertBefore Nov 24, 2023 am 11:56 AM

用法：在JavaScript中，insertBefore()方法用於在DOM樹中插入一個新的節點。這個方法需要兩個參數：要插入的新節點和參考節點（即新節點將要插入的位置的節點）。

JavaScript與WebSocket：打造高效率的即時影像處理系統 Dec 17, 2023 am 08:41 AM

JavaScript是一種廣泛應用於Web開發的程式語言，而WebSocket則是一種用於即時通訊的網路協定。結合二者的強大功能，我們可以打造一個高效率的即時影像處理系統。本文將介紹如何利用JavaScript和WebSocket來實作這個系統，並提供具體的程式碼範例。首先，我們需要明確指出即時影像處理系統的需求和目標。假設我們有一個攝影機設備，可以擷取即時的影像數

See all articles

ES6新特性-JavaScript中Set和WeakSet類型的資料結構的程式碼詳細介紹

建立Set實例的基本方法為:

WeakSet

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題