JavaScript數(shù)據(jù)結(jié)構(gòu)學(xué)習(xí)之?dāng)?shù)組、棧與隊(duì)列
前言
數(shù)據(jù)結(jié)構(gòu)就是關(guān)系,沒(méi)錯(cuò),就是數(shù)據(jù)元素相互之間存在的一種或多種特定關(guān)系的集合。
常用的數(shù)據(jù)結(jié)構(gòu)有:
數(shù)組,隊(duì)列(queue),堆(heap),棧(stack),鏈表(linked list ),樹(shù)(tree),圖(graph)和散列表(hash)
本文主要介紹的是數(shù)組、棧與隊(duì)列,下面來(lái)一起看看詳細(xì)的介紹吧。
一、數(shù)組
數(shù)組是平時(shí)使用最常用的數(shù)據(jù)結(jié)構(gòu),在JavaScript中數(shù)組是動(dòng)態(tài)的分配大小,在這里我不會(huì)介紹JavaScript里面數(shù)組的所有的方法,而是針對(duì)數(shù)據(jù)結(jié)構(gòu)這個(gè)方向談?wù)勊玫降姆椒ā?/p>
創(chuàng)建和初始化數(shù)組
//創(chuàng)建空數(shù)組 var array = new Array(); //[] //初始化數(shù)組 var array = new Array(1,2,3); var array = Array.of(1,2,3);//ES6的方法 //[1,2,3] //創(chuàng)建大小為5的數(shù)組 var array = new Array();//ES6的方法 //[undefined,undefined,undefined,undefined,undefined] //給數(shù)組賦值 var array = new Array(); array[0] = 1 ; array[1] = 2 ; array[2] = 3 ; //[1,2,3]
添加元素
往數(shù)組后添加元素
var number = [1,2,3]; number[number.length] = 4; //[1,2,3,4] //或者 var number = [1,2,3]; number.push(4); //[1,2,3,4]
往數(shù)組前面添加元素
var number = [1,2,3]; number.unshift(0); //[0,1,2,3] number.unshift(-2,-1); //[-2,-1,0,1,2,3]
往數(shù)組的任意位置插入元素
運(yùn)用splice方法
//在索引1后面添加2,3,4 var number = [1,5,6]; number.splice(1,0,2,3,4); //[1,2,3,4,5,6]
刪除元素
刪除第一位
var number = [1,2,3]; number.shift(); //[2,3]
刪除任意位置
使用splice方法刪除數(shù)組任意位置的元素
var numebr = [1,2,3,4,5,6]; //如果想刪除元素3 number.splice(2,1); //[1,2,4,5,6] //如果想刪除元素4,5 number.splice(3,2);
排序
反序
var number = [3,2,1]; number.reverse(); //[1,2,3]
自然排序
var numebr = [2,3,4,1,3,7]; number.sort(); //[1,2,3,3,4,7]
自定義排序
這個(gè)自定義排序跟java里面實(shí)現(xiàn)comparator接口一個(gè)意思。用處可大了。
var number = [4,5,6,7,1,2,3,8,9,10,11,12,13]; number.sort(); //[1, 10, 11, 12, 13, 2, 3, 4, 5, 6, 7, 8, 9]
仿佛看起有點(diǎn)不對(duì)啊,我們應(yīng)該想要的是
[1,2,3,4,5,6,7,8,9,10,11,12,13],這個(gè)時(shí)候我們就用自定義排序來(lái)解決這個(gè)問(wèn)題
var number = [4,5,6,7,1,2,3,8,9,10,11,12,13]; function compare(a,b){ if(a < b){ return -1; } if(a > b){ return 1; } return 0; } number.sort(compare); //[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]
這還只是最簡(jiǎn)單的,也可以對(duì)任何對(duì)象類型進(jìn)行數(shù)組排序。例如,對(duì)象Person有名字和年齡屬性,我們希望根據(jù)年齡排序
var friends = [{name:'李晨',age:40},{name:'范冰冰',age:35}]; function comparePerson(a,b){ if(a.age < b.age){ return -1; } if(a.age > b.age){ return 1; } return 0; } friends.sort(comparePerson); //[{name:'范冰冰',age:35},{name:'李晨',age:40}]
搜索
搜索有兩個(gè)方法:indexOf方法返回與參數(shù)匹配的第一個(gè)元素的索引,lastIndexOf返回與參數(shù)匹配的最后一個(gè)元素的索引。
var number = [1,3,4,3,56,6,7,4]; number.indexOf(3);//1 number.lastIndexOf(3)//3
二、棧
棧是一種遵循后進(jìn)先出(LIFO)原則的有序集合。新添加的或待刪除的元素都保存在棧的末尾,稱作棧頂,另一端就叫棧底。在棧里,新元素都靠近棧頂,舊元素都接近棧底。在JavaScript中變量保存和函數(shù)調(diào)用都是用棧存儲(chǔ)的。
首先創(chuàng)建一個(gè)類來(lái)表示一個(gè)棧,需要一種數(shù)據(jù)結(jié)構(gòu)來(lái)保存棧里的元素。這里我們就選擇剛學(xué)的數(shù)組:var items = [];
接下來(lái),為我們的棧聲明一些方法:
push(elements(s))
:添加一個(gè)(或幾個(gè))新元素到棧頂pop()
:移除棧頂?shù)脑?,同時(shí)返回被移除的元素peek()
:獲取棧頂?shù)脑兀粚?duì)棧做出任何修改isEmpty()
:如果棧里沒(méi)有任何元素就返回true,否則返回false;clear()
:清空棧size()
:返回棧元素的個(gè)數(shù)
如果上一節(jié)數(shù)組認(rèn)真看了,我相信用JavaScript實(shí)現(xiàn)一個(gè)棧是非常簡(jiǎn)單的。在這里就直接來(lái)代碼了,不用一個(gè)方法一個(gè)方法去解釋了。
function Stack(){ var items = []; this.push = function(element){ items.push(element); } this.pop = function(){ return items.pop(); } this.peek = function(){ return items[items.length-1]; } this.isEmpty = function(){ return items.length === 0; } this.size = function(){ return items.length; } this.clear = function(){ items = []; } this.print = funciton(){ console.log(items.toString()); } }
三、隊(duì)列
隊(duì)列是遵循先來(lái)先服務(wù)(FIFO)原則的一組有序的項(xiàng)。隊(duì)列在尾部添加新元素,并從頂部移除元素。最新添加的元素排在隊(duì)列的末尾。
在現(xiàn)實(shí)生活中常見(jiàn)的例子就是排隊(duì)。
在計(jì)算機(jī)科學(xué)中,一個(gè)常見(jiàn)的例子就是打印隊(duì)列,先點(diǎn)擊打印的文檔會(huì)被先打印。
創(chuàng)建隊(duì)列
同樣先創(chuàng)建一個(gè)類來(lái)表示一個(gè)隊(duì)列。需要用到的數(shù)據(jù)結(jié)構(gòu)同樣是數(shù)組var items = [];
聲明可用的方法:
enqueue(element(s))
:向隊(duì)尾添加一個(gè)(或多個(gè))新的項(xiàng)dequeue()
:移除隊(duì)列的第一(即排在隊(duì)列最前面的)項(xiàng),并返回被移除的元素。front()
:返回隊(duì)列中第一個(gè)元素isEmpty()
:如果隊(duì)列中不包含元素返回true,否則返回falsesize()
:返回隊(duì)列包含元素的個(gè)數(shù)
完整的Queue類
function Queue(){ var items = []; this.enqueue = function(element){ items.push(element); } this.dequeue = function(){ return items.shift(); } this.front = function(){ return items[0]; } this.isEmpty = function(){ return items.length === 0; } this.clear = function(){ items = []; } this.size = funciton(){ return items.length; } this.print = function(){ console.log(items.toString()); } }
優(yōu)先隊(duì)列
在優(yōu)先隊(duì)列中,元素被賦予優(yōu)先級(jí)。當(dāng)訪問(wèn)元素的時(shí),具有最高優(yōu)先級(jí)的元素先刪除。優(yōu)先隊(duì)列具有最高進(jìn)先出的行為特征。例如:醫(yī)院的急救室為病人賦予優(yōu)先級(jí)(這個(gè)優(yōu)先級(jí)可以指病情嚴(yán)重的成程度),具有最高優(yōu)先級(jí)的病人最先得到治療。
實(shí)現(xiàn)一個(gè)優(yōu)先隊(duì)列有兩種選項(xiàng):
- 設(shè)置優(yōu)先級(jí),然后在正確的位置添加元素;
- 用入列操作添加元素,然后按照優(yōu)先級(jí)移除它們。
我們這里采用第一種。
function PriorityQueue(){ var items = []; funciton QueueElement(element,priority){ this.element = element; this.priority = priority; } function comparePriority(a,b){ if(a.priority > b.priority){ return 1; } if(a.priority < b.priority){ return -1; } return 0; } this.enqueue = funciton(element,priority){ var queueElement = new QueueElement(element,priority); items.push(queueElement); items.sort(comparePriority); } //其它方法和默認(rèn)的Queue實(shí)現(xiàn)相同 }
當(dāng)然,這個(gè)enqueue的實(shí)現(xiàn)方法很多種,我這效率不是最高的,但是容易理解。將插入的元素根據(jù)優(yōu)先級(jí)排個(gè)序,那么先出去的就是優(yōu)先級(jí)最高的了。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,如果有疑問(wèn)大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
- 深入JavaScript高級(jí)程序設(shè)計(jì)之對(duì)象、數(shù)組(棧方法,隊(duì)列方法,重排序方法,迭代方法)
- JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之棧與隊(duì)列
- JS實(shí)現(xiàn)隊(duì)列與堆棧的方法
- JavaScript數(shù)組實(shí)現(xiàn)數(shù)據(jù)結(jié)構(gòu)中的隊(duì)列與堆棧
- JavaScript數(shù)組的棧方法與隊(duì)列方法詳解
- JS實(shí)現(xiàn)利用兩個(gè)隊(duì)列表示一個(gè)棧的方法
- JavaScript棧和隊(duì)列相關(guān)操作與實(shí)現(xiàn)方法詳解
- JavaScript基于數(shù)組實(shí)現(xiàn)的棧與隊(duì)列操作示例
- 如何使用JavaScript實(shí)現(xiàn)棧與隊(duì)列
- JavaScript中棧和隊(duì)列應(yīng)用詳情
相關(guān)文章
javascript 事件對(duì)象 坐標(biāo)事件說(shuō)明
javascript 事件對(duì)象 坐標(biāo)事件說(shuō)明,學(xué)習(xí)js坐標(biāo)事件的朋友可以參考下。2010-05-05javascript簡(jiǎn)單實(shí)現(xiàn)深淺拷貝過(guò)程詳解
這篇文章主要介紹了javascript簡(jiǎn)單實(shí)現(xiàn)深淺拷貝過(guò)程詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10JavaScript中Textarea滾動(dòng)條不能拖動(dòng)的解決方法
這篇文章主要介紹了JavaScript中Textarea滾動(dòng)條不能拖動(dòng)的解決方法,主要針對(duì)IE瀏覽器中Textarea滾動(dòng)條綁定了onfocus事件時(shí)分析對(duì)應(yīng)的處理方法,需要的朋友可以參考下2015-12-12es6學(xué)習(xí)之解構(gòu)時(shí)應(yīng)該注意的點(diǎn)
解構(gòu)賦值允許你使用類似數(shù)組或?qū)ο笞置媪康恼Z(yǔ)法將數(shù)組和對(duì)象的屬性賦給各種變量。這種賦值語(yǔ)法極度簡(jiǎn)潔,同時(shí)還比傳統(tǒng)的屬性訪問(wèn)方法更為清晰,下面這篇文章主要給大家介紹了關(guān)于在es6解構(gòu)時(shí)應(yīng)該注意的點(diǎn),需要的朋友可以參考下。2017-08-08JavaScript判斷對(duì)象、數(shù)組是否包含某個(gè)屬性、某個(gè)值的方法
這篇文章主要給大家介紹了關(guān)于JavaScript判斷對(duì)象、數(shù)組是否包含某個(gè)屬性、某個(gè)值的相關(guān)資料,我們?cè)趯?shí)際的開(kāi)發(fā)過(guò)程中,經(jīng)常需要判斷對(duì)象/數(shù)組是否包含某個(gè)屬性或者某個(gè)值,需要的朋友可以參考下2023-09-09layui監(jiān)聽(tīng)select變化,以及設(shè)置radio選中的方法
今天小編就為大家分享一篇layui監(jiān)聽(tīng)select變化,以及設(shè)置radio選中的方法,具有好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09JS 清除字符串?dāng)?shù)組中,重復(fù)元素的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇JS 清除字符串?dāng)?shù)組中,重復(fù)元素的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05javascript抽象工廠模式詳細(xì)說(shuō)明
這篇文章主要介紹了javascript抽象工廠模式詳細(xì)說(shuō)明,需要的朋友可以參考下2014-12-12JavaScript實(shí)現(xiàn)復(fù)選框全選和取消全選
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)復(fù)選框全選和取消全選,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11