JavaScript?數(shù)據(jù)結(jié)構(gòu)之集合創(chuàng)建(1)
前言:
集合這個詞應(yīng)該比較耳熟,大多數(shù)人沒接觸代碼前就學過了?;叵胍幌履愕母咭粩?shù)學課本上是不是出現(xiàn)過這個詞,就在第一章,概念如下:
一般地,我們把研究的對象統(tǒng)稱為元素,把一些元素組成的總體叫作集合。
你看,集合,元素,是不是與今天我們學習的數(shù)據(jù)結(jié)構(gòu)相通呢?
一、什么是集合
集合是由一組無序且唯一(不能重復(fù))的元素組成。數(shù)據(jù)結(jié)構(gòu)中的集合,對應(yīng)的是數(shù)學概念當中的有限集合。
在數(shù)學中,比如要展示一個城市集合,我們是這么寫的:
N = {北京, 上海, 深圳, 廣州}
復(fù)制代碼那對應(yīng)到 JavaScript 當中,就是一個簡單的數(shù)組了:
var cities = ['北京', '上海', '深圳', '廣州']
數(shù)學中還有一個 空集 的概念,用 {} 表示,也就是 JavaScript 中的空數(shù)組 []。
集合的不同之處在于,我們前面學習的棧,隊列,鏈表,都是有序集合。而集合是比較少見的無序集合的數(shù)據(jù)結(jié)構(gòu)。
因為集合是唯一且無序的,所以我們不能像有序的數(shù)據(jù)結(jié)構(gòu)一樣,用下標來定位元素。無序集合的唯一標識就是元素本身的值。
JavaScript 在 ES6 中也提供了對標集合的數(shù)據(jù)類型 Set。Set 允許存儲唯一的任意類型的值,其實就是集合的實現(xiàn)。
在數(shù)學中,集合也有交集,并集,差集等基本運算,本篇我們也會實現(xiàn)。
下面我們自己動手實現(xiàn)一個 Set。
二、創(chuàng)建集合類
我們依然用 class 語法來創(chuàng)建基本結(jié)構(gòu):
class Set {
constructor() {
this.items = {};
}
}與棧,隊列的原則一致,用一個對象來存儲集合的元素最為合適。再者因為元素的唯一性,對于基本類型元素,我們可以直接以元素的值作為對象 Key 值,而不是 0,1,2...。
下面就是我們需要聲明的方法:
add:向集合添加新元素delete:從集合中刪除一個元素has:檢測元素是否在集合中clear:清空集合size:返回集合的長度values:返回包含集合中所有元素的數(shù)組
1.has 方法
首先實現(xiàn) has 方法,因為它會被 add,delete 等方法調(diào)用。
這個方法用來檢測某一個元素是否在集合中,存在則返回 true,否則返回 false。
has(item) {
return item in this.items;
}我們在開頭部分說了,直接用元素本身的值作為對象的 key,因此可以直接用 JavaScript ES6 提供的 in 運算符來檢測屬性是否在對象當中。
還有一種傳統(tǒng)的方式如下,與上面效果一致:
has(item) {
return Object.prototype.hasOwnProperty.call(this.items, item);
}2.add 方法
有了 has 方法,add 方法的實現(xiàn)就比較簡單:
add(item) {
if(this.has(item)) {
return false;
}
this.items[item] = item
return true
}因為要保持元素唯一性,所以在添加元素前先判斷當前元素是否在,存在則不添加,不存在才添加。
3.delete 和 clear 方法
這兩個方法都是刪除元素,前者刪除一個元素,后者刪除所有元素。
// 刪除
delete(item) {
if(this.has(item)) {
delete this.items[item]
return true
}
return false
}
// 清空
clear(item) {
this.item = {}
}刪除也比較簡單,刪除或清空對象對屬性即可。
4.size 方法
size 方法對作用就是返回集合的長度(有多少個元素),實現(xiàn)這個方法有多種方式。
方式一:和之前的棧,隊列,鏈表的實現(xiàn)方式一樣,用一個屬性 count 來表示長度,在添加和刪除的時候更新這個屬性的值。
方式二:直接使用 ES6 的 Object.keys 方法來獲取屬性的數(shù)組,獲取數(shù)組的長度:
size() {
return Object.keys(this.items).length
}還是第二種方法簡單,就選這個。
5.values 方法
和上面的 size 方法一樣,也可以直接獲取對象屬性值的數(shù)組:
values() {
return Object.values(this.items)
}三、使用集合
上面我們手動實現(xiàn)了集合類,這里來使用一下:
var set = new Set()
set.add('北京')
set.add('北京')
set.add('上海')
set.add('上海')
// 打印結(jié)果
console.log(set.size()) // 2
console.log(set.values()) // ['北京','上海']添加的檢測沒問題,再看刪除:
console.log(set.has('上海')); // true
console.log(set.has('成都')); // false
set.delete('上海');
console.log(set.values()); ['北京']
console.log(set.has('上海')); // false刪除也沒問題,完美實現(xiàn)!
總結(jié)
本篇我們手動實現(xiàn)了集合的基本功能,下一節(jié)我們在此基礎(chǔ)上,實現(xiàn)集合的基本運算
到此這篇關(guān)于JavaScript 數(shù)據(jù)結(jié)構(gòu) 之集合創(chuàng)建的文章就介紹到這了,更多相關(guān)JavaScript 集合內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- JavaScript樹形數(shù)據(jù)結(jié)構(gòu)處理
- JavaScript隊列數(shù)據(jù)結(jié)構(gòu)詳解
- JavaScript數(shù)據(jù)結(jié)構(gòu)與算法
- JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之棧詳解
- Javascript數(shù)據(jù)結(jié)構(gòu)之棧和隊列詳解
- ?JavaScript?數(shù)據(jù)結(jié)構(gòu)之散列表的創(chuàng)建(2)
- JavaScript?數(shù)據(jù)結(jié)構(gòu)之字典方法
- JavaScript?數(shù)據(jù)結(jié)構(gòu)之集合創(chuàng)建(2)
- JavaScript數(shù)據(jù)結(jié)構(gòu)常見面試問題整理
相關(guān)文章
jQuery Mobile動態(tài)刷新頁面樣式的實現(xiàn)方法
下面小編就為大家?guī)硪黄猨Query Mobile動態(tài)刷新頁面樣式的實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
js獲取GridView中行數(shù)據(jù)的兩種方法 分享
這篇文章介紹了js獲取GridView中行數(shù)據(jù)的方法,有需要的朋友可以參考一下2013-07-07
微信小程序如何修改本地緩存key中單個數(shù)據(jù)的詳解
這篇文章主要介紹了微信小程序如何修改本地緩存key中單個數(shù)據(jù),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
JS正則表達式實現(xiàn)字符串中連續(xù)在一起的字符去重
這篇文章主要給大家介紹了關(guān)于JS正則表達式實現(xiàn)字符串中連續(xù)在一起的字符去重的相關(guān)資料,學會正則表達式對開發(fā)者而言是個非常有用的技能,很多功能可以簡單的用一句正則來實現(xiàn),需要的朋友可以參考下2023-11-11

