JavaScript數據結構與算法中集合的實現
集合(Set)
説起集合,就想起剛進高中時,數學第一課講的就是集合。因此在學習集合這種數據結構時,倍感親切。
集合的基本性質有一條: 集合中元素是不重複的。因為這種性質,所以我們選用了對象來作為集合的容器,而非數組。
雖然數組也能做到所有不重複,但終究過於繁瑣,不如集合。
集合的操作
集合的基本操作有交集、並集、差集等。這兒我們介紹JavaScipt集合中交集、並集、差集的實現。
JavaScipt中集合的實現
首先,創建一個構造函數。
/** * 集合的構造函數 */ function Set方法 { /** * 集合元素的容器,以對象來表示 * @type {Object} */ var items = {}; }
集合需要有如下方法:
has(value): 檢測集合內是否有某個元素 add(value): 給集合內添加某個元素 remove(value): 移除集合中某個元素 clear(value): 清空集合 size(): 返回集合長度 values(): 返回集合轉換的數組 union(otherSet): 返回兩個集合的並集 intersection(otherSet): 返回兩個集合的交集 difference(otherSet): 返回兩個集合的差集 subset(otherSet): 判斷該集合是否為傳入集合的子集
has方法:
説明:集合中元素是不重複的。所以在其它任何操作前,必須用has方法確認集合是否有某個元素。這兒使用了hasOwnProperty方法來檢測。
實現:
/** * 檢測集合內是否有某個元素 * @param {Any} value 要檢測的元素 * @return {Boolean} 如果有,返回true */ = function(value) { // hasOwnProperty的問題在於 // 它是一個方法,所以可能會被覆寫 return wnProperty(value) };
add方法:
説明: 給集合內添加某個元素。
實現:
/** * 給集合內添加某個元素 * @param {Any} value 要被添加的元素 * @return {Boolean} 添加成功返回True。 */ = function(value) { //先檢測元素是否存在。 if (!(value)) { items[value] = value; return true; } //如果元素已存在則返回false return false; };
remove方法:
説明: 移除集合中某個元素
實現:
/** * 移除集合中某個元素 * @param {Any} value 要移除的元素 * @return {Boolean} 移除成功返回True。 */ ve = function(value) { //先檢測元素是否存在。 if ((value)) { items[value]; return true; } //如果元素不存在,則刪除失敗返回false return false; };
clear方法:
説明: 清空集合
實現:
/** * 清空集合 */ r = function() { s = {}; };
size方法
説明: 返回集合長度,這兒有兩種方法。第一種方法使用了這個Api,但只支持IE9及以上。第二種則適用於所有瀏覽器。
實現:
/** * 返回集合長度,只可用於IE9及以上 * @return {Number} 集合長度 */ = function() { // 方法能將對象轉化為數組 // 只可用於IE9及以上,但很方便 return (items)th; } /** * 返回集合長度,可用於所有瀏覽器 * @return {Number} 集合長度 */ Legacy = function() { var count = 0; for (var prop in items) { if (wnProperty(prop)) { ++count; } } return count; }
values方法
説明: 返回集合轉換的數組,這兒也有兩種方法。理由同上。使用了,只能支持IE9及以上。
實現:
/** * 返回集合轉換的數組,只可用於IE9及以上 * @return {Array} 轉換後的數組 */ es = function() { return (items); }; /** * 返回集合轉換的數組,可用於所有瀏覽器 * @return {Array} 轉換後的數組 */ esLegacy = function() { var keys = []; for (var key in items) { (key) }; return keys; };
union方法
説明: 返回兩個集合的並集
實現:
/** * 返回兩個集合的並集 * @param {Set} otherSet 要進行並集操作的集合 * @return {Set} 兩個集合的並集 */ n = function(otherSet) { //初始化一個新集合,用於表示並集。 var unionSet = new Set(); //將當前集合轉換為數組,並依次添加進unionSet var values = es(); for (var i = 0; i < th; i++) { (values[i]); } //將其它集合轉換為數組,依次添加進unionSet。 //循環中的add方法保證了不會有重複元素的出現 values = es(); for (var i = 0; i < th; i++) { (values[i]); } return unionSet; };
intersection方法
説明: 返回兩個集合的交集
實現:
/** * 返回兩個集合的交集 * @param {Set} otherSet 要進行交集操作的集合 * @return {Set} 兩個集合的交集 */ rsection = function(otherSet) { //初始化一個新集合,用於表示交集。 var interSectionSet = new Set(); //將當前集合轉換為數組 var values = es(); //遍歷數組,如果另外一個集合也有該元素,則interSectionSet加入該元素。 for (var i = 0; i < th; i++) { if ((values[i])) { (values[i]) } } return interSectionSet; };
difference方法
説明: 返回兩個集合的差集
實現:
/** * 返回兩個集合的差集 * @param {Set} otherSet 要進行差集操作的集合 * @return {Set} 兩個集合的`差集 */ erence = function(otherSet) { //初始化一個新集合,用於表示差集。 var differenceSet = new Set(); //將當前集合轉換為數組 var values = es(); //遍歷數組,如果另外一個集合沒有該元素,則differenceSet加入該元素。 for (var i = 0; i < th; i++) { if (!(values[i])) { (values[i]) } } return differenceSet; };
subset方法
説明: 判斷該集合是否為傳入集合的子集。這段代碼在我自己寫完後與書上一比對,覺得自己超級low。我寫的要遍歷數組三次,書上的只需要一次,算法複雜度遠遠低於我的。
實現:
/** * 判斷該集合是否為傳入集合的子集 * @param {Set} otherSet 傳入的集合 * @return {Boolean} 是則返回True */ et = function(otherSet) { // 第一個判定,如果該集合長度大於otherSet的長度 // 則直接返回false if (() > ()) { return false; } else { // 將當前集合轉換為數組 var values = es(); for (var i = 0; i < th; i++) { if (!(values[i])) { // 第二個判定。只要有一個元素不在otherSet中 // 那麼則可以直接判定不是子集,返回false return false; } } return true; } };
ES6中的集合
ES6也提供了集合,但之前看ES6的集合操作一直迷迷糊糊的。實現一遍後再去看,感覺概念清晰了很多。
具體的我掌握的不是很好,還在學習中,就不寫出來啦~推薦看阮一峯老師的《ECMAScript 6入門》中對ES6 Set的介紹。
《ECMAScript 6入門》– Set和Map數據結構
感想
到了這兒,已經掌握了一些基本的數據結構。剩下的都是難啃的骨頭了(對我而言)。
字典的散列表、圖、樹、排序算法。算是四大金剛,所以近期關於數據結構與算法系列的文章,可能會更新的很慢。對我來説,也算是一個坎。希望這個寒假,能跨過這個坎。
-
JavaScript中的style.cssText使用教程分解
很多人用過r、lay等直接設置元素的.樣式屬性,但是ext用過的人就不多了。cssText本質是什麼?cssText的本質就是設置HTML元素的style屬性值。cssText怎麼用?複製代碼代碼如下:lementById("d1")ext="color:red;font-size:13px;";看了這個示例後,相信不説,也知道ext是什...
-
WAP教程:WML 鏈接和圖像
鏈接可以製作WML卡片來顯示WML的錨功能,圖像可以製作WML卡片來顯示圖像.鏈接可以製作WML卡片來顯示WML的錨功能。標籤總是要規定一個任務("go","prev",或"refresh")。任務定義了當用户選擇此鏈接時要做的事情。在本例中,當用户選擇"Nextpage",其任務是"前往":Next...
-
ASP.NET新型的投票結果顯示方法
一個投票功能模塊少不了查看投票結果,用進度條顯示各個投票結果可以起到一目瞭然的效果。以下是我的方法,請大家不吝賜教:1:做一張圖片用於做進度條,只需要很小的一個圖片就可以了,如高20px,寬1px。2:在要顯示進度條的單元格中插入image控件,其imageUrl設置為已做好的...
-
javascript閉包的高級使用方法
擴展Code:複製代碼代碼如下:varblogModule=(function(my){hoto=function(){//添加內部代碼};returnmy;}(blogModule));Say:將自身傳進方法,然後實現了方法的擴展,有點象零件組裝啊Code:複製代碼代碼如下:varblogModule=(function(my){varoldAddPhotoMethod=hoto;...