摘要：所以相對于簡單數(shù)據(jù)類型而言，他們占用內(nèi)存比較小，如果放在堆中，查找會浪費很多時間，而把堆中的數(shù)據(jù)放入棧中也會影響棧的效率。六總結(jié)本文總結(jié)了數(shù)據(jù)類型及其聲明賦值更新時在內(nèi)存堆棧中的表現(xiàn)，可以更深入的理解這些數(shù)據(jù)類型。

JS的數(shù)據(jù)類型已經(jīng)是大家都很熟悉的東西了，但是大家是否對這些數(shù)據(jù)類型在內(nèi)存中的分配了解，甚至在操作這些變量時，內(nèi)存中是如何表現(xiàn)的，本文將對這些做一個總結(jié)。

ECMAScript 變量可能包含兩種不同數(shù)據(jù)類型的值:基本類型值和引用類型值。在將一個值賦給變量時，解析器必須確定這個值是基本類型值還是引用類型值。

基本類型值 指的是簡單的數(shù)據(jù)段，如: Undefined、Null、Boolean、Number 和 String。這 5 種基本數(shù)據(jù)類型是按值訪問的，因為可以操作保存在變量中的實際的值。

引用類型值指 那些可能由多個值構(gòu)成的對象，并且引用類型的值是保存在內(nèi)存中的對象，如: Object、Array、Function、Date對象等。與其他語言不同，JavaScript 不允許直接訪問內(nèi)存中的位置， 也就是說不能直接操作對象的內(nèi)存空間。在操作對象時，實際上是在操作對象的引用而不是實際的對象。 為此，引用類型的值是按引用訪問的。

要說明這個問題需要先來了解一下棧內(nèi)存和堆內(nèi)存。
基本類型值是存儲在棧中的簡單數(shù)據(jù)段，也就是說，他們的值直接存儲在變量訪問的位置。
堆是存放數(shù)據(jù)的基于散列算法的數(shù)據(jù)結(jié)構(gòu)，在javascript中，引用值是存放在堆中的。

如以下代碼：

const a = 1;
const obj1 = {
    name: "小明",
    age: 18
}
const obj2 = obj1

在內(nèi)存中的表現(xiàn)為：

在變量聲明時，基本類型變量會直接在棧內(nèi)存中為它分配空間，變量值也是直接存儲在棧內(nèi)存中；
而基本類型變量的真實值是存儲在堆內(nèi)存中的，同時棧內(nèi)存中會保存一個指針，這個指針指向真實值在對內(nèi)存中的位置，也以理解為棧內(nèi)存中存放了引用類型值存儲的地址。
所以訪問基本類型的變量時，是直接訪問到棧內(nèi)存中其真正的值；而訪問引用類型的變量時，是通過棧內(nèi)存中保存的引用地址去訪問。所以在上例中，重新聲明了一個obj2，并將obj1賦給obj2 其實是將obj1存放的引用賦給了obj2，此時obj1和obj2的指針指向了堆內(nèi)存中的同一個對象，那么我們更改obj1的name屬性時obj2會變化，同樣更改obj2的name屬性時obj1也會變化。那么此時如果新聲明一個變量b = a會怎樣呢，因為是基本類型各不影響。

棧的優(yōu)勢就是存取速度比堆要快，僅次于直接位于CPU中的寄存器，但缺點是，存在棧中的數(shù)據(jù)大小與生存期必須是確定的，缺乏靈活性。堆的優(yōu)勢是可以動態(tài)地分配內(nèi)存大小，生存期也不必事先告訴編譯器，垃圾收集器會自動地收走這些不再使用的數(shù)據(jù)，但是缺點是由于在運行時動態(tài)分配內(nèi)存，所以存取速度較慢。

所以相對于簡單數(shù)據(jù)類型而言，他們占用內(nèi)存比較小，如果放在堆中，查找會浪費很多時間，而把堆中的數(shù)據(jù)放入棧中也會影響棧的效率。比如對象和數(shù)組是可以無限拓展的，正好放在可以動態(tài)分配大小的堆中。

*注 ： 以下為c++中，對內(nèi)存與棧內(nèi)存的區(qū)別，很多地方相通，可輔助理解

主要的區(qū)別由以下幾點：
1、管理方式不同；
2、空間大小不同；
3、能否產(chǎn)生碎片不同；
4、生長方向不同；
5、分配方式不同；
6、分配效率不同；
管理方式：對于棧來講，是由編譯器自動管理，無需我們手工控制；對于堆來說，釋放工作由程序員控制，容易產(chǎn)生memory leak。（js有自己的垃圾回收機制，此條不適用）
空間大?。阂话銇碇v在32位系統(tǒng)下，堆內(nèi)存可以達到4G的空間，從這個角度來看堆內(nèi)存幾乎是沒有什么限制的。但是對于棧來講，一般都是有一定的空間大小的，例如，在VC6下面，默認(rèn)的棧空間大小是1M（好像是，記不清楚了）。當(dāng)然，我們可以修改。
碎片問題：對于堆來講，頻繁的new/delete勢必會造成內(nèi)存空間的不連續(xù)，從而造成大量的碎片，使程序效率降低。對于棧來講，則不會存在這個問題，因為棧是先進后出的隊列，他們是如此的一一對應(yīng)，以至于永遠(yuǎn)都不可能有一個內(nèi)存塊從棧中間彈出，在他彈出之前，在他上面的后進的棧內(nèi)容已經(jīng)被彈出，詳細(xì)的可以參考數(shù)據(jù)結(jié)構(gòu)，這里我們就不再一一討論了。
生長方向：對于堆來講，生長方向是向上的，也就是向著內(nèi)存地址增加的方向；對于棧來講，它的生長方向是向下的，是向著內(nèi)存地址減小的方向增長。
分配方式：堆都是動態(tài)分配的，沒有靜態(tài)分配的堆。棧有2種分配方式：靜態(tài)分配和動態(tài)分配。靜態(tài)分配是編譯器完成的，比如局部變量的分配。動態(tài)分配由alloca函數(shù)進行分配，但是棧的動態(tài)分配和堆是不同的，他的動態(tài)分配是由編譯器進行釋放，無需我們手工實現(xiàn)。
分配效率：棧是機器系統(tǒng)提供的數(shù)據(jù)結(jié)構(gòu)，計算機會在底層對棧提供支持：分配專門的寄存器存放棧的地址，壓棧出棧都有專門的指令執(zhí)行，這就決定了棧的效率比較高。堆則是C/C++函數(shù)庫提供的，它的機制是很復(fù)雜的，例如為了分配一塊內(nèi)存，庫函數(shù)會按照一定的算法（具體的算法可以參考數(shù)據(jù)結(jié)構(gòu)/操作系統(tǒng)）在堆內(nèi)存中搜索可用的足夠大小的空間，如果沒有足夠大小的空間（可能是由于內(nèi)存碎片太多），就有可能調(diào)用系統(tǒng)功能去增加程序數(shù)據(jù)段的內(nèi)存空間，這樣就有機會分到足夠大小的內(nèi)存，然后進行返回。顯然，堆的效率比棧要低得多。
從這里我們可以看到，堆和棧相比，由于大量new/delete的使用，容易造成大量的內(nèi)存碎片；由于沒有專門的系統(tǒng)支持，效率很低；由于可能引發(fā)用戶態(tài)和核心態(tài)的切換，內(nèi)存的申請，代價變得更加昂貴。所以棧在程序中是應(yīng)用最廣泛的，就算是函數(shù)的調(diào)用也利用棧去完成，函數(shù)調(diào)用過程中的參數(shù)，返回地址，EBP和局部變量都采用棧的方式存放。所以，我們推薦大家盡量用棧，而不是用堆。
雖然棧有如此眾多的好處，但是由于和堆相比不是那么靈活，有時候分配大量的內(nèi)存空間，還是用堆好一些。

如下例：

var lang = "Java";
lang = lang + "Script";

以上示例中的變量 lang 開始時包含字符串"Java"。而第二行代碼把 lang 的值重新定義為"Java" 與"Script"的組合，即"JavaScript"。實現(xiàn)這個操作的過程如下:首先創(chuàng)建一個能容納 10 個字符的 新字符串，然后在這個字符串中填充"Java"和"Script"，最后一步是銷毀原來的字符串"Java"和字 符串"Script"，因為這兩個字符串已經(jīng)沒用了。這個過程是在后臺發(fā)生的，而這也是在某些舊版本的瀏覽器(例如版本低于 1.0 的 Firefox、IE6 等)中拼接字符串時速度很慢的原因所在。但這些瀏覽器后來的版本已經(jīng)解決了這個低效率問題。
瀏覽器內(nèi)核的底層優(yōu)化尚不清楚，但是有人采用下面的方法進行優(yōu)化，只看一下方法了解即可，因為瀏覽器內(nèi)核優(yōu)化之后效率已提高不必如此大費周章。提高效率的辦法是用數(shù)組的join函數(shù)：
如：

var str ;
str = "this is a string";
str = str + ",another string.";
var tempArr = [] ,src,res;
src = "this is a string";
tempArr.push(src);
tempArr.push(",another string.");
res = tempArr.join("");

關(guān)于開發(fā)中需要注意的事項，主要是對于引用類型需要特別注意。
一、需要將原數(shù)據(jù) 存儲副本，并操作數(shù)據(jù)（如對請求回來的列表數(shù)據(jù)進行過濾顯示）。這是個很常見的問題，基本都遇到過這種情況，應(yīng)該已經(jīng)有處理經(jīng)驗。主要就是如果直接將原數(shù)據(jù)data賦值給新變量a，那么自己操作a時data的數(shù)據(jù)也會受到影響。解決辦法就是避免簡單表面的進行存副本操作，應(yīng)該存一個獨立的副本。如果數(shù)據(jù)源是數(shù)組結(jié)構(gòu)就Array.prototype.slice.call(arr), 如果數(shù)據(jù)源是對象結(jié)構(gòu)進行拷貝，至于深拷貝還是淺拷貝看自己的需要。個人感覺可以形成一種編碼習(xí)慣，類似場景要操作這樣的數(shù)據(jù)時先存一個獨立的副本（當(dāng)然也要看需求是否需要，自行權(quán)衡）。

二、在MVVM框架中會經(jīng)常出現(xiàn) 如model的某項數(shù)據(jù)是層數(shù)較深的復(fù)雜結(jié)構(gòu)時，更改了數(shù)據(jù)項下的某個值時，view并不更新，因為view model覺得自己沒有變化，沒有通知view。比如react-redux中，action觸發(fā)的reducer更新了store下某項深結(jié)構(gòu)數(shù)據(jù)下的某個值，又比如vue中簡單更改data中數(shù)組的某一項，都是不會觸發(fā)view更新的。解決辦法react中可少用深結(jié)構(gòu)數(shù)據(jù)盡量淺，也可以采用深拷貝更新store。vue是框架中做了hack處理，可使用$apply解決，也可以用官方點名的八大數(shù)組自帶方法處理。

本文總結(jié)了JS數(shù)據(jù)類型及其聲明賦值更新時在內(nèi)存堆棧中的表現(xiàn)，可以更深入的理解這些數(shù)據(jù)類型。并在有更深理解之后來回顧開發(fā)中的常見問題，做出總結(jié)，歡迎補充。