JavaScript?數(shù)據(jù)結(jié)構(gòu)之集合創(chuàng)建(1)
前言:
集合這個(gè)詞應(yīng)該比較耳熟,大多數(shù)人沒接觸代碼前就學(xué)過了?;叵胍幌履愕母咭粩?shù)學(xué)課本上是不是出現(xiàn)過這個(gè)詞,就在第一章,概念如下:
一般地,我們把研究的對(duì)象統(tǒng)稱為元素,把一些元素組成的總體叫作集合。
你看,集合,元素,是不是與今天我們學(xué)習(xí)的數(shù)據(jù)結(jié)構(gòu)相通呢?
一、什么是集合
集合是由一組無序且唯一(不能重復(fù))的元素組成。數(shù)據(jù)結(jié)構(gòu)中的集合,對(duì)應(yīng)的是數(shù)學(xué)概念當(dāng)中的有限集合。
在數(shù)學(xué)中,比如要展示一個(gè)城市集合,我們是這么寫的:
N = {北京, 上海, 深圳, 廣州}
復(fù)制代碼那對(duì)應(yīng)到 JavaScript 當(dāng)中,就是一個(gè)簡(jiǎn)單的數(shù)組了:
var cities = ['北京', '上海', '深圳', '廣州']
數(shù)學(xué)中還有一個(gè) 空集 的概念,用 {} 表示,也就是 JavaScript 中的空數(shù)組 []。
集合的不同之處在于,我們前面學(xué)習(xí)的棧,隊(duì)列,鏈表,都是有序集合。而集合是比較少見的無序集合的數(shù)據(jù)結(jié)構(gòu)。
因?yàn)榧鲜俏ㄒ磺覠o序的,所以我們不能像有序的數(shù)據(jù)結(jié)構(gòu)一樣,用下標(biāo)來定位元素。無序集合的唯一標(biāo)識(shí)就是元素本身的值。
JavaScript 在 ES6 中也提供了對(duì)標(biāo)集合的數(shù)據(jù)類型 Set。Set 允許存儲(chǔ)唯一的任意類型的值,其實(shí)就是集合的實(shí)現(xiàn)。
在數(shù)學(xué)中,集合也有交集,并集,差集等基本運(yùn)算,本篇我們也會(huì)實(shí)現(xiàn)。
下面我們自己動(dòng)手實(shí)現(xiàn)一個(gè) Set。
二、創(chuàng)建集合類
我們依然用 class 語法來創(chuàng)建基本結(jié)構(gòu):
class Set {
constructor() {
this.items = {};
}
}與棧,隊(duì)列的原則一致,用一個(gè)對(duì)象來存儲(chǔ)集合的元素最為合適。再者因?yàn)樵氐奈ㄒ恍?,?duì)于基本類型元素,我們可以直接以元素的值作為對(duì)象 Key 值,而不是 0,1,2...。
下面就是我們需要聲明的方法:
add:向集合添加新元素delete:從集合中刪除一個(gè)元素has:檢測(cè)元素是否在集合中clear:清空集合size:返回集合的長度values:返回包含集合中所有元素的數(shù)組
1.has 方法
首先實(shí)現(xiàn) has 方法,因?yàn)樗鼤?huì)被 add,delete 等方法調(diào)用。
這個(gè)方法用來檢測(cè)某一個(gè)元素是否在集合中,存在則返回 true,否則返回 false。
has(item) {
return item in this.items;
}我們?cè)陂_頭部分說了,直接用元素本身的值作為對(duì)象的 key,因此可以直接用 JavaScript ES6 提供的 in 運(yùn)算符來檢測(cè)屬性是否在對(duì)象當(dāng)中。
還有一種傳統(tǒng)的方式如下,與上面效果一致:
has(item) {
return Object.prototype.hasOwnProperty.call(this.items, item);
}2.add 方法
有了 has 方法,add 方法的實(shí)現(xiàn)就比較簡(jiǎn)單:
add(item) {
if(this.has(item)) {
return false;
}
this.items[item] = item
return true
}因?yàn)橐3衷匚ㄒ恍?,所以在添加元素前先判斷?dāng)前元素是否在,存在則不添加,不存在才添加。
3.delete 和 clear 方法
這兩個(gè)方法都是刪除元素,前者刪除一個(gè)元素,后者刪除所有元素。
// 刪除
delete(item) {
if(this.has(item)) {
delete this.items[item]
return true
}
return false
}
// 清空
clear(item) {
this.item = {}
}刪除也比較簡(jiǎn)單,刪除或清空對(duì)象對(duì)屬性即可。
4.size 方法
size 方法對(duì)作用就是返回集合的長度(有多少個(gè)元素),實(shí)現(xiàn)這個(gè)方法有多種方式。
方式一:和之前的棧,隊(duì)列,鏈表的實(shí)現(xiàn)方式一樣,用一個(gè)屬性 count 來表示長度,在添加和刪除的時(shí)候更新這個(gè)屬性的值。
方式二:直接使用 ES6 的 Object.keys 方法來獲取屬性的數(shù)組,獲取數(shù)組的長度:
size() {
return Object.keys(this.items).length
}還是第二種方法簡(jiǎn)單,就選這個(gè)。
5.values 方法
和上面的 size 方法一樣,也可以直接獲取對(duì)象屬性值的數(shù)組:
values() {
return Object.values(this.items)
}三、使用集合
上面我們手動(dòng)實(shí)現(xiàn)了集合類,這里來使用一下:
var set = new Set()
set.add('北京')
set.add('北京')
set.add('上海')
set.add('上海')
// 打印結(jié)果
console.log(set.size()) // 2
console.log(set.values()) // ['北京','上海']添加的檢測(cè)沒問題,再看刪除:
console.log(set.has('上海')); // true
console.log(set.has('成都')); // false
set.delete('上海');
console.log(set.values()); ['北京']
console.log(set.has('上海')); // false刪除也沒問題,完美實(shí)現(xiàn)!
總結(jié)
本篇我們手動(dòng)實(shí)現(xiàn)了集合的基本功能,下一節(jié)我們?cè)诖嘶A(chǔ)上,實(shí)現(xiàn)集合的基本運(yùn)算
到此這篇關(guān)于JavaScript 數(shù)據(jù)結(jié)構(gòu) 之集合創(chuàng)建的文章就介紹到這了,更多相關(guān)JavaScript 集合內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- JavaScript樹形數(shù)據(jù)結(jié)構(gòu)處理
- JavaScript隊(duì)列數(shù)據(jù)結(jié)構(gòu)詳解
- JavaScript數(shù)據(jù)結(jié)構(gòu)與算法
- JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之棧詳解
- Javascript數(shù)據(jù)結(jié)構(gòu)之棧和隊(duì)列詳解
- ?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)文章
詳細(xì)分析Javascript中創(chuàng)建對(duì)象的四種方式
這篇文章詳細(xì)介紹了Javascript中創(chuàng)建對(duì)象的幾種方式與每種方式的優(yōu)缺點(diǎn),其中包括工廠模式、構(gòu)造函數(shù)模式、原型模式和組合使用構(gòu)造函數(shù)模式和原型模式,有需要的小伙伴們一起來學(xué)習(xí)學(xué)習(xí)吧。2016-08-08
JavaScript中的淺拷貝和深拷貝原理與實(shí)現(xiàn)淺析
這篇文章主要介紹了JavaScript中的淺拷貝和深拷貝原理與實(shí)現(xiàn),JavaScript 中的淺拷貝和深拷貝指的是在復(fù)制對(duì)象(包括對(duì)象、數(shù)組等)時(shí),是否只復(fù)制對(duì)象的引用地址或者在復(fù)制時(shí)創(chuàng)建一個(gè)新的對(duì)象2023-04-04
javascript event在FF和IE的兼容傳參心得(絕對(duì)好用)
event在IE和FF不兼,下面為大家分享的是javascript event在FF和IE的兼容傳參心得,需要的朋友可以參考下2014-07-07
JavaScript高級(jí)程序設(shè)計(jì) DOM學(xué)習(xí)筆記
DOM是針對(duì)XML和HTML文檔的一個(gè)API:即規(guī)定了實(shí)現(xiàn)文本節(jié)點(diǎn)操控的屬性、方法,具體實(shí)現(xiàn)由各自瀏覽器實(shí)現(xiàn)。2011-09-09
setinterval()與clearInterval()JS函數(shù)的調(diào)用方法
這篇文章主要介紹了setinterval()與clearInterval()JS函數(shù)的調(diào)用方法,實(shí)例分析了setinterval()與clearInterval()的語法結(jié)構(gòu)及使用技巧,需要的朋友可以參考下2015-01-01
基于Unit PNG Fix.js有時(shí)候在ie6下不正常的解決辦法
本篇文章是對(duì)Unit PNG Fix.js有時(shí)候在ie6下不正常的解決辦法進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下2013-06-06

