• 棧(stack) 棧stack為自動(dòng)分配的內(nèi)存空間，它由系統(tǒng)自動(dòng)釋放;
• 堆(heap) 堆heap是動(dòng)態(tài)分配的內(nèi)存，大小不定也不會(huì)自動(dòng)釋放。

JavaScript 中的變量分為基本類(lèi)型和引用類(lèi)型。

• 基本類(lèi)型 (Undefined、Null、Boolean、Number和String)
• 基本類(lèi)型在內(nèi)存中占據(jù)空間小、大小固定 ，他們的值保存在棧(stack)空間，是按值來(lái)訪(fǎng)問(wèn)
• 引用類(lèi)型 (對(duì)象、數(shù)組、函數(shù))
• 引用類(lèi)型占據(jù)空間大、大小不固定, 棧內(nèi)存中存放地址指向堆(heap)內(nèi)存中的對(duì)象。是按引用訪(fǎng)問(wèn)的

如下圖所示：棧內(nèi)存中存放的只是該對(duì)象的訪(fǎng)問(wèn)地址， 在堆內(nèi)存中為這個(gè)值分配空間 。 由于這種值得大小不固定，因此不能把它們保存到棧內(nèi)存中。但內(nèi)存地址大小的固定的，因此可以將內(nèi)存地址保存在棧內(nèi)存中。 這樣，當(dāng)查詢(xún)引用類(lèi)型的變量時(shí)， 先從棧中讀取內(nèi)存地址， 然后再通過(guò)地址找到堆中的值。

當(dāng)我們看到一個(gè)變量類(lèi)型是已知的，就分配在棧里面，比如INT,Double等。其他未知的類(lèi)型，比如自定義的類(lèi)型，因?yàn)橄到y(tǒng)不知道需要多大，所以程序自己申請(qǐng)，這樣就分配在堆里面。

上方例子得知，當(dāng)我改變arr2中的數(shù)據(jù)時(shí)，arr1中數(shù)據(jù)也發(fā)生了變化，當(dāng)改變str1的數(shù)據(jù)值時(shí)，arr1卻沒(méi)有發(fā)生改變。為什么?這就是傳值與傳址的區(qū)別。

因?yàn)閍rr1是數(shù)組，屬于引用類(lèi)型，所以它賦予給arr2的時(shí)候傳的是棧中的地址(相當(dāng)于新建了一個(gè)不同名“指針”)，而不是堆內(nèi)存中的對(duì)象的值。str1得到的是一個(gè)基本類(lèi)型的賦值，因此，str1僅僅是從arr1堆內(nèi)存中獲取了一個(gè)數(shù)值，并直接保存在棧中。arr1、arr2都指向同一塊堆內(nèi)存，arr2修改的堆內(nèi)存的時(shí)候，也就會(huì)影響到arr1，str1是直接在棧中修改，并且不能影響到arr1堆內(nèi)存中的數(shù)據(jù)。

數(shù)據(jù)類(lèi)型訪(fǎng)問(wèn)&&復(fù)制

基本數(shù)據(jù)類(lèi)型：基本數(shù)據(jù)類(lèi)型是指保存在棧內(nèi)存中的簡(jiǎn)單數(shù)據(jù)段。訪(fǎng)問(wèn)方式是按值訪(fǎng)問(wèn)。

var a = 1;

a = 2 ;

基本類(lèi)型變量的復(fù)制：從一個(gè)變量向一個(gè)變量復(fù)制時(shí)，會(huì)在棧中創(chuàng)建一個(gè)新值，然后把值復(fù)制到為新變量分配的位置上。

var b = a;

vara =newObject();

a.name= 'xz' ;

棧內(nèi)存&堆內(nèi)存

為了使程序運(yùn)行時(shí)占用的內(nèi)存最小，通常要實(shí)現(xiàn)垃圾回收機(jī)制。

當(dāng)一個(gè)方法執(zhí)行時(shí)，每個(gè)方法都會(huì)建立自己的內(nèi)存棧，在這個(gè)方法內(nèi)定義的變量將會(huì)逐個(gè)放入這塊棧存里，隨著方法的執(zhí)行結(jié)束，這個(gè)方法的棧存也將自然銷(xiāo)毀了。因此，所有在方法中定義的變量都是放在棧內(nèi)存中的;

當(dāng)我們?cè)诔绦蛑袆?chuàng)建一個(gè)對(duì)象時(shí)，這個(gè)對(duì)象將被保存到運(yùn)行時(shí)數(shù)據(jù)區(qū)中，以便反復(fù)利用(因?yàn)閷?duì)象的創(chuàng)建成本開(kāi)銷(xiāo)較大)，這個(gè)運(yùn)行時(shí)數(shù)據(jù)區(qū)就是堆內(nèi)存。堆內(nèi)存中的對(duì)象不會(huì)隨方法的結(jié)束而銷(xiāo)毀，即使方法結(jié)束后，這個(gè)對(duì)象還可能被另一個(gè)引用變量所引用(方法的參數(shù)傳遞時(shí)很常見(jiàn))，則這個(gè)對(duì)象依然不會(huì)被銷(xiāo)毀，只有當(dāng)一個(gè)對(duì)象沒(méi)有任何引用變量引用它時(shí)，系統(tǒng)的垃圾回收機(jī)制才會(huì)在核實(shí)的時(shí)候回收它。

思考問(wèn)題:

demo1.
var a = 1;
var b = a;
b = 2;

// 這時(shí)a是？

demo1中在變量對(duì)象中的數(shù)據(jù)發(fā)生復(fù)制行為時(shí)，系統(tǒng)會(huì)自動(dòng)為新的變量分配一個(gè)新值。var b = a執(zhí)行之后，b雖然重新賦值為2，但是他們其實(shí)已經(jīng)是相互獨(dú)立互不影響的值了。

demo2.
var m = { a: 1, b: 2 }
var n = m;
n.a = 2;

// 這時(shí)m.a的值呢？

demo2中我們通過(guò)var n = m執(zhí)行一次復(fù)制引用類(lèi)型的操作。引用類(lèi)型的復(fù)制同樣也會(huì)為新的變量自動(dòng)分配一個(gè)新的值保存在變量對(duì)象中，但不同的是，這個(gè)新的值，僅僅只是引用類(lèi)型的一個(gè)地址指針。當(dāng)?shù)刂分羔樝嗤瑫r(shí)，盡管他們相互獨(dú)立，但是在變量對(duì)象中訪(fǎng)問(wèn)到的具體對(duì)象實(shí)際上是同一個(gè)。因此當(dāng)我改變n時(shí)，m也發(fā)生了變化。這就是引用類(lèi)型的特性。

堆棧和隊(duì)列

要了解JavaScript數(shù)組的堆棧和隊(duì)列方法的操作，需要先對(duì)堆棧和隊(duì)列基礎(chǔ)知識(shí)有所了解。在繼續(xù)看后面的內(nèi)容之前，我們先簡(jiǎn)單地了解一下堆棧和隊(duì)列的概念。

棧和隊(duì)列都是動(dòng)態(tài)的集合，在棧中，可以去掉的元素是最近插入的那一個(gè)。棧道實(shí)現(xiàn)了后進(jìn)先出。在隊(duì)列中，可以去掉的元素總是在集合中存在的時(shí)間最長(zhǎng)的那一個(gè)。隊(duì)列實(shí)現(xiàn)了先進(jìn)先出的策略。

堆棧的基本概念

先上張圖：

棧是一種LIFO(Last-In-First-Out，后進(jìn)先出)的數(shù)據(jù)結(jié)構(gòu)，也就是最新添加的項(xiàng)最早被移除。而棧中項(xiàng)的插入(叫做推入)和移除(叫做彈出)，只發(fā)生在一個(gè)位置——棧的頂部。

最開(kāi)始棧中不含有任何數(shù)據(jù)，叫做空棧，此時(shí)棧頂就是棧底。然后數(shù)據(jù)從棧頂進(jìn)入，棧頂棧底分離，整個(gè)棧的當(dāng)前容量變大。數(shù)據(jù)出棧時(shí)從棧頂彈出，棧頂下移，整個(gè)棧的當(dāng)前容量變小。

比如說(shuō)，我們?cè)谝粋€(gè)箱子中放了很多本書(shū)，如果你要拿出第二本書(shū)，那么你要先把第一本書(shū)拿出來(lái)，才能拿第二本書(shū)出來(lái);拿出第二本書(shū)之后，再把第一本書(shū)放進(jìn)去。

ECMAScript為數(shù)組專(zhuān)門(mén)提供了 push() 和 pop() 方法，以便實(shí)現(xiàn)類(lèi)似的行為。 push() 方法可以接收任意數(shù)量的參數(shù)，把它們逐個(gè)添加到數(shù)組末尾，并返回修改后數(shù)組的長(zhǎng)度。而 pop() 方法則從數(shù)組末尾移除最后一項(xiàng)，減少數(shù)組的length值，然后返回移除的項(xiàng)。

隊(duì)列的基本概念

棧數(shù)據(jù)結(jié)構(gòu)的訪(fǎng)問(wèn)規(guī)則是LIFO(后進(jìn)先出)，而隊(duì)列數(shù)據(jù)結(jié)構(gòu)的訪(fǎng)問(wèn)規(guī)則是FIFO(Fist-In-First-Out,先進(jìn)先出)。隊(duì)列在列表的末端添加項(xiàng)，從列表的前端移除項(xiàng)。如下圖所示：

比如說(shuō)火車(chē)站排隊(duì)買(mǎi)票，先到的先買(mǎi)，買(mǎi)好的先走。

入隊(duì)列操作其實(shí)就是在隊(duì)尾追加一個(gè)元素，不需要任何移動(dòng)，時(shí)間復(fù)雜度為O(1)。出隊(duì)列則不同，因?yàn)槲覀円呀?jīng)架設(shè)下標(biāo)為0的位置是隊(duì)列的隊(duì)頭，因此每次出隊(duì)列操作所有元素都要向前移動(dòng)。如下圖所示：

ECMAScript為數(shù)組專(zhuān)門(mén)提供了 shift() 和 unshift() 方法，以便實(shí)現(xiàn)類(lèi)似隊(duì)列的行為。由于 push() 是向數(shù)組末端添加數(shù)組項(xiàng)的方法，因此要模擬隊(duì)列只需一個(gè)從數(shù)組前端取得數(shù)組項(xiàng)的方法。實(shí)現(xiàn)這一操作的數(shù)組方法就是 shift() ，它能夠移除數(shù)組中的第一個(gè)項(xiàng)并返回該項(xiàng)，同時(shí)將數(shù)組長(zhǎng)度減1。

顧名思義， unshift() 與 shift() 的用途相反：它能在數(shù)組前端添加任意個(gè)數(shù)組項(xiàng)并返回新數(shù)組的長(zhǎng)度。因此，同時(shí)使用 unshift() 和 pop() 方法，可以從相反的方向來(lái)模擬隊(duì)列，即在數(shù)組的前端添加數(shù)組項(xiàng)，從數(shù)組末端移除數(shù)組項(xiàng)。

push()方法

該方法是向數(shù)組末尾添加一個(gè)或者多個(gè)元素，并返回新的長(zhǎng)度。

push()方法可以接收任意數(shù)量的參數(shù)，把它們逐個(gè)添加到數(shù)組的末尾，并返回修改后數(shù)組的長(zhǎng)度。如：

var arr = []; //創(chuàng)建一個(gè)空數(shù)組
console.log(arr); // []
console.log("入棧"); // 入棧
arr.push(1); // 將1添加到數(shù)組arr中
console.log(arr); // [1]
arr.push(2); //將2添加到數(shù)組arr中
console.log(arr); //[1,2]
arr.push([3,4]); // 將數(shù)組[3,4]添加到arr中
console.log(arr); // [1,2,[3,4]]
console.log(arr.length); // 3

在Chrome瀏覽器控制臺(tái)輸出的效果如下圖所示：

pop()方法

pop()方法剛好和push()方法相反。pop()方法刪除數(shù)組的最后一個(gè)元素，把數(shù)組的長(zhǎng)度減1，并且返回它被刪除元素的值，如果數(shù)組變?yōu)榭眨瑒t該方法不改變數(shù)組，返回undefine值。如下代碼演示：

var arr = [1,2,3,4]; //創(chuàng)建一個(gè)數(shù)組
console.log(arr); // [1,2,3,4]
console.log(arr.length); // 4
console.log("出棧，后進(jìn)先出"); // 出棧，后進(jìn)先出
arr.pop();
console.log(arr); //  // [1,2,3]
arr.pop();
console.log(arr); // [1,2]
arr.pop();
console.log(arr); // [1]
arr.pop();
console.log(arr); // []

在Chrome瀏覽器控制臺(tái)輸出的效果如下圖所示：

unshift()方法

unshift()方法是向數(shù)組的開(kāi)頭添加一個(gè)或多個(gè)元素，并且返回新的長(zhǎng)度。

var arr = []; //創(chuàng)建一個(gè)空的數(shù)組
console.log(arr); // []
console.log("入隊(duì)"); // 入隊(duì)
arr.unshift(1,2,3,4); // 將1,2,3,4推入到數(shù)組arr
console.log(arr); // [1,2,3,4]
console.log(arr.length); // 4

在Chrome瀏覽器控制臺(tái)輸出的效果如下圖所示：

shift()方法

shift()方法和unshift()方法恰恰相反。該方法用于把數(shù)組的第一個(gè)元素從其中刪除，并返回被刪除的值。如果數(shù)組是空的，shift()方法將不進(jìn)行任何操作，返回undefined的值。

var arr = [1,2,3,4]; // 創(chuàng)建一個(gè)數(shù)組
console.log(arr); // [1,2,3,4]
arr.shift(); // 取得第一項(xiàng)
console.log(arr); // [2,3,4]
arr.shift(); // 取得第一項(xiàng)
console.log(arr); // [3,4]
arr.shift(); // 取得第一項(xiàng)
console.log(arr); // [4]
arr.shift(); // 取得第一項(xiàng)
console.log(arr); // []

在Chrome瀏覽器控制臺(tái)輸出的效果如下圖所示：

簡(jiǎn)單得回憶一下：

• push()方法可以在數(shù)組的末屬添加一個(gè)或多個(gè)元素
• shift()方法把數(shù)組中的第一個(gè)元素刪除
• unshift()方法可以在數(shù)組的前端添加一個(gè)或多個(gè)元素
• pop()方法把數(shù)組中的最后一個(gè)元素刪除

JavaScript實(shí)現(xiàn)類(lèi)似棧和隊(duì)列的行為

了解這幾種方法之后，我們就可以將它們結(jié)合起來(lái)，輕松的實(shí)現(xiàn)類(lèi)似棧和隊(duì)列的行為。

實(shí)現(xiàn)類(lèi)似棧的行為

將push()和pop()結(jié)合在一起，我們就可以實(shí)現(xiàn)類(lèi)似棧的行為：

//創(chuàng)建一個(gè)數(shù)組來(lái)模擬堆棧
var a=new Array();
console.log(a);
//push: 在數(shù)組的末尾添加一個(gè)或更多元素，并返回新的長(zhǎng)度
console.log("入棧");
a.push(1)
console.log(a);//----->1
a.push(2);
console.log(a);//----->1,2
a.push(3);
console.log(a);//----->1,2,3
a.push(4);
console.log(a);//----->1,2,3,4
console.log("出棧，后進(jìn)先出");
console.log(a);
//pop：從數(shù)組中把最后一個(gè)元素刪除，并返回這個(gè)元素的值
a.pop();//----->4
console.log(a);
a.pop();//----->3
console.log(a);
a.pop();//----->2
console.log(a);
a.pop();//----->1
console.log(a);

在Chrome瀏覽器控制臺(tái)輸出的效果如下圖所示：

實(shí)現(xiàn)類(lèi)似隊(duì)列的行為

將shift()和push()方法結(jié)合在一起，可以像使用隊(duì)列一樣使用數(shù)組。即在數(shù)組的后端添加項(xiàng)，從數(shù)組的前端移除項(xiàng)：

//創(chuàng)建一個(gè)數(shù)組來(lái)模擬隊(duì)列
var a=new Array();
console.log(a);
//push: 在數(shù)組的末尾添加一個(gè)或更多元素，并返回新的長(zhǎng)度
console.log("入隊(duì)");
a.push(1)
console.log(a);//----->1
a.push(2);
console.log(a);//----->1,2
a.push(3);
console.log(a);//----->1,2,3
a.push(4);
console.log(a);//----->1,2,3,4
console.log("出隊(duì)，先進(jìn)先出");
console.log(a);
//shift：從數(shù)組中把第一個(gè)元素刪除，并返回這個(gè)元素的值
a.shift();//----->1
console.log(a);
a.shift();//----->2
console.log(a);
a.shift();//----->3
console.log(a);
a.shift();//----->4
console.log(a);

在Chrome瀏覽器控制臺(tái)輸出的效果如下圖所示：

除此之外，還可以同時(shí)使用unshift()和pop()方法，從相反的方向來(lái)模擬隊(duì)列，即在數(shù)組的前端添加項(xiàng)，從數(shù)組的后端移除項(xiàng)。如下面的示例所示：

//創(chuàng)建一個(gè)數(shù)組來(lái)模擬隊(duì)列
var a=new Array();
console.log(a);
//unshift: 在數(shù)組的前端添加一個(gè)或更多元素，并返回新的長(zhǎng)度
console.log("入隊(duì)");
a.unshift(1)
console.log(a);//----->1
a.unshift(2);
console.log(a);//----->2,1
a.unshift(3);
console.log(a);//----->3,2,1
a.unshift(4);
console.log(a);//----->4,3,2,1
console.log("出隊(duì)，先進(jìn)先出");
console.log(a);
//pop：從數(shù)組中把最一個(gè)元素刪除，并返回這個(gè)元素的值
a.pop();//----->4
console.log(a);
a.pop();//----->3
console.log(a);
a.pop();//----->2
console.log(a);
a.pop();//----->1
console.log(a);

在Chrome瀏覽器控制臺(tái)輸出的效果如下圖所示：

push()方法和unshift()方法的性能測(cè)試

Array的push()與unshift()方法都能給當(dāng)前數(shù)組添加元素，不同的是，push()是在末尾添加，而unshift()則是在開(kāi)頭添加，從原理就可以知道，unshift()的效率是較低的。原因是，它每添加一個(gè)元素，都要把現(xiàn)有元素往下移一個(gè)位置。但到底效率差異有多大呢?下面來(lái)簡(jiǎn)單測(cè)試一下。

/*
關(guān)于代碼中"var s=+newDate();"的技巧說(shuō)明
解釋如下:=+這個(gè)運(yùn)算符是不存在的;
+相當(dāng)于.valueOf();
+new Date()相當(dāng)于new Date().valueOf()
//4個(gè)結(jié)果一樣返回當(dāng)前時(shí)間的毫秒數(shù)
  alert(+new Date());
  alert(+new Date);
  var s=new Date();
  alert(s.valueOf());
  alert(s.getTime());
*/
var arr = [ ];
var startTime = +new Date(); //+new Date()相當(dāng)于new Date().valueOf()，返回當(dāng)前時(shí)間的毫秒數(shù)
// push性能測(cè)試 
for (var i = 0; i < 100000; i++) { 
　　arr.push(i); 
}
var endTime = +new Date();
console.log("調(diào)用push方法往數(shù)組中添加100000個(gè)元素耗時(shí)"+(endTime-startTime)+"毫秒"); 
 
startTime = +new Date(); 
arr = [ ]; 
// unshift性能測(cè)試 
for (var i = 0; i < 100000; i++) { 
　　arr.unshift(i); 
}
endTime = +new Date();
console.log("調(diào)用unshift方法往數(shù)組中添加100000個(gè)元素耗時(shí)"+(endTime-startTime)+"毫秒"); 

這段代碼分別執(zhí)行了100000次push()和unshift()操作，在chrome瀏覽器運(yùn)行一次，得到的結(jié)果如下圖所示：

可見(jiàn)，unshift()比push()要慢差不多100倍!因此，平時(shí)還是要慎用unshift()，特別是對(duì)大數(shù)組。那如果一定要達(dá)到unshift()的效果，可以借助于Array的reverse()方法，Array的reverse()的方法能夠把一個(gè)數(shù)組反轉(zhuǎn)。先把要放進(jìn)數(shù)組的元素用push()添加，再執(zhí)行一次reverse()，就達(dá)到了unshift()的效果。比如：

//創(chuàng)建一個(gè)數(shù)組來(lái)模擬堆棧
var a=new Array();
//使用push方法在數(shù)組的末尾添加元素
a.push(1)
a.push(2);
a.push(3);
a.push(4);
console.log("數(shù)組反轉(zhuǎn)之前數(shù)組中的元素順序");
console.log(a);//----->1,2,3,4
//Array有一個(gè)叫做reverse的方法，能夠把一個(gè)數(shù)組反轉(zhuǎn)。先把要放進(jìn)數(shù)組的元素用push添加，再執(zhí)行一次reverse，就達(dá)到了unshift的效果
a.reverse();//使用reverse方法將數(shù)組進(jìn)行反轉(zhuǎn)
console.log("數(shù)組反轉(zhuǎn)之后數(shù)組中的元素順序");
console.log(a);

在chrome瀏覽器控制臺(tái)輸出的效果如下圖所示：

從運(yùn)行結(jié)果來(lái)看，數(shù)組元素的順序已經(jīng)反轉(zhuǎn)過(guò)來(lái)了。

reverse()方法的性能測(cè)試；

var arr = [ ], s = +new Date; 
for (var i = 0; i < 100000; i++) { 
　　    arr.push(i); 
}
//調(diào)用reverse方法將數(shù)組里面的100000元素的順序反轉(zhuǎn)
arr.reverse(); 
console.log("調(diào)用reverse方法將數(shù)組里面的100000元素的順序反轉(zhuǎn)耗時(shí)："+(+new Date - s)+"毫秒");

在chrome瀏覽器控制臺(tái)輸出的效果如下圖所示：

從運(yùn)行效果中可以看到，reverse()方法的性能極高，可以放心使用。

總結(jié)

本文主要介紹了JavaScript數(shù)組的push()、pop()、shift()和unshift()方法。并且如何通過(guò)組合這幾種方法實(shí)現(xiàn)類(lèi)似棧和隊(duì)例的行為。

1.js中刪除堆棧：

js中的splice方法。

splice(index,len,[item]) 注釋?zhuān)涸摲椒〞?huì)改變?cè)紨?shù)組。

splice有3個(gè)參數(shù)，它也可以用來(lái)替換/刪除/添加數(shù)組內(nèi)某一個(gè)或者幾個(gè)值。

index:數(shù)組開(kāi)始下標(biāo) len: 替換/刪除的長(zhǎng)度 item:替換的值，刪除操作的話(huà) item為空。

如：arr = ['a','b','c','d']

刪除 ---- item不設(shè)置

arr.splice(1,1) //['a','c','d'] 刪除起始下標(biāo)為1，長(zhǎng)度為1的一個(gè)值，len設(shè)置的1，如果為0，則數(shù)組不變

arr.splice(1,2) //['a','d'] 刪除起始下標(biāo)為1，長(zhǎng)度為2的一個(gè)值，len設(shè)置的2

替換 ---- item為替換的值

arr.splice(1,1,'ttt') //['a','ttt','c','d'] 替換起始下標(biāo)為1，長(zhǎng)度為1的一個(gè)值為‘ttt’，len設(shè)置的1

arr.splice(1,2,'ttt') //['a','ttt','d'] 替換起始下標(biāo)為1，長(zhǎng)度為2的兩個(gè)值為‘ttt’，len設(shè)置的1

添加 ---- len設(shè)置為0，item為添加的值

arr.splice(1,0,'ttt') //['a','ttt','b','c','d'] 表示在下標(biāo)為1處添加一項(xiàng)‘ttt’

看來(lái)還是splice最方便啦

2：delete delete刪除掉數(shù)組中的元素后，會(huì)把該下標(biāo)出的值置為undefined,數(shù)組的長(zhǎng)度不會(huì)變

如：delete arr[1] //['a', ,'c','d'] 中間出現(xiàn)兩個(gè)逗號(hào)，數(shù)組長(zhǎng)度不變，有一項(xiàng)為undefined