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é)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
Javascript學(xué)習(xí)筆記-詳解in運(yùn)算符
in運(yùn)算符是javascript語(yǔ)言中比較特殊的一個(gè),可以單獨(dú)使用作為判斷運(yùn)算符,也常被用于for...in循環(huán)中遍歷對(duì)象屬性2011-09-09
微信小程序picker組件簡(jiǎn)單用法示例【附demo源碼下載】
這篇文章主要介紹了微信小程序picker組件簡(jiǎn)單用法,結(jié)合實(shí)例形式詳細(xì)分析了picker組件的功能、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-12-12
javascript面向?qū)ο蟪绦蛟O(shè)計(jì)(一)
這篇文章主要介紹了javascript面向?qū)ο蟪绦蛟O(shè)計(jì),分享給大家一段代碼,注釋里講解的非常詳細(xì),有助于我們理解面向?qū)ο?,這里推薦給大家。2015-01-01
JS在一定時(shí)間內(nèi)跳轉(zhuǎn)頁(yè)面及各種刷新頁(yè)面的實(shí)現(xiàn)方法
這篇文章主要介紹了JS在一定時(shí)間內(nèi)跳轉(zhuǎn)頁(yè)面及各種刷新頁(yè)面的實(shí)現(xiàn)方法的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-05-05
JS 添加網(wǎng)頁(yè)桌面快捷方式的代碼詳細(xì)整理
如何添加桌面快捷?很多網(wǎng)友都有這個(gè)疑問;JS 點(diǎn)擊添加網(wǎng)頁(yè)桌面快捷方式的代碼,需要的朋友可以參考下2012-12-12
js實(shí)現(xiàn)點(diǎn)贊按鈕功能的實(shí)例代碼
這篇文章主要介紹了js實(shí)現(xiàn)點(diǎn)贊按鈕功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的工作或?qū)W習(xí)具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03
TypeScript快速上手語(yǔ)法及結(jié)合vue3用法詳解
TypeScript是一種由微軟開發(fā)的自由開源的編程語(yǔ)言,主要提供了類型系統(tǒng)和對(duì)ES6的支持,下面這篇文章主要給大家介紹了關(guān)于TypeScript快速上手語(yǔ)法及結(jié)合vue3用法的相關(guān)資料,需要的朋友可以參考下2024-02-02
js操作時(shí)間(年-月-日 時(shí)-分-秒 星期幾)
js操作時(shí)間(年-月-日 時(shí)-分-秒 星期幾),需要的朋友可以參考下。2010-06-06

