ES6學習之set和map資料結構

2021-09-24 07:06:33 字數 2589 閱讀 1996

基本用法

es6提供了新的資料結構set。它類似陣列，但是成員都是唯一的，不允許重複。其本身是乙個建構函式，用來生成set資料結構。

const set = new set([1, 2, 3, 4, 4]);


const sets = new set(document.queryselectorall('div'));


複製**
set函式可以接受乙個陣列或者具有iterable介面的其他資料結構作為引數，用來初始化。

let arr = [3, 5, 2, 2, 5, 5];


let unique = [...new set(arr)];


複製**
上面**也展示了一種去除陣列重複成員的方法。

[...new set('ababbc')].join('')


複製**
上面的方法也適用於字串去除重複的字元。==也可擴充套件為字串去除空格的方法==

[...new set(' a  ba  bb  c')].join('').substr(1)


複製**
向set加入值的時候，不會發生型別轉換。所以，5和'5'是兩個不相同的值。==另外，兩個物件總是不相等的。==

set例項的屬性和方法

set例項有以下屬性：

set例項的方法分為兩大類：操作方法（運算元據）和遍歷方法（遍歷成員）。

操作方法：

遍歷方法

在阮一峰老師的《ecmascript 6 入門》中提到了keys()、values()、entries()、foreach()四種方法。個人在工作中用到的並不多，更多的用到了for...of遍歷方法。

以擴充套件運算子作為中間橋梁，陣列的map方法和filter方法也可以間接的用於set。

const divs = new set(document.queryselectorall('.explain-item'));


let sets = [...divs].map(x => x.innerhtml = x.innerhtml + 'map拼接引數');


複製**
使用map方法快速的遍歷頁面中的dom元素，並修改其值。

let a = new set([1, 2, 3]);


let b = new set([4, 3, 2]);


// 並集


let union = new set([...a, ...b]);


// 交集


let intersect = new set([...a].filter(x => b.has(x)));


// 差集


let difference = new set([...a].filter(x => !b.has(x)));


複製**
使用set配合filter方法和擴充套件運算子可以很容易的實現並集、交集和差集。

map是一組鍵值對的結構，具有相對快的查詢速度。其類似於物件，但是'鍵'的範圍不限於字串，各種型別的值都可以都可以當做鍵。初始化map需要乙個二維陣列或者直接初始化乙個空map。

const $map = new map();


const $num = 1;


const $str = '1';


const $arr = [1, 2, 3, 4];


const $null = null;


const $undefined = undefined;


const $obj = 


$map.set($num, 10)


.set($str, '10')


.set($arr, [4, 3, 2, 1])


.set($null, null)


.set($undefined, undefined)


.set($obj, );


複製**
上面**展示了map不僅可以用基礎資料型別當做鍵，甚至可以將資料和物件當做鍵。上面**使用set方法向map新增資料。map總共有下面幾種運算元據的方法。

遍歷個人感覺遍歷map比較合適的方法是for...of，既能遍歷key，又能遍歷value。

for (let key of $map.keys()) 


for (let value of $map.values()) 


for (let [key, value] of $map) 


複製**
擴充套件運算子[...]可以很方便將map轉換為陣列，結合陣列的map方法和filter方法，可以實現map本身的遍歷和過濾。（map本身沒有map和filter方法）。

[...$map.keys()]


[...$map.values()]


[...$map]


複製**

es6學習之Set和Map結構

set結構是類似於陣列結構,但是成員都是不重複的值 判斷不重複類似object.is 方法,但是 0和 0又是相同的處理,object.is 0,0 false 缺點是沒辦法像陣列一樣通過下標取值的方法.weekset結構和set相似,但是成員只能是物件,且物件是弱引用 成員中的物件不存在了,在本結...

ES6入門之set和map

es6提供了新的資料結構set。它類似於陣列，但是成員的值都是唯一的，沒有重複的值。set函式可以接受乙個陣列 或類似陣列的物件 作為引數，用來初始化。例一 var set new set 1,2,3,4,4 set 1,2,3,4 var s newset 2,3,5,4,5,2,2 map x ...

ES6入門之set和map

es6提供了新的資料結構set。它類似於陣列，但是成員的值都是唯一的，沒有重複的值。set函式可以接受乙個陣列 或類似陣列的物件 作為引數，用來初始化。例一 var set new set 1,2,3,4,4 set 1,2,3,4 var s new set 2,3,5,4,5,2,2 map x...