JavaScript字典與集合詳解
字典
什么是字典
說(shuō)到字典,第一時(shí)間想到的應(yīng)該就是新華字典,實(shí)際上,這跟編程中的字典類似,兩者都有一個(gè)特點(diǎn),就是一一對(duì)應(yīng)(yi yi dui ying),或者說(shuō)是映射。
字典通常以**【鍵,值】** 對(duì)的形成存儲(chǔ),因?yàn)槭且枣I值對(duì)的形式存儲(chǔ),更方便通過(guò)key
來(lái)獲取value
比如存儲(chǔ)用戶信息:
{ 'username': '一碗周', 'age': 18 }
JavaScript中的字典
在JavaScript中,對(duì)象好像擁有字典的所有特點(diǎn),但是在ES6中新增Map
,用來(lái)表示字典,這里的map不是翻譯成地圖,而是映射。
示例代碼如下:
// 創(chuàng)建一個(gè)字典 const map = new Map() // 往字典中存儲(chǔ)信息 map.set('username', '一碗周') map.set('age', 18) console.log(map) // Map(2) { 'username' => '一碗周', 'age' => 18 }
字典的應(yīng)用
在學(xué)習(xí)鏈表的時(shí)候我們做了一個(gè)算法題,是力扣中題號(hào)為20的一道題,它的題目:有效的括號(hào),題目大意就是判斷給定字符串中的括號(hào)是否匹配,匹配返回true
,否則返回false
。
解題思路如下:
- 判斷字符串的長(zhǎng)度是否為偶數(shù),不為偶數(shù)直接返回
false
,因?yàn)槔ㄌ?hào)都是成對(duì)出現(xiàn)的; - 新建一個(gè)棧;
- 遍歷字符串,遍歷到每一項(xiàng)時(shí)如果時(shí)左括號(hào),將其壓入棧;如果是右括號(hào),與棧頂對(duì)比,如果相匹配則出棧,不匹配則返回
false
。
我們?cè)瓉?lái)的解法:
/** * @param {string} s * @return {boolean} */ var isValid = function(s) { if (s.length % 2 !== 0) return false const stack = [] for(let i = 0; i<s.length; i++) { const c = s[i] // 記錄當(dāng)前項(xiàng) if (c === '(' || c === '[' || c==='{') { stack.push(c) } else { const t = stack[stack.length - 1] // 獲取棧頂元素 if ( (t === '(' && c === ')') || (t === '[' && c === ']') || (t === '{' && c === '}') ) { stack.pop() } else { return false } } } // 如果為0表示全部匹配,有剩余則表示不匹配 return stack.length === 0 };
在上面的代碼中,條件判斷中的判斷條件非常的長(zhǎng),這時(shí)我們就可以利用字典來(lái)優(yōu)化這個(gè)寫(xiě)法,
實(shí)現(xiàn)代碼如下:
/** * @param {string} s * @return {boolean} */ var isValid = function(s) { // 1. 判斷字符串的長(zhǎng)度是否為偶數(shù),不為偶數(shù)直接返回false,因?yàn)槔ㄌ?hào)都是成對(duì)出現(xiàn)的; if (s.length % 2 !== 0) return false const stack = [] const map = new Map() // 將所有括號(hào)的對(duì)應(yīng)關(guān)系存儲(chǔ)在字典中 map.set('(', ')') map.set('[', ']') map.set('{', '}') for(let i = 0; i<s.length; i++) { const c = s[i] // 記錄當(dāng)前項(xiàng) // 判斷是否存在 key 也就是左括號(hào),如果存儲(chǔ),將左括號(hào)存儲(chǔ)在棧中 if (map.has(c)) { stack.push(c) } else { const t = stack[stack.length - 1] // 獲取棧頂元素 if (map.get(t) === c) { // 獲取最后一個(gè)左括號(hào),判斷是否與右括號(hào)匹配 stack.pop() // 出棧 } else { return false } } } // 如果為0表示全部匹配,有剩余則表示不匹配 return stack.length === 0 };
在這個(gè)代碼中,我們優(yōu)化了if
語(yǔ)句中的判斷條件。
集合
什么是集合
集合是由一組無(wú)序且不重復(fù)的元素構(gòu)成。我們可以將集合看成一種特殊的數(shù)組,它的特殊之處就是無(wú)序且不重復(fù),這也就意味著我們不能通過(guò)下標(biāo)的方式進(jìn)行訪問(wèn),而且集合中不會(huì)出現(xiàn)重復(fù)的元素;
JS中的集合
在JavaScript中提供了集合這個(gè)數(shù)據(jù)結(jié)構(gòu),即Set
,MDN中的描述如下:
Set
對(duì)象是值的集合,你可以按照插入的順序迭代它的元素。Set中的元素只會(huì)出現(xiàn)一次,即Set中的元素是唯一的。
集合中的操作
在集合中主要有以下場(chǎng)景操作:
- 添加元素到集合中;
- 在集合中刪除某元素;
- 判斷元素是否在集合中;
- 清空集合;
- 求交集、并集、差集;
除了最后一種Set
對(duì)象就為我們提供了對(duì)應(yīng)的方法,示例代碼如下:
const arr = [1, 2, 3, 2, 3, 4, 5] // 利用set實(shí)現(xiàn)去重 const set = new Set(arr) // [1, 2, 3, 4, 5] // 往集合中添加元素 set.add(3) // [1, 2, 3, 4, 5] 添加失敗,集合中不允許出現(xiàn)重復(fù)元素 set.add(6) // [1, 2, 3, 4, 5, 6] // 判斷元素是否在集合中 set.has(2) // true set.has(7) // false // 刪除集合中的元素 set.delete(1) // [2, 3, 4, 5, 6] // 清空集合 set.clear()
交集、并集、差集的封裝
首先我們需要了解一下什么交集、并集、差集。
- 并集:對(duì)于給定的兩個(gè)集合,返回一個(gè)包含兩個(gè)集合中所有元素的新集合
- 交集:對(duì)于給定的兩個(gè)集合,返回一個(gè)包含兩個(gè)集合中共有元素的新集合
- 差集:對(duì)于給定的兩個(gè)集合,返回一個(gè)包含所有存在于第一個(gè)集合且不存在于第二個(gè)集合的元素的新集合
下面這個(gè)圖更好的解釋了什么是交集、并集、差集。
封裝代碼如下:
// 求兩個(gè)集合的并集 export function union(setA, setB) { let _union = new Set(setA) for (let elem of setB) { _union.add(elem) // 因?yàn)榧现胁淮嬖谥貜?fù)元素 } return _union } // 求兩個(gè)集合的交集 export function intersection(setA, setB) { let _intersection = new Set() for (let elem of setB) { if (setA.has(elem)) { _intersection.add(elem) } } return _intersection } // 求兩個(gè)集合的差集 export function difference(setA, setB) { let _difference = new Set(setA) for (let elem of setB) { _difference.delete(elem) } return _difference }
封裝的這三個(gè)方法全部利用了集合不能重復(fù)的特性。
到此這篇關(guān)于JavaScript字典與集合詳解的文章就介紹到這了,更多相關(guān)JS字典與集合內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
關(guān)于小程序優(yōu)化的一些建議(小結(jié))
這篇文章主要介紹了關(guān)于小程序優(yōu)化的一些建議(小結(jié)),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12JavaScript實(shí)現(xiàn)漢字轉(zhuǎn)換為拼音的庫(kù)文件示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)漢字轉(zhuǎn)換為拼音的庫(kù)文件,結(jié)合具體實(shí)例分析了JSPinyin庫(kù)文件與簡(jiǎn)單使用技巧,需要的朋友可以參考下2016-12-12javascript 中select框觸發(fā)事件過(guò)程的分析
這篇文章主要介紹了javascript 中select框觸發(fā)事件過(guò)程的分析的相關(guān)資料,這里對(duì)select 觸發(fā)過(guò)程進(jìn)行了深入分析,幫助大家理解這部分內(nèi)容,需要的朋友可以參考下2017-08-08js鍵盤(pán)方向鍵 文章翻頁(yè)跳轉(zhuǎn)的效果[小說(shuō)站常用已支持firefox]
一些小說(shuō)或圖片類網(wǎng)站,為了方便大家閱讀,往往會(huì)加入利用鍵盤(pán)方向鍵進(jìn)行翻頁(yè)、返回上一級(jí)、返回目錄、回首頁(yè)等功能。2009-05-05細(xì)數(shù)JavaScript 一個(gè)等號(hào),兩個(gè)等號(hào),三個(gè)等號(hào)的區(qū)別
下面小編就為大家?guī)?lái)一篇細(xì)數(shù)JavaScript 一個(gè)等號(hào),兩個(gè)等號(hào),三個(gè)等號(hào)的區(qū)別。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10JS+CSS實(shí)現(xiàn)六級(jí)網(wǎng)站導(dǎo)航主菜單效果
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)六級(jí)網(wǎng)站導(dǎo)航主菜單效果,涉及JavaScript遍歷頁(yè)面元素及動(dòng)態(tài)修改css屬性的相關(guān)實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09利用JS自動(dòng)打開(kāi)頁(yè)面上鏈接的實(shí)現(xiàn)代碼
今天經(jīng)過(guò)測(cè)試,實(shí)現(xiàn)了利用JS來(lái)自動(dòng)打開(kāi)頁(yè)面上的鏈接的功能,其實(shí)比較簡(jiǎn)單,就是在頁(yè)面上把鏈接列表列出來(lái),然后通過(guò)JQuery的相關(guān)控制,在框架頁(yè)中把鏈接打開(kāi),具體能做什么用,大家自己想,哈哈。2011-09-09BootStrap下拉框在firefox瀏覽器界面不友好的解決方案
BootStrap下拉框在firefox瀏覽器界面很不友好,在firefix瀏覽器打開(kāi)鏈接就會(huì)發(fā)現(xiàn)里面有個(gè)小容器,怎么處理呢,下面看下小編給大家分享的有關(guān)這個(gè)問(wèn)題的處理方案2016-08-08JavaScript構(gòu)造函數(shù)原理及實(shí)現(xiàn)流程解析
這篇文章主要介紹了JavaScript構(gòu)造函數(shù)原理及實(shí)現(xiàn)流程解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11