亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

JavaScript中Object、map、weakmap的區(qū)別分析

 更新時間:2020年12月15日 09:45:40   作者:有頭發(fā)的小D  
這篇文章主要介紹了JavaScript中Object、map、weakmap的區(qū)別分析,幫助大家更好的理解和使用JavaScript,感興趣的朋友可以了解下

前言

ECMAScript 6以前,在JavaScript中實現“鍵/值”式存儲可以使用Object來方便高效地完成,也就是使用對象屬性作為鍵,再使用屬性來引用值。但這種實現并非沒有問題,為此TC39委員會專門為“鍵/值”存儲定義了一個規(guī)范。作為ECMAScript 6的新增特性,Map是一種新的集合類型,為這門語言帶來了真正的鍵/值存儲機制。Map的大多數特性都可以通過Object類型實現,但二者之間還是存在一些細微的差異。具體實踐中使用哪一個,還是值得細細甄別。

一、map 的使用

初始化

object 可以使用字面量、構造函數、Object.crate的形式創(chuàng)建。而map 只能通過new 關鍵字和構造函數創(chuàng)建。對于map如果想在創(chuàng)建的同時初始化實例,可以給Map構造函數傳入一個可迭代對象,需要包含鍵/值對數組??傻鷮ο笾械拿總€鍵/值對都會按照迭代順序插入到新映射實例中:

object 的創(chuàng)建方式
 
const object = {}
const object1 = new Object()
const object2 = Object.create({})
 
map 的創(chuàng)建方式
//使用new關鍵字
const m0 = new Map;
// 使用嵌套數組初始化映射
const m1 = new Map([
 ["key1", "val1"],
 ["key2", "val2"],
 ["key3", "val3"]
]);
alert(m1.size); // 3
// 使用自定義迭代器初始化映射
const m2 = new Map({
[Symbol.iterator]: function*() {
 yield ["key1", "val1"];
 yield ["key2", "val2"];
 yield ["key3", "val3"];
}
});
alert(m2.size); // 3
// 映射期待的鍵/值對,無論是否提供
const m3 = new Map([[]]);
alert(m3.has(undefined)); // true
alert(m3.get(undefined)); // undefined

map鍵類型

與Object只能使用數值、字符串或符號作為鍵不同,Map可以使用任何JavaScript數據類型作為鍵。Map內部使用SameValueZero比較操作(ECMAScript規(guī)范內部定義,語言中不能使用),基本上相當于使用嚴格對象相等的標準來檢查鍵的匹配性。與Object類似,映射的值是沒有限制的。

 const m = new Map();
 const functionKey = function() {};
 const symbolKey = Symbol();
 const objectKey = new Object();
 m.set(functionKey, "functionValue");
 m.set(symbolKey, "symbolValue");
 m.set(objectKey, "objectValue");
 alert(m.get(functionKey)); // functionValue
 alert(m.get(symbolKey)); // symbolValue
 alert(m.get(objectKey)); // objectValue
 // SameValueZero比較意味著獨立實例不沖突
 alert(m.get(function() {})); // undefined
  

順序與迭代

與Object類型的一個主要差異是,Map實例會維護鍵值對的插入順序,因此可以根據插入順序執(zhí)行迭代操作。映射實例可以提供一個迭代器(Iterator),能以插入順序生成[key,value]形式的數組??梢酝ㄟ^entries()方法(或者Symbol.iterator屬性,它引用entries())取得這個迭代器:

const m = new Map([
 ["key1", "val1"],
 ["key2", "val2"],
 ["key3", "val3"]
]);
alert(m.entries === m[Symbol.iterator]); // true
for (let pair of m.entries()) {
 alert(pair);
}
// [key1,val1]
// [key2,val2]
// [key3,val3]
for (let pair of m[Symbol.iterator]()) {
 alert(pair);
}
// [key1,val1]
// [key2,val2]
// [key3,val3]

二、選擇Object還是Map

對于多數Web開發(fā)任務來說,選擇Object還是Map只是個人偏好問題,影響不 大。不過,對于在乎內存和性能的開發(fā)者來說,對象和映射之間確實存在顯著的 差別。

1.內存占用

Object和Map的工程級實現在不同瀏覽器間存在明顯差異,但存儲單個鍵/值對所占用的內存數量都會隨鍵的數量線性增加。批量添加或刪除鍵/值對則取決于各瀏覽器對該類型內存分配的工程實現。不同瀏覽器的情況不同,但給定固定大小的內存,Map大約可以比Object多存儲50%的鍵/值對。

2.插入性能

向Object和Map中插入新鍵/值對的消耗大致相當,不過插入Map在所有瀏覽器中一般會稍微快一點兒。對這兩個類型來說,插入速度并不會隨著鍵/值對數量而線性增加。如果代碼涉及大量插入操作,那么顯然Map的性能更佳。

3.查找速度

與插入不同,從大型Object和Map中查找鍵/值對的性能差異極小,但如果只包含少量鍵/值對,則Object有時候速度更快。在把Object當成數組使用的情況下(比如使用連續(xù)整數作為屬性),瀏覽器引擎可以進行優(yōu)化,在內存中使用更高效的布局。這對Map來說是不可能的。對這兩個類型而言,查找速度不會隨著鍵/值對數量增加而線性增加。如果代碼涉及大量查找操作,那么某些情況下可能選擇Object更好一些。

4.刪除性能

使用delete刪除Object屬性的性能一直以來飽受詬病,目前在很多瀏覽器中仍然如此。為此,出現了一些偽刪除對象屬性的操作,包括把屬性值設置為undefined或null。但很多時候,這都是一種討厭的或不適宜的折中。而對大多數瀏覽器引擎來說,Map的delete()操作都比插入和查找更快。如果代碼涉及大量刪除操作,那么毫無疑問應該選擇Map

三、weakMap

ECMAScript 6新增的“弱映射”(WeakMap)是一種新的集合類型,為這門語言帶來了增強的鍵/值對存儲機制。WeakMap是Map的“兄弟”類型,其API也是Map的子集。WeakMap中的“weak”(弱),描述的是JavaScript垃圾回收程序對待“弱映射”中鍵的方式。

weakcMap 的弱
WeakMap中“weak”表示弱映射的鍵是“弱弱地拿著”的。意思就是,這些鍵不屬于正式的引用,不會阻止垃圾回收,當瀏覽器需要回收內存時這些鍵是可能會被回收的。但要注意的是,弱映射中值的引用可不是“弱弱地拿著”的。只要鍵存在,鍵/值對就會存在于映射中,并被當作對值的引用,因此就不會被當作垃圾回收。

//會被回收
const wm = new WeakMap();
wm.set({}, "val");

//不會被回收
const wm2 = new WeakMap();
const container = {
 key: {}
};
wm2.set(container.key, "val");
function removeReference() {
 container.key = null;
}

在vm中,set()方法初始化了一個新對象并將它用作一個字符串的鍵。因為沒有指向這個對象的其他引用,所以當這行代碼執(zhí)行完成后,這個對象鍵就會被當作垃圾回收。然后,這個鍵/值對就從弱映射中消失了,使其成為一個空映射。在這個例子中,因為值也沒有被引用,所以這對鍵/值被破壞以后,值本身也會成為垃圾回收的目標。
而在vm1中,container對象維護著一個對弱映射鍵的引用,因此這個對象鍵不會成為垃圾回收的目標。不過,如果調用了removeReference(),就會摧毀鍵對象的最后一個引用,垃圾回收程序就可以把這個鍵/值對清理掉。

weakMap使用
WeakMap的初始化與map并沒有什么太大的差別,需要注意的是weakMap只能使用object類型的鍵,這與weakMap的作用是息息相關的

const key1 = {id: 1},
 key2 = {id: 2},
 key3 = {id: 3};
// 使用嵌套數組初始化弱映射
const wm1 = new WeakMap([
 [key1, "val1"],
 [key2, "val2"],
 [key3, "val3"]
]);
alert(wm.get(key1)); // val1
alert(wm.get(key2)); // val2
alert(wm.get(key3)); // val3

// 原始值可以先包裝成對象再用作鍵
const stringKey = new String("key1");
const wm3 = new WeakMap([
 stringKey, "val1"
]);
alert(wm3.get(stringKey)); // "val1"

四、使用weakMap的場景

WeakMap實例與現有JavaScript對象有著很大不同,可能一時不容易說清楚應該怎么使用它。這個問題沒有唯一的答案,但已經出現了很多相關策略。

DOM節(jié)點元數據
因為WeakMap實例不會妨礙垃圾回收,所以非常適合保存關聯(lián)元數據。如以下代碼所示,下面的例子使用的是WeakMap,當節(jié)點從DOM樹中被刪除后,垃圾回收程序就可以立即釋放其內存(假設沒有其他地方引用這個對象):

const wm = new WeakMap();
const loginButton = document.querySelector('#login');
// 給這個節(jié)點關聯(lián)一些元數據
wm.set(loginButton, {disabled: true});

總結

以上就是object、map、weakmap的相關使用和區(qū)別了。其實在大多數情況下,object和map使用是沒有什么區(qū)別的,但是如果你需要大量的插入和查找刪除,或者需要使用對象作為鍵值的話,使用map是比較優(yōu)的選擇。另外weakMap在使用的對象可能會被動態(tài)刪除的情況下,比map具有優(yōu)化內存的優(yōu)勢。

以上就是JavaScript中Object、map、weakmap的區(qū)別分析的詳細內容,更多關于JavaScript中Object、map、weakmap區(qū)別的資料請關注腳本之家其它相關文章!

相關文章

  • js實現網頁定位導航功能

    js實現網頁定位導航功能

    這篇文章主要為大家詳細介紹了js實現網頁定位導航功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-03-03
  • JavaScript 判斷瀏覽器是否是IE

    JavaScript 判斷瀏覽器是否是IE

    這篇文章主要介紹了JavaScript 判斷瀏覽器是否是IE,幫助大家更好的理解和學習前端知識,感興趣的朋友可以了解下
    2021-02-02
  • 通過js將26個英文字母按順序依次排列方式

    通過js將26個英文字母按順序依次排列方式

    這篇文章主要介紹了通過js將26個英文字母按順序依次排列方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • 教你使用webpack打包編譯TypeScript代碼

    教你使用webpack打包編譯TypeScript代碼

    TypeScript同樣也可以結合構建工具一起使用,下邊以webpack為例介紹一下如何結合構建工具使用TypeScript,本文分步驟給大家介紹的非常詳細,需要的朋友參考下吧
    2021-06-06
  • DD_belatedPNG,IE6下PNG透明解決方案(國外)

    DD_belatedPNG,IE6下PNG透明解決方案(國外)

    今天介紹DD_belatedPNG,只需要一個理由,就是它支持backgrond-position與background-repeat.這是其他js插件不具備的.
    2010-12-12
  • 一個簡單的全屏圖片上下打開顯示網頁效果示例

    一個簡單的全屏圖片上下打開顯示網頁效果示例

    這是一個簡單的全屏圖片上下打開顯示網頁效果,源碼如下,喜歡的朋友可以練練手
    2014-07-07
  • JavaScript中l(wèi)et與const命令使用

    JavaScript中l(wèi)et與const命令使用

    本文主要介紹了JavaScript中l(wèi)et與const命令使用,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2022-07-07
  • js實現簡單的手風琴效果

    js實現簡單的手風琴效果

    本文主要介紹了js實現簡單手風琴效果的實例,具有很好的參考價值,下面跟著小編一起來看下吧
    2017-02-02
  • js獲取多個tagname的節(jié)點數組

    js獲取多個tagname的節(jié)點數組

    寫了個獲取多個tagname節(jié)點集合的小方法。類似于jQuery的$(‘iput,select,textarea’,'#form’)的效果,返回是按節(jié)點在原有文檔流中的順序返回的
    2013-09-09
  • 重置Redux的狀態(tài)數據的方法實現

    重置Redux的狀態(tài)數據的方法實現

    這篇文章主要介紹了重置Redux的狀態(tài)數據的方法實現,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-11-11

最新評論