免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

打開APP
userphoto
未登錄

開通VIP,暢享免費電子書等14項超值服

開通VIP
ES6 (5):Set/Map

Set:

類似數組,但是成員值是唯一的。

Set 函數可以接收一個數組(具有iterable接口的其他數據結構)

// 例一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// 例三const set = new Set(document.querySelectorAll('div'));set.size // 56// 類似于const set = new Set();document .querySelectorAll('div') .forEach(div => set.add(div));set.size // 56

?去除數組重復:

去除字符串重復字符

[...new Set('ababbc')].join('')// "abc"

?

向 Set 加入值的時候,不會發(fā)生類型轉換,所以5"5"是兩個不同的值。Set 內部判斷兩個值是否不同,使用的算法叫做“Same-value-zero equality”,它類似于精確相等運算符(===),主要的區(qū)別是NaN等于自身,而精確相等運算符認為NaN不等于自身。

另外,對于對象需要特別注意。

實例方法:

  • add(value):添加某個值,返回 Set 結構本身。
  • delete(value):刪除某個值,返回一個布爾值,表示刪除是否成功。
  • has(value):返回一個布爾值,表示該值是否為Set的成員。
  • clear():清除所有成員,沒有返回值。
s.add(1).add(2).add(2);// 注意2被加入了兩次s.size // 2s.has(1) // trues.has(2) // trues.has(3) // falses.delete(2);s.has(2) // false

?

對比對象判斷鍵

// 對象的寫法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 轉換為數組(類似數組和數組):

?

類似使用擴展運算符去除重復鍵

?

?遍歷方法:

  • keys():返回鍵名的遍歷器
  • values():返回鍵值的遍歷器
  • entries():返回鍵值對的遍歷器
  • forEach():使用回調函數遍歷每個成員

?有點類似對象中的方法,多了forEach:

keys:

keys方法、values方法、entries方法返回的都是遍歷器對象(詳見《Iterator 對象》一章)。由于 Set 結構沒有鍵名,只有鍵值(或者說鍵名和鍵值是同一個值),所以keys方法和values方法的行為完全一致

由于Set 部署了Symbol.iteartor 所以也就可以使用forEach 和 for of 方法:

forEach方法還可以有第二個參數,表示綁定處理函數內部的this對象。

?

擴展運算符(...)內部使用for...of循環(huán)。

?

實現并集(Union)、交集(Intersect)和差集(Difference):

let a = new Set([1, 2, 3]);let b = new Set([4, 3, 2]);// 并集let union = new Set([...a, ...b]);// Set {1, 2, 3, 4}// 交集let intersect = new Set([...a].filter(x => b.has(x)));// set {2, 3}// 差集let difference = new Set([...a].filter(x => !b.has(x)));// Set {1}

?

改變Set結構:

// 方法一let set = new Set([1, 2, 3]);set = new Set([...set].map(val => val * 2));// set的值是2, 4, 6// 方法二let set = new Set([1, 2, 3]);set = new Set(Array.from(set, val => val * 2));// set的值是2, 4, 6

?

?WeakSet 結構:

它與 Set 有兩個區(qū)別。

首先,WeakSet 的成員只能是對象,而不能是其他類型的值。其次,WeakSet 中的對象都是弱引用,即垃圾回收機制不考慮 WeakSet 對該對象的引用,也就是說,如果其他對象都不再引用該對象,那么垃圾回收機制會自動回收該對象所占用的內存,不考慮該對象還存在于 WeakSet 之中。

WeakSet 適合臨時存放一組對象,以及存放跟對象綁定的信息。只要這些對象在外部消失,它在 WeakSet 里面的引用就會自動消失。(WeakSet 不可遍歷)

?

?

?

Map:

Object 本質上是鍵值對的集合(Hash 結構),但是傳統(tǒng)上只能用字符串當作鍵。這給它的使用帶來了很大的限制.

?Map 類似于對象,也是鍵值對的集合,但是“鍵”的范圍不限于字符串,各種類型的值(包括對象)都可以當作鍵。

?

const m = new Map();const o = {p: 'Hello World'};m.set(o, 'content')m.get(o) // "content"m.has(o) // truem.delete(o) // truem.has(o) // false

?

接收數組(數組轉map):

?

set/map:

const set = new Set([  ['foo', 1],  ['bar', 2]]);const m1 = new Map(set);m1.get('foo') // 1const m2 = new Map([['baz', 3]]);const m3 = new Map(m2);m3.get('baz') // 3

?如果讀取一個未知的鍵,則返回undefined:

new Map().get('asfddfsasadf')// undefined

?1.size: 成員數

2.set(key,value): 不是put 哦

3.get(key): 獲取

?4.has(key):是否在當前Map中

5.delete(key):刪除某個鍵

6.clear:清空

?

遍歷方法:(跟set一樣)

  • keys():返回鍵名的遍歷器。
  • values():返回鍵值的遍歷器。
  • entries():返回所有成員的遍歷器。
  • forEach():遍歷 Map 的所有成員。

?

// 等同于使用map.entries()for (let [key, value] of map) {  console.log(key, value);}

map[Symbol.iterator] === map.entries// true

?

forEach:回調函數包涵三個參數,并且本身可以有第二個參數用來綁定this

?

?

?數據結構轉換

Map轉數組:

?

數組轉Map

Map轉對象:

function strMapToObj(strMap) {  let obj = Object.create(null);  for (let [k,v] of strMap) {    obj[k] = v;  }  return obj;}

?對象轉Map:

function objToStrMap(obj) {  let strMap = new Map();  for (let k of Object.keys(obj)) {    strMap.set(k, obj[k]);  }  return strMap;}

?

Map 轉json:轉換為對象后再轉換為json

function strMapToJson(strMap) {  return JSON.stringify(strMapToObj(strMap));}

?Map 的鍵名有非字符串,這時可以選擇轉為數組 JSON。

function mapToArrayJson(map) {  return JSON.stringify([...map]);}

?json 轉map:先轉換為對象,然后再轉換為map

function jsonToStrMap(jsonStr) {  return objToStrMap(JSON.parse(jsonStr));}

?

WeakMap:整體類似map,但是與weakset一樣,不能循環(huán),并且只接收對象作為鍵名,指向的對象也不計入垃圾回收機制。

用途:

let myElement = document.getElementById('logo');let myWeakmap = new WeakMap();myWeakmap.set(myElement, {timesClicked: 0});myElement.addEventListener('click', function() {  let logoData = myWeakmap.get(myElement);  logoData.timesClicked  ;}, false);

?myElement是一個 DOM 節(jié)點,每當發(fā)生click事件,就更新一下狀態(tài)。我們將這個狀態(tài)作為鍵值放在 WeakMap 里,對應的鍵名就是myElement。一旦這個 DOM 節(jié)點刪除,該狀態(tài)就會自動消失,不存在內存泄漏風險

?

來源:http://www.icode9.com/content-4-220301.html
本站僅提供存儲服務,所有內容均由用戶發(fā)布,如發(fā)現有害或侵權內容,請點擊舉報。
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
對象、Map、Set、WeakMap、WeakSet
es6筆記5^
ES6新特性(2)之Symbol/Set/WeakSet
JavaScript 標準之 Map對象
7、JS中的Map對象
標準模板庫(STL)使用入門(上)
更多類似文章 >>
生活服務
分享 收藏 導長圖 關注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權!
如果VIP功能使用有故障,
可點擊這里聯系客服!

聯系客服