Javascript數(shù)組系列一之棧與隊列

sunsmell 發(fā)布于2019-08-23 11:49 / 1498人閱讀

摘要：所謂數(shù)組英語，是有序的元素序列。組成數(shù)組的各個變量稱為數(shù)組的分量，也稱為數(shù)組的元素，有時也稱為下標變量。在棧中添加數(shù)據(jù)和刪除數(shù)據(jù)也被稱為推入和彈出，而且推入和彈出只會發(fā)生在棧的頂部。棧是一種數(shù)據(jù)結(jié)構(gòu)，而隊列則是一種的數(shù)據(jù)結(jié)構(gòu)，即先進先出。

所謂數(shù)組（英語：Array），是有序的元素序列。若將有限個類型相同的變量的集合命名，那么這個名稱為數(shù)組名。組成數(shù)組的各個變量稱為數(shù)組的分量，也稱為數(shù)組的元素，有時也稱為下標變量。－－－百度百科

簡單理解，數(shù)組就是數(shù)據(jù)的有序列表。

Array 在 Javascript 中屬于最常用的數(shù)據(jù)類型之一了，與其它語言一樣 Javascript 中的數(shù)組也是數(shù)據(jù)的有序列表，但是與其他語言有所不同的是，它可以用于保存任何數(shù)據(jù)類型，而且數(shù)組的長度是可以動態(tài)調(diào)整的。

var elements = ["first", 2, {age: 14}];

創(chuàng)建數(shù)組

既然認識了數(shù)組，那我們先看怎么創(chuàng)建一個數(shù)組吧！Javascript 提供兩種創(chuàng)建數(shù)組的方法。

1.通過構(gòu)造函數(shù)創(chuàng)建

var arr1 = new Array(); //[]
var arr2 = new Array(3); //[,,] 創(chuàng)建一個包含三項的數(shù)組
var arr3 = new Array(3, 4) //[3, 4]
var arr4 = new Array("3"); //["3"]
var arr5 = new Array("2","3"); //["2","3"]

看到上面的結(jié)果簡直蒙逼，因此可以看出參數(shù)傳遞的不同產(chǎn)生的結(jié)果也會不一樣，而且結(jié)果令人驚訝，不過我們可以總結(jié)為：如果傳入一位數(shù)值類型的參數(shù)時，則創(chuàng)建給一個定項的數(shù)組（例如 arr2 ），如果傳入其他類型的參數(shù)時，則會創(chuàng)建一個包含當前參數(shù)的數(shù)組（例如 arr4， arr5），

我們這個方法比較坑，所以一般不會使用這個方法去創(chuàng)建數(shù)組，那么我們繼續(xù)看下一個方法如何創(chuàng)建數(shù)組的。

2.通過字面量創(chuàng)建

var arr1 = [];
var arr2 = [1, 2];
var arr3 = ["1", "3"];

就是這么簡單，粗暴，明了；是我們創(chuàng)建數(shù)組最常用的方法，而且這種方法創(chuàng)建還非常高效。

如何訪問和設置數(shù)組

上面說到我們是如何創(chuàng)建一個數(shù)組，數(shù)組創(chuàng)建出來之后我們需要對數(shù)組中的元素進行訪問或修改吧？下面我們就來看看吧

訪問數(shù)組，通過索引訪問數(shù)組中的元素，索引從 0 開始，如果訪問的索引大于數(shù)組中元素的個數(shù)怎么辦呢？結(jié)果肯定是找不到的，所以會返回 undefined 。

說到數(shù)組元素的個數(shù)我們不能不提到數(shù)組的一個屬性了，那就是 length 屬性，它會返回當前數(shù)組元素的個數(shù)，
而且 length 屬性不是只讀屬性，它還可以去修改，因此我們利用 length 屬性即可以添加數(shù)組的元素，還可以刪除數(shù)組的元素。

var arr = ["first", "second", "three"];
console.log(arr[0]); //first
console.log(arr[1]); //second
console.log(arr[3]); //undefined

//利用 length 刪除元素
arr.length = 2;
console.log(arr); //["first", "second"]

//利用 length 添加元素(可以利用此方法在數(shù)組的末尾添加元素)
arr[arr.length] = "five";
console.log(arr); //["first", "second", "five"]

如何表現(xiàn)的和「棧」一樣

想要知道數(shù)組怎么表現(xiàn)的和「棧」一樣，首先我們先來了解一下什么是「棧」。

在這里我們不深究「棧」，如果深究下去一時半會我們也說不清楚，也不是我們本文的重點。

簡單來說，「棧」是一種數(shù)據(jù)結(jié)構(gòu)，一種 LIFO (Last-In-First-Out)的數(shù)據(jù)結(jié)構(gòu)，也就是后進先出，最新添加進來的元素最早被移出。
在「棧」中添加數(shù)據(jù)和刪除數(shù)據(jù)也被稱為推入和彈出，而且推入和彈出只會發(fā)生在「棧」的頂部。

Javascript 提供為數(shù)組提供了兩個方法以便于我們實現(xiàn)「棧」的行為，下面我們就來看看吧。

push : 向數(shù)組的末尾添加元素，可以傳入任意數(shù)量的參數(shù)

pop：從數(shù)組的末尾刪除最后一項，返回刪除的元素，使數(shù)組的 length-1

var arr = ["A", "B", "C"];
arr.push("D");
console.log(arr); //["A", "B", "C", "D"]
var rem = arr.pop();
console.log(arr);//["A", "B", "C"]
console.log(rem); // "D"

如何表現(xiàn)的和「隊列」一樣

上回我們說到 Javascript 中的數(shù)組可以有「棧」一樣的行為，那么它也可以表現(xiàn)出和「隊列」一樣的行為。

「棧」是一種 LIFO 數(shù)據(jù)結(jié)構(gòu)，而「隊列」則是一種 FIFO（First In First Out）的數(shù)據(jù)結(jié)構(gòu)，即先進先出。

數(shù)據(jù)在「隊列」的末尾添加元素，在前端移出元素，上面說到我們可以利用 push 方法在數(shù)組的末尾添加元素，那么什么方法在數(shù)組的前端去移出元素呢？答案就是 shift() 方法。

shift：刪除數(shù)組的第一個元素，返回刪除的元素，使數(shù)組的 length-1

可以看出它與pop()方法剛好相反

var arr = ["A", "B", "C"];
arr.push("D");
console.log(arr); //["A", "B", "C", "D"]
var rem = arr.shift();
console.log(arr);//["B", "C", "D"]
console.log(rem); // "A"

我們可以看到上面我們是在末尾添加元素，前端刪除元素，但是我們可以不可以在前端添加元素，在末尾刪除元素呢？也就是說我們能不能反向模擬「隊列」。

Javascript 中為我們提供了一個方法然后我們配合pop()方法我們就可以實現(xiàn)反向的模擬。那就是 unshift()。

unshift()：在數(shù)組的開頭添加任意個數(shù)的元素

var arr = ["A", "B", "C"];
arr.unshift("D");
console.log(arr); //[ "D", "A", "B", "C"]
var rem = arr.pop();
console.log(arr);//["D", "A", "B"]
console.log(rem); // "C"

總結(jié)

「數(shù)組」在 Javascript 中是最為常見的引用類型的數(shù)據(jù)結(jié)構(gòu)，其重要性是不言而喻的，因此「數(shù)組」也擁有比較多的方法，如果一個篇幅寫下來會非常非常的長，這樣不僅不利于閱讀而且也非常考驗讀者對耐性，細水長流，所以我們分兩篇文章去介紹，如果你對文章感興趣，可以持續(xù)關(guān)注，如果喜歡呢，你也可以轉(zhuǎn)發(fā)，點贊，對作者也是一種支持！

關(guān)注微信公眾號：六小登登。領(lǐng)取全套學習資源