javascript?ES6中set集合、map集合使用方法詳解與源碼實(shí)例
set與map理解
ES6中新增,set集合和map集合就是一種數(shù)據(jù)的存儲(chǔ)結(jié)構(gòu)(在ES6之前數(shù)據(jù)存儲(chǔ)結(jié)構(gòu)只有array,object),不同的場(chǎng)景使用不同的集合去存儲(chǔ)數(shù)據(jù)
set集合
Set 對(duì)象允許你存儲(chǔ)任何類(lèi)型的唯一值,無(wú)論是原始值或者是對(duì)象引用。
set集合語(yǔ)法:
//創(chuàng)建一個(gè)set集合,傳參為一個(gè)可迭代的對(duì)象 const s1 = new Set(iterable);
API
| 名稱(chēng) | 類(lèi)型 | 簡(jiǎn)介 |
|---|---|---|
| Set.add() | 原型方法 | 添加數(shù)據(jù) |
| Set.has() | 原型方法 | 判斷是否存在一個(gè)數(shù)據(jù) |
| Set.delete() | 原型方法 | 刪除數(shù)據(jù) |
| Set.clear() | 原型方法 | 清空集合 |
| Set.size屬性 | 屬性 | 集合長(zhǎng)度 |
| for of | 原型方法 | 遍歷 |
set源碼例子:
// 1.add() 往創(chuàng)建好的集合中添加數(shù)據(jù)的
const s1 = new Set();
s1.add(1)
s1.add(2)
s1.add(3)
s1.add(4)
s1.add(1) //無(wú)效添加,因?yàn)閿?shù)據(jù)重復(fù)
console.log(s1)
// 2.has() 判斷數(shù)據(jù)是否存在
console.log(s1.has(1))
console.log(s1.has(10))
// 3.delete() 返回是否刪除成功
s1.delete(1)
console.log(s1)
console.log(s1.delete(10))
// 4.clear() 清空集合
s1.clear()
console.log(s1)
// 5.size屬性 只能讀,不能改
console.log(s1.size)
// 6.遍歷:for of,因?yàn)槭且粋€(gè)可迭代的對(duì)象
for(const item of s1){
console.log(item)
}
// 重寫(xiě)的實(shí)例方法 forEach
s1.forEach((item, index, s) => {
// index 不是下標(biāo),set集合沒(méi)有下標(biāo)
// forEach中的第一個(gè)參數(shù)的值和第二個(gè)參數(shù)的值是相同的,都表示set中的每一項(xiàng)數(shù)據(jù)
console.log(item, index, s)
})
使用場(chǎng)景
//數(shù)組去重
const arr = [1,1,22,22,3,1,88,88,65,123,444,65];
const s = new Set(arr);
console.log([...s]);
//或者一句話搞定
const result = [...new Set(arr)];
console.log(result);//[1,22,3,88,65,123,444,65]
// 兩個(gè)數(shù)組的交集,并集,差集,結(jié)果得到一個(gè)新的數(shù)組
const arr1 = [12,34,55,33,11,33,5,12];
const arr2 = [55,34,11,78,10,19,88,88,99,99];
// 用set完成
// 交集:你有我也有的數(shù)組元素 組成一個(gè)新數(shù)組
const cross = [...new Set(arr1)].filter(item => arr2.indexOf(item) >= 0);
console.log(cross);//[]
// 并集:數(shù)組合并去重之后的新數(shù)組
const result = [...new Set([...arr1,...arr2])];
console.log(result);
// 差集:你有我沒(méi)有,我有你沒(méi)有的數(shù)組元素 組成一個(gè)新數(shù)組
let arr4 = result.filter(item=>{
// 判斷arr1里面存在并且arr2不存在的數(shù)據(jù) 和 arr1里面不存在并且arr2里存在的數(shù)據(jù)
return arr1.includes(item) && !arr2.includes(item) || !arr1.includes(item) && arr2.includes(item)
})
console.log(arr4) //[12, 33, 5, 78, 10, 19, 88, 99]
map集合(映射)
Map 對(duì)象保存鍵值對(duì)。任何值(對(duì)象或者原始值) 都可以作為一個(gè)鍵或一個(gè)值。
map集合語(yǔ)法:
let swk=new Map() console.log(swk);//Map(0)
API
| 名稱(chēng) | 類(lèi)型 | 簡(jiǎn)介 |
|---|---|---|
| Map.set(key,value) | 原型方法 | 添加數(shù)據(jù) |
| Map.get(key) | 原型方法 | 獲取數(shù)據(jù) |
| Map.has(key) | 原型方法 | 判斷是否存在一個(gè)數(shù)據(jù) |
| Map.delete(key) | 原型方法 | 刪除數(shù)據(jù) |
| Map.clear() | 原型方法 | 清空集合 |
| Map.size屬性 | 原型方法 | 集合長(zhǎng)度 |
| for of | 原型方法 | 遍歷 |
map集合源碼例子:
let swk=new Map();
console.log(swk);
// 1. 新增map元素
// Map.set(key,value) 設(shè)置Map對(duì)象的鍵值對(duì)(鍵名,鍵值) 返回當(dāng)前對(duì)象
swk.set('uname', '孫悟空');
swk.set('age', 600);
swk.set('master', '唐僧');
swk.set('weapon', '金箍棒');
console.log(swk); //Map(4) {'uname' => '孫悟空', 'age' => 600, 'master' => '唐僧', 'weapon' => '金箍棒'}
swk.set('age', 601);
console.log(swk);
// 鍵不存在,則添加一項(xiàng)
// 鍵存在,則修改
// 2. 獲取map元素
// Map.get(key)返回key值對(duì)應(yīng)的value 如果key不存在則返回undefined
console.log(swk.get('uname')); //孫悟空
console.log(swk.get({})); //undefined
// 3. 判斷元素是否存在 has 返回布爾值
console.log(swk.has('uname')); //true
console.log(swk.has({})); //false
// 4. 刪除映射元素
swk.delete('weapon');
console.log(swk); //Map(3) {'uname' => '孫悟空', 'age' => 600, 'master' => '唐僧'}
//5. 清空映射元素
// swk.clear();
// console.log(swk); //Map(0) {size: 0}
// 6. 映射元素長(zhǎng)度
console.log(swk.size); //3
// 7. 可以使用for of 循環(huán)
for (let [key, value] of swk) {
console.log(key, value);
for (let item in value) {
console.log(value[item])
}
}
console.log('=====forEach=====');
// 8. 可以使用forEach 遍歷
swk.forEach((item, index, map) => {
console.log(index); //uname age master
console.log('==========');
console.log(item); // 孫悟空 60 唐僧
console.log('==========');
console.log(map);
console.log('==========');
})
Maps 和 Objects 的區(qū)別
- 一個(gè) Object 的鍵只能是字符串或者 Symbols,但一個(gè) Map 的鍵可以是任意值(字符串,對(duì)下個(gè),函數(shù),NaN)。
- Map 中的鍵值是有序的,而添加到對(duì)象中的鍵則不是。
- Map 的鍵值對(duì)個(gè)數(shù)可以從 size 屬性獲取,而 Object 的鍵值對(duì)個(gè)數(shù)只能手動(dòng)計(jì)算。
- Object 都有自己的原型,原型鏈上的鍵名有可能和你自己在對(duì)象上的設(shè)置的鍵名產(chǎn)生沖突。
本文主要講解了javascript ES6中set集合,map集合使用方法詳解與源碼實(shí)例,更多關(guān)于javascript ES6的新內(nèi)容請(qǐng)查看下面的相關(guān)鏈接
相關(guān)文章
JS+CSS實(shí)現(xiàn)大氣清新的滑動(dòng)菜單效果代碼
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)大氣清新的滑動(dòng)菜單效果代碼,通過(guò)鼠標(biāo)事件結(jié)合定時(shí)函數(shù)實(shí)現(xiàn)頁(yè)面元素動(dòng)態(tài)變換的效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
火狐和ie下獲取javascript 獲取event的方法(推薦)
下面小編就為大家?guī)?lái)一篇火狐和ie下獲取javascript 獲取event的方法(推薦)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
使用JavaScrip模擬實(shí)現(xiàn)仿京東搜索框功能
使用js模擬實(shí)現(xiàn)京東的搜索框,主要用了js中的onfocus(注冊(cè)焦點(diǎn)事件),onblur(失去焦點(diǎn)的事件);本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2019-10-10
JS前端組件設(shè)計(jì)以業(yè)務(wù)為導(dǎo)向?qū)嵺`思考
這篇文章主要為大家介紹了JS前端組件設(shè)計(jì)以業(yè)務(wù)為導(dǎo)向?qū)嵺`思考,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03
JavaScript Base64 作為文件上傳的實(shí)例代碼解析
這篇文章主要介紹了JavaScript Base64 作為文件上傳的實(shí)例代碼解析,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-02-02
JavaScript日期庫(kù)date-fn.js使用方法解析
這篇文章主要介紹了JavaScript日期庫(kù)date-fn.js使用方法解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09

