類型“unknown”上不存在屬性“foreach”_JavaScript紅寶書第四版精簡解析系列--映射Map數據類型...

fdbdfff47ad3d1ea495b640ca99e7031.png

Map數據類型

顧名思義

也就是映射類型,包含一個[[Entries]]私有特性

我們可以使用一個二維數組作為初始值

 const map1 = new Map([[1, 1],[2, 2],[3, 3],]);
console.log("Map數據類型====>", map1);

當然也可以使用迭代器進行初始化

const map2 = new Map({[Symbol.iterator]: function* () {yield* [[1, 1],[2, 2],[3, 3],];},});console.log("Map數據類型====>", map2);

我們來看一下Map數據類型內部結構(著重看下私有特性)

550d6feaa40ddd1ad7276f255dc47766.png

我們可以看到,Map數據類型包含了一個[[Entries]]私有特性

這個特性中可以看到一個清晰的映射關系

而在Map數據類型的原型上還掛在了很多方法

諸如 get set delete clear等操作方法

還有一個關于size屬性的get訪問器特性

另外,我們還可以清晰地看到

Map數據類型包含著迭代器屬性,且迭代方法默認為entries()

我們首先來學習一下關于Map的操作方法


.set()
  const emptyMap = new Map();console.log("emptyMap====>", emptyMap);emptyMap.set('name', 'shang')console.log("set結果====>", emptyMap);

4256d141733762ee79139b6867c6e1bf.png
新增映射關系

由于set方法會返回被操作的Map數據,所以可以鏈式調用

 emptyMap.set("gender", "male").set("age", 17);console.log("set結果====>", emptyMap);

b4fe27cc6108a53ca012e155bd52398f.png
可以鏈式調用
.get()
console.log('get方法====>', emptyMap.get('name')

ee35ade2324f1a8edb791dd8d926e3f1.png
通過鍵獲取映射值
.has()
 console.log('has方法====>', emptyMap.has('name'))

7bbe8d8186b5019100e2a1962c2905fe.png
通過has方法檢驗映射是否存在
.delete()
emptyMap.delete('name')
console.log("delete結果====>", emptyMap);

9ebd2e8486c33f2202c77ee2b57278be.png
使用delete刪除一個映射
.clear()
 emptyMap.clear()console.log("emptyMap的size====>", emptyMap.size);

6158cf8b693530832e48ad81375920b2.png
clear后,所有映射關系都被清除了

Map數據類型可以接受各種類型的作為鍵

這里我們測試一下,function, Symbol 以及Object類型

 const functionKey = function() {};const symbolKey = Symbol()const objectKey = new Object()emptyMap.set(functionKey, functionKey).set(symbolKey, symbolKey).set(objectKey, objectKey)console.log('各種特殊鍵值對===>', emptyMap)

77a52bb02f0d00918e65cdf1b7de3e41.png

復雜類型作為鍵值時,Map類型并不保存快照,而是保存指針

這句話聽起來挺唬人

but其實理解起來很簡單

我舉個例子

const emptyArr = [];
const emptyObj = {};
emptyMap.set(emptyArr, emptyObj);
emptyArr.push("1");
emptyObj.name = "shang";
console.log("復雜類型特殊鍵值對===>", emptyMap);
console.log("復雜類型特殊值===>", emptyMap.get(emptyArr));

8d437d3906f0d4e2bbd4cfb33c11023a.png

順序維護和迭代方法

Map會自動維護關于元素的順序

而且從上面Map數據類型原型鏈我們可以得知

Map數據類型包含一個默認方法為entries的迭代器

console.log('Map數據類型默認迭代器', emptyMap.entries === emptyMap[Symbol.iterator])

946aa4c657c80d862b7d8db46e58b2f4.png
forof
for (const [key, value] of emptyMap) {console.log("forof映射元素分別為===>", key, value);
}

64b1b2195aac988a8be236f758633798.png
Map可以使用forof方法展開迭代
拓展運算符
console.log("拓展運算符用于Map數據類型", [...emptyMap]);

b65ae6a044dd0bd397611d384b514716.png
拓展運算符與forof公用迭代器
forEach方法
emptyMap.forEach((value, key) => {console.log("forEach映射元素分別為===>", key, value);
});

a3fa57cb07837df326b348e2df2a0e09.png

Map關于forEach的迭代效果與數組類似,value在前,key在后


Map使用values & keys 返回映射的迭代器

keys返回映射關于key的迭代器
可以用于forof 拓展運算符 Map Set等等
// Map使用values & keys 返回映射的迭代器
const keysIterator = emptyMap.keys();
console.log("Map的keys的迭代器===>", keysIterator);
for (const iterator of keysIterator) {console.log("keysIterator===>", iterator);
}

da1a6d55659131b762ea4d97e598eacc.png
values返回映射關于value的迭代器
可以用于forof 拓展運算符 Map Set等等
const valuesIterator = emptyMap.values();
console.log("Map的values的迭代器===>", valuesIterator);
for (const iterator of valuesIterator) {console.log("valuesIterator===>", iterator);
}

8cca4c9a36861be22eb4d23da8c88951.png

Map相較于Object有何優缺點???

數據類型占用內存插入數據刪除數據查數據
Map同等數據量比Object少占50%內存插入更快,更省性能刪除更快,更省性能×
Object×××有線性優化,查找更快,數據量越大查找優勢越明顯

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/534857.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/534857.shtml
英文地址,請注明出處:http://en.pswp.cn/news/534857.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

java面試筆試題整理(學習java基礎理論最好的資料)_2020Java筆試/面試題(持續收集整理更新)...

說明:java本篇用于收集知識點方便隨時鞏固,持續更新與糾錯。數組關于JDK版本,若無特殊說明,默認為JDK 1.8,。緩存關于JVM版本,若無特殊說明,默認為 HotSpot。安全目錄數據結構1、Java 基礎1.1 Java中的基本…

JAVA服務器沒回應_Java如何面對無服務器的挑戰?

這是來自jaxcenter組織的一個討論,談論了Java在無服務器浪潮沖擊下面臨的機會和挑戰。下面摘錄主要部分:Spring推動者Pivotal有一個名為 Riff的函數即服務平臺,它是一個開源的、Apache 2許可的、函數即服務平臺,基于Kubernetes和剛…

使用系統調用pipe建立一條管道線_使用Unixbench對服務器綜合性能打分及測試結果...

Unixbench是一個類unix系統(Unix,BSD,Linux)下的性能測試工具,一個開源工具,被廣泛用與測試linux系統主機的性能,簡稱UB。Unixbench的主要測試項目有:系統調用、讀寫、進程、圖形化測試、2D、3D、管道、運算…

java.io.file.sync_Java(25)IO流和File類

IO流File類File類講IO流之前先來講以下File類。Java的標準庫Java.io提供了File類來操作文件和目錄。操作可以有:新建、刪除、重命名等,但是不能訪問文件本身的內容,如果想要訪問,需要使用IO流。新建File對象:package day01;import…

val_loss突然變很大_女朋友突然變得很冷淡是怎么回事?該怎么辦

原本和女朋友戀愛之后她一直都表現得比較比較熱情,但是最近這段時間她突然對自己冷淡起來,很多男生可能就會很疑惑:女朋友突然變得很冷淡是怎么回事?該怎么辦呢?一、女朋友突然變得很冷淡原因不管怎么說,女…

進程調度rr算法java實現_Java實現進程調度算法(二) RR(時間片輪轉)

一、概述因為這次os作業對用戶在控制臺的輸入輸出有要求,所以我花了挺多的代碼來完善控制臺的顯示。也因為我這次要實現多個類似算法,所以將一些共性單獨提取出來作為一個類。如果只想要和算法有關的核心代碼,看RR類的calc()即可。實現思路&a…

python全局變量global線程安全_對python多線程與global變量詳解

今天早上起來寫爬蟲,基本框架已經搭好,添加多線程爬取功能時,發現出錯:比如在下載文件的url列表中加入200個url,開啟50個線程。我的爬蟲…竟然將50個url爬取并全部命名為0.html,也就是說,最后的…

python123第五章_python 3.5學習筆記(第五章)

本章內容1、什么是模塊2、模塊的導入方法3、搜索路徑4、重要標準庫一、什么是模塊1、模塊本質上是一個以.py 結尾的python文件,包含了python對象定義和python語句。2、模塊是用來從邏輯上組織python代碼(定義變量、函數、類、邏輯等)以實現某種功能3、包&#xff1a…

string 長度_String源碼解析

本章源碼分析基于JDK1.7實現的接口String類被final修飾詞修飾,代表不可修改的特性,它實現了三個接口,Serializable是序列化接口,Compareble是排序接口,Char是字符序列接口。主要成員變量char[]:String通過c…

將你一張表的值覆蓋_山西聯通攜手華為完成長風商務區宏微協同,立體覆蓋,打造5G精品網絡...

近日,中國聯通山西分公司(以下簡稱“山西聯通”)在太原長風商務區繼5G CA超高速率升級之后,又針對長風商務區兩層活動區域進行了5G宏微協同的立體覆蓋,實現了該區域5G網絡的連續部署。長風商務區建筑結構設計新穎,占地面積3.06平方…

16速 java_不停歇的 Java 即將發布 JDK 16,新特性速覽!

之前在 JDK 15 中預覽的密封類和接口限制其余類和接口能夠擴展或實現它們。該計劃的目標包括,容許類或接口的做者控制負責實現它的代碼,提供比訪問修飾符更聲明性的方式來限制超類的使用,以及經過提供模式分析的基礎來支持模式匹配的將來方向…

局域網內文件傳輸速度_詳解蒲公英路由器組網 實現文件共享

蒲公英路由器,除了具備普通路由器的功能之外,如圖:最大的特色是可以實現智能組網:最大的特色是可以實現智能組網:采用全新自主研發的Cloud VPN技術替代傳統VPN,基于SD-WAN智能組網方案,快速組建…

java emoji顯示亂碼_Java 解決Emoji表情過濾問題

Emoji表情從三方數據中獲取沒有過濾,導致存入DB的時候報錯。原因:UTF-8編碼有可能是兩個、三個、四個字節。Emoji表情是4個字節,而Mysql的utf8編碼最多3個字節,所以數據插不進去。方法1.將已經建好的表也轉換成utf8mb42&#xff0…

mongotemplate中save拋出異常_異常處理的三個好習慣 | Python 工匠

文 | piglei 編輯 | EarlGrey推薦 | 編程派(微信ID:codingpy)前言如果你用 Python 編程,那么你就無法避開異常,因為異常在這門語言里無處不在。打個比方,當你在腳本執行時按 ctrlc 退出,解釋器就會產生一個 KeyboardI…

java 百度網盤上傳_使用pcs api往免費的百度網盤上傳下載文件的方法

百度個人云盤空間大,完全免費,而且提供了pcs api供調用操作文件,在平時的項目里往里面保存一些文件是很實用的。環境準備:開通讀寫網盤的權限及獲取access_token:http://blog.csdn.net/langyuezhang/article/details/47206621百度…

python縮進教學_Python縮進和選擇學習

縮進Python最具特色的是用縮進來標明成塊的代碼。我下面以if選擇結構來舉例。if后面跟隨條件,如果條件成立,則執行歸屬于if的一個代碼塊。先看C語言的表達方式(注意,這是C,不是Python!)if ( i > 0 ){ x 1; y 2;}如果i …

php如何新建xml文件,PHP中的生成XML文件的4種方法分享

生成如下XML串Xml代碼title1content12009-10-11title2content22009-11-11方法I.【直接生成字符串】使用純粹的PHP代碼生成字符串,并把這個字符串寫入一個以XML為后綴的文件。這是最原始的生成XML的方法,不過有效!$data_array array(array(ti…

組態王能直接讀取儀表數據嗎_液晶多功能網絡電力儀表PD800H

液晶多功能網絡電力儀表PD800H-H44三相三線多功用電力表面,一般也被稱作網絡電力表面,它是一種數字化的監控設備,其功用集成了電量測量,情況監控,遠程通訊為一體,作業原理上選用了現代核算機技術和數字信號…

python程序顯示自己的版權_手把手教你Pycharm皮膚主題及個性化設置,python程序員必備-Go語言中文社區...

1.設置IDE皮膚主題File -> Settings -> Appearance -> Theme -> 選擇“Alloy.IDEA Theme”根據自己的喜好設置字體大小,以及樣式。2.修改字體大小File -> Settings > Editor -> Colors & Fonts -> Font -> Size -> 設置為“14”3…

java多線程activemq,多線程JMS客戶端ActiveMQ

我正在使用以下代碼創建多個JMS會話,以供多個使用者使用消息。我的問題是代碼以單線程方式運行。即使消息存在于隊列中,第二個線程也無法接收任何內容,而是繼續輪詢。同時,第一個線程完成對第一批的處理,然后返回并使用…