国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

細說es6中的Set和Map

Ryan_Li / 736人閱讀

摘要:返回一個布爾值,表示該值是否為的成員。返回鍵名的遍歷器返回鍵值的遍歷器返回鍵值對的遍歷器使用回調函數遍歷每個成員需要特別指出的是,的遍歷順序就是插入順序。該數組的所有成員,都會自動成為實例對象的成員。這意味著,數組的成員只能是對象。

1.Set

ES6 提供了新的數據結構 Set。它類似于數組,但是成員的值都是唯一的,沒有重復的值。
Set 本身是一個構造函數,用來生成 Set 數據結構。
基本用法:
const set = new Set();
set函數可以接受一個數組(或者具有iterable 接口的其他數據結構)作為參數,用來初始化:
const set = new Set(["1","2","3","2"]); //注意:set結構不會接受重復的參數,這也體現了set結構去重的方法

擴展運算符: ... //可以把set數據結構轉化為數組類型
例如:
[...set]
另一種方法是利用Array.from()方法:
const set = new Set(["1","2","3"]);
例如: Array.from(set)
在set結構中,兩個對象總是不相等的,NaN也等于其本身。

下面是set結構的屬性和方法:
Set 結構的實例有以下屬性:
Set.prototype.constructor:構造函數,默認就是Set函數。
Set.prototype.size:返回Set實例的成員總數。

Set 實例的方法分為兩大類:操作方法(用于操作數據)和遍歷方法(用于遍歷成員)。下面先介紹四個操作方法。
add(value):添加某個值,返回 Set 結構本身。
delete(value):刪除某個值,返回一個布爾值,表示刪除是否成功。
has(value):返回一個布爾值,表示該值是否為Set的成員。
clear():清除所有成員,沒有返回值。
例如:
set.add(10) //向set添加一個成員
set.delete(10) //刪除set一個成員
set.has(10) //檢測這個值是否存在,返回布爾值true或false
set.clear() //清除所有set成員,沒有返回值

遍歷操作
Set 結構的實例有四個遍歷方法,可以用于遍歷成員。

keys():返回鍵名的遍歷器
values():返回鍵值的遍歷器
entries():返回鍵值對的遍歷器
forEach():使用回調函數遍歷每個成員
需要特別指出的是,Set的遍歷順序就是插入順序。這個特性有時非常有用,比如使用 Set 保存一個回調函數列表,調用時就能保證按照添加順序調用。

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

2.WeakSet

含義:
WeakSet 結構與 Set 類似,也是不重復的值的集合。但是,它與 Set 有兩個區別。
(1),WeakSet 的成員只能是對象,而不能是其他類型的值。
WeakSet 適合臨時存放一組對象
WeakSet 的成員是不適合引用的,因為它會隨時消失。另外,由于 WeakSet 內部有多少個成員,取決于垃圾回收機制有沒有運行,運行前后很可能成員個數是不一樣的,而垃圾回收機制何時運行是不可預測的,因此 ES6 規定 WeakSet 不可遍歷。
作為構造函數,WeakSet 可以接受一個數組或類似數組的對象作為參數。(實際上,任何具有 Iterable 接口的對象,都可以作為 WeakSet 的參數。)該數組的所有成員,都會自動成為 WeakSet 實例對象的成員。
注意,是a數組的成員成為 WeakSet 的成員,而不是a數組本身。這意味著,數組的成員只能是對象。

WeakSet 結構有以下三個方法。
WeakSet.prototype.add(value):向 WeakSet 實例添加一個新成員。
WeakSet.prototype.delete(value):清除 WeakSet 實例的指定成員。
WeakSet.prototype.has(value):返回一個布爾值,表示某個值是否在 WeakSet 實例之中。

const ws = new WeakSet();
const obj = {};
const foo = {};

ws.add(window);
ws.add(obj);

ws.has(window); // true
ws.has(foo); // false

ws.delete(window);
ws.has(window); // false

另外:WeakSet 沒有size屬性,沒有辦法遍歷它的成員。

3.Map

含義和基本用法
JavaScript 的對象(Object),本質上是鍵值對的集合(Hash 結構),但是傳統上只能用字符串當作鍵。這給它的使用帶來了很大的限制。
為了解決這個問題,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
事實上,不僅僅是數組,任何具有 Iterator 接口、且每個成員都是一個雙元素的數組的數據結構(詳見《Iterator》一章)都可以當作Map構造函數的參數。這就是說,Set和Map都可以用來生成新的 Map。

實例的屬性和操作方法

(1)size 屬性

size屬性返回 Map 結構的成員總數。

const map = new Map();
map.set("foo", true);
map.set("bar", false);

map.size // 2
(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");
(3)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!
(4)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
(5)delete(key)

delete方法刪除某個鍵,返回true。如果刪除失敗,返回false。

const m = new Map();
m.set(undefined, "nah");
m.has(undefined) // true

m.delete(undefined)
m.has(undefined) // false
(6)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 的遍歷順序就是插入順序。

4.WeakMap

WeakMap結構與Map結構類似,也是用于生成鍵值對的集合。
WeakMap與Map的區別有兩點。

首先,WeakMap只接受對象作為鍵名(null除外),不接受其他類型的值作為鍵名。
其次,WeakMap的鍵名所指向的對象,不計入垃圾回收機制。

WeakMap的設計目的在于,有時我們想在某個對象上面存放一些數據,但是這會形成對于這個對象的引用。請看下面的例子。

const e1 = document.getElementById("foo");
const e2 = document.getElementById("bar");
const arr = [
[e1, "foo 元素"],
[e2, "bar 元素"],
];
基本上,如果你要往對象上添加數據,又不想干擾垃圾回收機制,就可以使用 WeakMap。一個典型應用場景是,在網頁的 DOM 元素上添加數據,就可以使用WeakMap結構。當該 DOM 元素被清除,其所對應的WeakMap記錄就會自動被移除。

const wm = new WeakMap();

const element = document.getElementById("example");

wm.set(element, "some information");
wm.get(element) // "some information"
上面代碼中,先新建一個 Weakmap 實例。然后,將一個 DOM 節點作為鍵名存入該實例,并將一些附加信息作為鍵值,一起存放在 WeakMap 里面。這時,WeakMap 里面對element的引用就是弱引用,不會被計入垃圾回收機制。
總之,WeakMap的專用場合就是,它的鍵所對應的對象,可能會在將來消失。WeakMap結構有助于防止內存泄漏。

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

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

相關文章

  • 「干貨」細說 Array 的常用操作(ES5 ES6)

    摘要:今天,會更具體地將數組的常用操作進行歸納和匯總,以便備不時之需。在公用庫中,一般會這么做的判斷新增的操作和傳入一個回調函數,找到數組中符合當前搜索規則的第一個元素,返回這個元素,并且終止搜索。 showImg(https://segmentfault.com/img/bVbpzuS?w=750&h=422); 前言 上一篇文章「前端面試題系列8」數組去重(10 種濃縮版) 中提到了不少...

    VincentFF 評論0 收藏0
  • 細說es6中的數組

    摘要:函數運行后,返回一個遍歷器對象,因此也可以使用擴展運算符。總是返回參數值組成的數組。方法的回調函數可以接受三個參數,依次為當前的值當前的位置和原數組。上面代碼中,的參數為,表示要拉平兩層的嵌套數組。 1.擴展運算符 含義擴展運算符(spread)是三個點(...)。它好比 rest 參數的逆運算,將一個數組轉為用逗號分隔的參數序列。console.log(...[1, 2, 3])//...

    Near_Li 評論0 收藏0
  • 細說數組常用遍歷的方法

    摘要:需要返回值,如果不給,默認返回使用場景假定有一個數值數組將數組中的值以雙倍的形式放到數組寫法方法使用場景假定有一個對象數組將數中對象某個屬性的值存儲到數組中三從數組中找出所有符合指定條件的元素檢測數值元素,并返回符合條件所有元素的數組。 showImg(https://segmentfault.com/img/remote/1460000016810336?w=1149&h=524);...

    阿羅 評論0 收藏0
  • 細說數組常用遍歷的方法

    摘要:需要返回值,如果不給,默認返回使用場景假定有一個數值數組將數組中的值以雙倍的形式放到數組寫法方法使用場景假定有一個對象數組將數中對象某個屬性的值存儲到數組中三從數組中找出所有符合指定條件的元素檢測數值元素,并返回符合條件所有元素的數組。 showImg(https://segmentfault.com/img/remote/1460000016810336?w=1149&h=524);...

    AlphaWatch 評論0 收藏0
  • 細說數組常用遍歷的方法

    摘要:需要返回值,如果不給,默認返回使用場景假定有一個數值數組將數組中的值以雙倍的形式放到數組寫法方法使用場景假定有一個對象數組將數中對象某個屬性的值存儲到數組中三從數組中找出所有符合指定條件的元素檢測數值元素,并返回符合條件所有元素的數組。 showImg(https://segmentfault.com/img/remote/1460000016810336?w=1149&h=524);...

    ?xiaoxiao, 評論0 收藏0

發表評論

0條評論

Ryan_Li

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<