ES6 - Set

stefan 發布于2019-08-26 10:23 / 3497人閱讀

摘要：之前，數組是里面的唯一一個集合對象。沒有重復的元素的列表。而的元素是一個個的鍵值對。在后面的內容，我們可以看到怎樣為它添加元素。這是區別于普通對象的地方一般的對象，數值型的屬性名會被強制轉換為字符串型但是不會。

ES6之前，數組是javaScript里面的唯一一個集合對象。如果你接觸過其他編程語言，可能會知道用來表示集合的數據結構往往還有兩種：Set和Map。
Set沒有重復的元素的列表。而Map的元素是一個個的鍵值對。這一篇我們只說Set，Map會另起一篇文章。接下來我們就來看看Set的相關知識：
一：創建Set
1: 通過new Set()創建一個空列表

let set = new Set();

以上我們就成功地創建好了一個Set列表，只是它暫時沒有任何元素。在后面的內容，我們可以看到怎樣為它添加元素。

2: 以一個可迭代對象初始化列表

let array = [1, 2];
let map = new Map([["name", "mike"],["age", 25]]);
let setOfArray = new Set(array);
let setOfMap = new Set(map);

setOfArray.forEach(function (value, key, set) {
    console.log(`${key}: ${value}`);
});

setOfMap.forEach(function (value, key, set) {
    console.log(`${key}: ${value}`);
});

以上例子里面的setOfArray.forEach()我們得到的打印結果是：

1: 1
2: 2

從這個打印結果，我們也可以看得出來，Set元素的key和value是同一個值。

以上例子里面的setOfMap.forEach()我們得到的打印結果是：

name,mike: name,mike
age,25: age,25

雖然我們可以用Map初始化一個Set，但是顯然這么做沒什么意義。通常我們還是更多會使用Array。
二：Set的增
當我們通過給new Set()不傳遞任何參數而創建一個空Set之后，一般還需要通過add()方法來添加元素：

let set = new Set();
set.add(1);
set.add("1");
console.log(set.size); // 2

在上面的例子里，我們分別添加了數字型的和字符串形的1，最終我們得到兩個元素。這是Set區別于普通對象的地方：一般的對象，數值型的屬性名會被強制轉換為字符串型；但是Set不會。

三：Set的刪
想要刪除Set里面的所有元素，只需要調用clear()方法：

let set = new Set([1, 2, 3]);
set.clear();
console.log(set.size); // 0

四：Set的查
我們可以通過has()方法來查詢某個元素是否在Set集合里面：

let set = new Set([1, 2, 3]);
console.log(set.has(1)); //true
console.log(set.has("1"));//false

五：Set的減
delete()方法可用于從Set集合里面除去某個元素：

let set = new Set([1, 2, 3]);
set.delete(1);
console.log(set.has(1)); //fasle
console.log(set.size); // 2

七：Set的使用場景
從前面的文章中我們陸陸續續了解到了Set集合的一些重要特性，比如：

1: Set沒有重復元素
2: Set元素的key和value為同一值
3: 我們可以使用可迭代對象初始化Set

根據這些特性，我們可以實現Array的去重。基本的思路就是：

1: 要處理的Array集合作為參數來初始化Set集合，這時我們得到一個沒有重復元素的Set
2: 通過展開運算符(...), 把第一步得到的Set集合轉換為一個數組

代碼示例：

let originalArray = [1, 1, 2, 2, 3, 4];
let set = new Set(originalArray);
let newArray = [...set];
console.log(newArray); // [1, 2, 3, 4]

以上，就是Set的一些基本特性，語法和使用場景。

GPU云服務器云服務器 ES6 es6-系列 ES6入門 es6 js

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106097.html

ES6引入的數據結構 - ES6 - ECMAScript特性 - Javascript核心

摘要：引入的數據結構新加入的數據類型有這些數據結構的支持并不廣泛，在寫這篇文章的時候。是或其他可枚舉的對象，其每個元素是的元數組。開頭的和不對持有引用，不影響。因此，他們沒有辦法對自身的進行直接的枚舉。目前新版的和支持。原文：http://pij.robinqu.me/JavaScript_Core/ECMAScript/es6/es6_data_types.html 源代...

fobnn 2019-08-19 14:50 評論0 收藏0
深入理解ES6筆記（七）Set集合和Map集合

摘要：創建并添加項目可以使用數組來初始化一個，并且構造器會確保不重復地使用這些值使用方法來測試某個值是否存在于中移除值使用方法來移除單個值，或調用方法來將所有值從中移除。屬性的初始化將數組傳遞給構造器，以便使用數據來初始化一個。主要知識點：Set的基本操作，Weak Set，Map的基本操作，Weak MapshowImg(https://segmentfault.com/img/bVbf...

loostudy 2019-08-23 11:26 評論0 收藏0
帶你入門 JavaScript ES6 (五) 集合

摘要：一概述集合是引入的新的內置對象類型，其特點同數學意義的集合，即集合內所有元素不重復元素唯一。數組集合對比數組和集合，數組可以加入重復數據，而集合的所有元素是唯一的不允許重復。因此，適合臨時存放一組對象，以及存放跟對象綁定的信息。本文同步帶你入門帶你入門 JavaScript ES6 (五) 集合，轉載請注明出處。前面我們學習了： for of 變量和擴展語法塊作用域變量和解構...

BetaRabbit 2019-08-26 17:04 評論0 收藏0
深入理解：ES6中的Set和Map數據結構，Map與其它數據結構的互相轉換

摘要：學習筆記工作中常用到的語法只是簡單提及和，今天有空于是寫了這篇文章深入理解中的和數據結構，與其它數據結構的互相轉換。的提供了新的數據結構。本身是一個構造函數，用來生成數據結構。文中的內容主要是來自于阮一峰的《ES6標準入門》（第三版）。《學習ES6筆記──工作中常用到的ES6語法》只是簡單提及Set和Map，今天有空于是寫了這篇文章──《深入理解：ES6中的Set和Map數據結構，M...

Cristalven 2019-08-23 12:00 評論0 收藏0
ES6的Set數據結構

摘要：本身是一個構造函數，用來生成數據結構可以接受一個數組或者類數組對象作為參數，用來初始化可用于數組去重方法可以將結構轉換為數組向加入值時，不會發生類型轉換類似于精確相等，但是要注意在里是等于自身的。 ES6：Set 大神地址：來自阮一峰大神的ES6入門書籍了解Set ES6提供了數據結構Set。類似于數組，但是沒有重復值。 Set本身是一個構造函數，用來生成Set數據結構 const ...

hiyayiji 2019-08-20 15:19 評論0 收藏0
ES6-前世今生（0）

摘要：更新了個版本，最新正式版是語言的下一代標準，早已在年月正式發布。基本不支持移動端瀏覽器對的支持情況版起便可以支持的新特性。比較通用的工具方案有，，，等。 1、ECMAScript是什么？和 JavaScript 有著怎樣的關系？ 1996 年 11 月，Netscape 創造了javascript并將其提交給了標準化組織 ECMA，次年，ECMA 發布 262 號標準文件（ECMA-...

LeviDing 2019-08-26 13:41 評論0 收藏0