ES6 (十) Set 和 Map
Set
ES6 提供了新的資料結構 Set。它類似於陣列,但是成員的值都是唯一的,沒有重複的值。
Set 本身是一個建構函式,用來生成 Set 資料結構。
const s = new Set();
[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));
for (let i of s) {
console.log(i);
}
// 2 3 5 4
Set 函式可以接受一個數組(或類似陣列的物件)作為引數,用來初始化。
// 例一
const set = new Set([1, 2, 3, 4, 4]);
[...set]
// [1, 2, 3, 4]
// 例二
const items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
items.size // 5
// 例三
function divs () {
return [...document.querySelectorAll('div')];
}
const set = new Set(divs());
set.size // 56
// 類似於
divs().forEach(div => set.add(div));
set.size // 56
上面程式碼中,例一和例二都是Set函式接受陣列作為引數,例三是接受類似陣列的物件作為引數。
上面程式碼中,也展示了一種去除陣列重複成員的方法。
// 去除陣列的重複成員
[...new Set(array)]
向Set加入值的時候,不會發生型別轉換,所以5和”5”是兩個不同的值。Set內部判斷兩個值是否不同,使用的演算法叫做“Same-value equality”,它類似於精確相等運算子(===),主要的區別是NaN等於自身,而精確相等運算子認為NaN不等於自身。
let set = new Set();
let a = NaN;
let b = NaN;
set.add(a);
set.add(b);
set // Set {NaN}
//上面程式碼向 Set 例項添加了兩個NaN,但是隻能加入一個。這表明,在 Set 內部,兩個NaN是相等。
Set 例項的屬性和方法
Set 結構的例項有以下屬性。
Set.prototype.constructor:建構函式,預設就是Set函式。
Set.prototype.size:返回Set例項的成員總數。
Set 例項的方法分為兩大類:操作方法(用於操作資料)和遍歷方法(用於遍歷成員)。下面先介紹四個操作方法。
add(value):新增某個值,返回Set結構本身。
delete(value):刪除某個值,返回一個布林值,表示刪除是否成功。
has(value):返回一個布林值,表示該值是否為Set的成員。
clear():清除所有成員,沒有返回值。
下面是一個對比,看看在判斷是否包括一個鍵上面,Object結構和Set結構的寫法不同。
// 物件的寫法
const properties = {
'width': 1,
'height': 1
};
if (properties[someName]) {
// do something
}
// Set的寫法
const properties = new Set();
properties.add('width');
properties.add('height');
if (properties.has(someName)) {
// do something
}
Array.from方法可以將 Set 結構轉為陣列。
const items = new Set([1, 2, 3, 4, 5]);
const array = Array.from(items);
這就提供了去除陣列重複成員的另一種方法。
function dedupe(array) {
return Array.from(new Set(array));
}
dedupe([1, 1, 2, 3]) // [1, 2, 3]
遍歷操作
Set 結構的例項有四個遍歷方法,可以用於遍歷成員。
keys():返回鍵名的遍歷器
values():返回鍵值的遍歷器
entries():返回鍵值對的遍歷器
forEach():使用回撥函式遍歷每個成員
需要特別指出的是,Set的遍歷順序就是插入順序。這個特性有時非常有用,比如使用Set儲存一個回撥函式列表,呼叫時就能保證按照新增順序呼叫。
keys(),values(),entries()
keys方法、values方法、entries方法返回的都是遍歷器物件(詳見《Iterator 物件》一章)。由於 Set 結構沒有鍵名,只有鍵值(或者說鍵名和鍵值是同一個值),所以keys方法和values方法的行為完全一致。
let set = new Set(['red', 'green', 'blue']);
for (let item of set.keys()) {
console.log(item);
}
// red
// green
// blue
for (let item of set.values()) {
console.log(item);
}
// red
// green
// blue
for (let item of set.entries()) {
console.log(item);
}
// ["red", "red"]
// ["green", "green"]
// ["blue", "blue"]
forEach()
Set結構的例項的forEach方法,用於對每個成員執行某種操作,沒有返回值。
let set = new Set([1, 2, 3]);
set.forEach((value, key) => console.log(value * 2) )
// 2
// 4
// 6
上面程式碼說明,forEach方法的引數就是一個處理函式。該函式的引數依次為鍵值、鍵名、集合本身(上例省略了該引數)。另外,forEach方法還可以有第二個引數,表示繫結的this物件。
WeakSet
WeakSet 結構與 Set 類似,也是不重複的值的集合。但是,它與 Set 有兩個區別。
首先,WeakSet 的成員只能是物件,而不能是其他型別的值。
const ws = new WeakSet();
ws.add(1)
// TypeError: Invalid value used in weak set
ws.add(Symbol())
// TypeError: invalid value used in weak set
其次,WeakSet 中的物件都是弱引用,即垃圾回收機制不考慮 WeakSet 對該物件的引用,也就是說,如果其他物件都不再引用該物件,那麼垃圾回收機制會自動回收該物件所佔用的記憶體,不考慮該物件還存在於 WeakSet 之中。
Map
JavaScript 的物件(Object),本質上是鍵值對的集合(Hash 結構),但是傳統上只能用字串當作鍵。這給它的使用帶來了很大的限制。
const data = {};
const element = document.getElementById('myDiv');
data[element] = 'metadata';
data['[object HTMLDivElement]'] // "metadata"
上面程式碼原意是將一個 DOM 節點作為物件data的鍵,但是由於物件只接受字串作為鍵名,所以element被自動轉為字串[object HTMLDivElement]。
為了解決這個問題,ES6 提供了 Map 資料結構。它類似於物件,也是鍵值對的集合,但是“鍵”的範圍不限於字串,各種型別的值(包括物件)都可以當作鍵。也就是說,Object 結構提供了“字串—值”的對應,Map結構提供了“值—值”的對應,是一種更完善的 Hash 結構實現。如果你需要“鍵值對”的資料結構,Map 比 Object 更合適。
const m = new Map();
const o = {p: 'Hello World'};
m.set(o, 'content')
m.get(o) // "content"
m.has(o) // true
m.delete(o) // true
m.has(o) // false
例項的屬性和操作方法
size屬性
size屬性返回 Map 結構的成員總數。
const map = new Map();
map.set('foo', true);
map.set('bar', false);
map.size // 2
set(key, value)
set方法設定鍵名key對應的鍵值為value,然後返回整個 Map 結構。如果key已經有值,則鍵值會被更新,否則就新生成該鍵。
const m = new Map();
m.set('edition', 6) // 鍵是字串
m.set(262, 'standard') // 鍵是數值
m.set(undefined, 'nah') // 鍵是 undefined
set方法返回的是當前的Map物件,因此可以採用鏈式寫法。
let map = new Map()
.set(1, 'a')
.set(2, 'b')
.set(3, 'c');
get(key)
//get方法讀取key對應的鍵值,如果找不到key,返回undefined。
const m = new Map();
const hello = function() {console.log('hello');};
m.set(hello, 'Hello ES6!') // 鍵是函式
m.get(hello) // Hello ES6!
has(key)
//has方法返回一個布林值,表示某個鍵是否在當前 Map 物件之中。
const m = new Map();
m.set('edition', 6);
m.set(262, 'standard');
m.set(undefined, 'nah');
m.has('edition') // true
m.has('years') // false
m.has(262) // true
m.has(undefined) // true
delete(key)
//delete方法刪除某個鍵,返回true。如果刪除失敗,返回false。
const m = new Map();
m.set(undefined, 'nah');
m.has(undefined) // true
m.delete(undefined)
m.has(undefined) // false
clear()
clear方法清除所有成員,沒有返回值。
let map = new Map();
map.set('foo', true);
map.set('bar', false);
map.size // 2
map.clear()
map.size // 0
遍歷方法
Map 結構原生提供三個遍歷器生成函式和一個遍歷方法。
keys():返回鍵名的遍歷器。
values():返回鍵值的遍歷器。
entries():返回所有成員的遍歷器。
forEach():遍歷 Map 的所有成員。
需要特別注意的是,Map 的遍歷順序就是插入順序。
與其他資料結構的互相轉換
(1)Map 轉為陣列
(2)陣列 轉為 Map
(3)Map 轉為物件
(4)物件轉為 Map
(5)Map 轉為 JSON
(6)JSON 轉為 Map
WeakMap
WeakMap結構與Map結構類似,也是用於生成鍵值對的集合。
WeakMap與Map的區別有兩點。
首先,WeakMap只接受物件作為鍵名(null除外),不接受其他型別的值作為鍵名。
其次,WeakMap的鍵名所指向的物件,不計入垃圾回收機制。
相關推薦
ES6 (十) Set 和 Map
Set ES6 提供了新的資料結構 Set。它類似於陣列,但是成員的值都是唯一的,沒有重複的值。 Set 本身是一個建構函式,用來生成 Set 資料結構。 const s = new Set(); [2, 3, 5, 4, 5, 2, 2].forEac
es6 的Set和Map
console sss arr 構造 ons from true 數組的並集 無重復 //Set 和Map類似數組 成員唯一(無重復值) set 構造函數 var arr3=[1,2,3,3,4,5,3,5] a,三種添加方式 const arr4=new Set();
ES6的Set和Map
Set ES6提供了新的資料結構Set。它類似於陣列,但是成員的值都是唯一的,沒有重複的值。 Set函式可以接受一個數組(或類似陣列的物件)作為引數,用來初始化。 // 例一 var set = new Set([1, 2, 3, 4, 4]); [...set] // [1, 2,
【ES6】Set和Map資料結構
Set 1 類似於陣列,但成員的值都是唯一的 2 初始化: let set=new Set(); let set1=new Set([1,2,3,4,4]); //去除陣列重複成員: [...new Set(array)] 3 向set加入值時不會發
js ES6 Set和Map數據結構詳解
... 文章 正常 col rfi 關註 ash comm 遍歷 這篇文章主要介紹了ES6學習筆記之Set和Map數據結構,結合實例形式詳細分析了ECMAScript中基本數據結構Set和Map的常用屬性與方法的功能、用法及相關註意事項,需要的朋友可以參考下
ES6中的Set和Map集合
這就是 his 使用場景 ont 最大 urn 受限 我們 ... 前面的話 在ES6標準制定以前,由於可選的集合類型有限,數組使用的又是數值型索引,因而經常被用於創建隊列和棧。如果需要使用非數值型索引,就會用非數組對象創建所需的數據結構,而這就是Set集合與Map集
es6 Set 和Map 數據結構
lba lsi 一個數 nvl 接受 atm imu otg 成功 ES6提供了新的數據結構Set,它類似於數組,但是成員的值都是唯一的,沒有重復的值。 Set 本身是一個數據結構,用來生成Set 數據結構。 const s = new Set();
ES6知識整理(7)--Set和Map數據結構
ora ear 踏實 9.png 叠代 數據 edi KS 返回鍵 (文章會同步到博客園,技術類文章還是該讓搜索引擎察覺比較好)Set構造函數初始化一個值不重復的數組,適合做數組去重。2種數組去重的方法:這裏再說下Array.from(),表示以一個類數組||可叠代對象,創
ES6 -Set 和 Map 數據結構
gin UNC uncaught pre console fine reac error: div 一、set 1.set數據結構:類似數組,但是裏面不能有重復值 2.set語法, new Set([]) let set=new Set([1,2,1]); cons
ES6 Set 和 Map
bsp 無法 style 9.png 分享 http es5 scrip null ES5 模擬Set 與 Map 集合 Set 常用於檢查對象中是否存在某個鍵名 Map集合常被用於獲取已存的信息 所有對象的屬性名必須是字符串,那麽必須確保每個鍵名都是字符串類型且在對象
es6(三set和map資料結構)
es6中提供了一個新的資料結構Set,他有點類似陣列,但和陣列不同的是,在裡面你如果寫入重複的值的話,他不會顯示重複值。 const s =new Set(); [2,3,4,5,6,6,6,7,8,9].forEach(x => s.add(x)); for (let i
ES6 Set和Map資料結構(可轉為陣列)
一:Set 基本用法 ES6 提供了新的資料結構 Set。它類似於陣列,但是成員的值都是唯一的,沒有重複的值。(不包括空物件) Set 本身是一個建構函式,用來生成 Set 資料結構。 const s = new Set(); [2, 3, 5, 4, 5, 2, 2].forE
ES6 Set和Map
Set Set集合是一種無重複元素的列表,通常的用途用以檢測給定的元素在某個集合中是否存在 ES5模擬Set var set = Object.create(null); se
ES6資料結構之Set和Map
Set (1)基本用法: ES6 提供了新的資料結構 Set。它類似於陣列,但是成員的值都是唯一的,沒有重複的值。 Set 本身是一個建構函式,用來生成 Set 資料結構。 Set 函式可以接受一個數組(或者具有 iterable 介面的其他資料結構)作為引數,用來初始化。
輕鬆上手使用ES6中的Set和Map資料結構
Set 基本用法 ES6提供了新的資料結構Set。它類似於陣列,但成員的值都是唯一的,沒有重複。Set本身是一個建構函式,用來生成Set資料結構。 const s = new Set(); [2, 3, 5, 4, 5, 2, 2].forEach( x =>
ES6中的Set和Map
Set Set是ES6中提供的一種新的資料結構。類似於陣列,但是成員值都是唯一的,不會重複。 它本身是一個建構函式,生成Set資料結構。 var s=new Set(); 屬性: Set.prototype.constructor:指向建構函式Set Set.prototype
ES6學習筆記9 Symbol、Set和Map
SymbolES6引入一種新的資料型別Symbol,表示獨一無二的值。Symbol值通過Symol函式生成,可傳入一個字串引數,表示對Symbol例項的描述(即使兩個Symbol描述相同,值也不同),用於區分不同的Symbol值。let s1 = Symbol('foo');
ECMAScript 6 學習系列課程 (ES6 Set和Map資料結構)
學過Java的同學,一定用過List和Map的資料結構,不過JavaScript在最新版本中,也提供了Set和Map的資料結構,的確是廣大開發者的福音。 ES6提供了新的資料結構Set。它類似於陣列,但是成員的值都是唯一的,沒有重複的值。 Set
11.Set 和 Map數據結構
console each 表示 數組 weak 操作方法 cto delet 用法 1.set 基本用法 ES6 提供了新的數據結構 Set。它類似於數組,但是成員的值都是唯一的,沒有重復的值。 Set 本身是一個構造函數,用來生成 Set 數據結構。
Set 和 Map 數據結構
數據結構 不同 urn 結果 1.0 arr 發生 return scale Set Set 對象允許你存儲任何類型的 唯一值, 無論是 原始值(一共6種,string, number, boolean, undefined, null,和 es6 新增的 symbol)