ES6學(xué)習(xí)筆記之map、set與數(shù)組、對(duì)象的對(duì)比
前言
ES5中的數(shù)據(jù)結(jié)構(gòu),主要是用Array和Object。在ES6中主要新增了Set和Map數(shù)據(jù)結(jié)構(gòu)。到目前為止,常用的數(shù)據(jù)結(jié)構(gòu)有四種Array、Object、Set、Map。下面話不多說了,來一起看看詳細(xì)的介紹吧。
// 數(shù)據(jù)結(jié)構(gòu)橫向?qū)Ρ?,增,查,改,刪
1、map和數(shù)組對(duì)比
{ let map=new Map(); let array=[]; /**增**/ map.set('t',1); array.push({t:1}); console.info('map-array',map,array); /**查**/ let map_exist=map.has('t'); let array_exist=array.find(item=>item.t); console.info('map-array',map_exist,array_exist); /**改**/ map.set('t',2); array.forEach(item=>item.t?item.t=2:''); console.info('map-array-modify',map,array); /**刪**/ map.delete('t'); let index=array.findIndex(item=>item.t); array.splice(index,1); console.info('map-array-empty',map,array); }
2、set和數(shù)組對(duì)比
{ let set=new Set(); let array=[]; // 增 set.add({t:1}); array.push({t:1}); console.info('set-array',set,array); // 查 let set_exist=set.has({t:1}); let array_exist=array.find(item=>item.t); console.info('set-array',set_exist,array_exist); // 改 set.forEach(item=>item.t?item.t=2:''); array.forEach(item=>item.t?item.t=2:''); console.info('set-array-modify',set,array); // 刪 set.forEach(item=>item.t?set.delete(item):''); let index=array.findIndex(item=>item.t); array.splice(index,1); console.info('set-array-empty',set,array); }
3、map、set和Object對(duì)比
{ let item={t:1}; let map=new Map(); let set=new Set(); let obj={}; // 增 map.set('t',1); set.add(item); obj['t']=1; console.info('map-set-obj',obj,map,set); // 查 console.info({ map_exist:map.has('t'), set_exist:set.has(item), obj_exist:'t' in obj }) // 改 map.set('t',2); item.t=2; obj['t']=2; console.info('map-set-obj-modify',obj,map,set); // 刪除 map.delete('t'); set.delete(item); delete obj['t']; console.info('map-set-obj-empty',obj,map,set); }
通過對(duì)比可以發(fā)現(xiàn),能使用map的優(yōu)先使用,不使用數(shù)組,
考慮數(shù)據(jù)的唯一性,考慮使用set,不使用Objet
以后的開發(fā)中可以優(yōu)先考慮使用map和set了,并且可以放棄數(shù)組和object了
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
stream.js 一個(gè)很小、完全獨(dú)立的Javascript類庫
stream.js 是一個(gè)很小、完全獨(dú)立的Javascript類庫,它為你提供了一個(gè)新的Javascript數(shù)據(jù)結(jié)構(gòu):streams2011-10-10JS實(shí)現(xiàn)省市縣三級(jí)下拉聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)省市縣三級(jí)下拉聯(lián)動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-04-04JavaScript+Canvas實(shí)現(xiàn)繪制音頻可視化波形圖
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript和Canvas實(shí)現(xiàn)繪制音頻可視化波形圖,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02JS+CSS實(shí)現(xiàn)滑動(dòng)切換tab菜單效果
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)滑動(dòng)切換tab菜單效果,涉及javascript鼠標(biāo)事件及頁面元素樣式的動(dòng)態(tài)切換效果實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-08-08JS+CSS實(shí)現(xiàn)精美的二級(jí)導(dǎo)航效果代碼
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)精美的二級(jí)導(dǎo)航效果代碼,涉及JavaScript基于鼠標(biāo)事件動(dòng)態(tài)變換元素樣式的技巧,非常簡單實(shí)用,需要的朋友可以參考下2015-09-09layui的表單驗(yàn)證支持ajax判斷用戶名是否重復(fù)的實(shí)例
今天小編就為大家分享一篇layui的表單驗(yàn)證支持ajax判斷用戶名是否重復(fù)的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09javascript 文章截取部分無損html顯示實(shí)現(xiàn)代碼
近在做一些內(nèi)容搜索的工作,搜索出來的內(nèi)容為html格式,列表部分需要顯示每項(xiàng)內(nèi)容的一部分。2010-05-05微信小程序跳轉(zhuǎn)外部鏈接的詳細(xì)實(shí)現(xiàn)方法
寫這個(gè)是因?yàn)樽罱〕绦虻囊粋€(gè)需求需要從小程序跳轉(zhuǎn)到客戶的官網(wǎng),或者其他外部報(bào)名鏈接,下面這篇文章主要給大家介紹了關(guān)于微信小程序跳轉(zhuǎn)外部鏈接的詳細(xì)實(shí)現(xiàn)方法,需要的朋友可以參考下2022-10-10