基础数据结构及js数据存储

因为以前前端开发跟数据存储打交道比较少，javascript又具有自动垃圾回收机制。数据结构以及存储相关的概念，其实是很容易被前端er忽略的。但是因为现在大前端的趋势，其实慢慢地，这些概念对于一个前端er来说也成了必须要掌握的技巧。

了解这些概念，对于我们去理解基本数据类型，引用数据类型，闭包，原型，原型链，事件循环等都有很好的促进作用。

接下来，我们先了解堆(heap)，栈(stack)，队列(queue)这三种数据结构，再来分析js数据存储相关的概念。

1 数据结构

1.1 栈 栈是一种先进后出的数据结构。

数据进入栈中之后，会被压到栈底。类似于我们平常用的羽毛球球管的概念，第一个进去的是在球管的管低，第一个出来的是位于球管管顶的最后一个进去的羽毛球。 这个概念会在我们之后需要讲到的执行上下文中用到。

1.2 堆 是一种树状的数据结构，跟书架类似。

我们在书架取书的时候是不需要知道书的内容的，只需要知道书名就知道需要取的是哪本书了。

1.3 队列 是一种先进先出(FIFO)的数据结构。

就像我们过安检，谁排第一个谁就第一个接受安检。这块的概念主要是在事件循环机制中用到，可以更好的帮我们理解事件循环机制。

好啦，介绍完我们的基本数据结构，接下来就要详细介绍js中的数据存储方式了。

2 js数据存储

2.1 基础数据类型及变量对象

我们都知道js中基础数据类型包括undefined,null,boolean,string,number。这些数据类型都是存储在变量对象中的，我们都是按值访问，可以直接操作保存在变量中的值。

其实，变量对象严格意义上来说也是存储在对内存中的，但是为了方便理解，我们还是需要对他和堆内存做区分。

2.2 引用数据类型及堆内存

引用数据类型是保存在堆内存中的对象，他的大小是不固定的。而js是不允许直接操作对象的堆内存空间的。我们实际操作对象的时候，是在操作对象的引用。所谓引用，可以理解成堆内存内对象的地址，给外界一个操作的入口。就像我们平常写信，邮递员都是按照地址去派发信件的。

2.3 数据存储图解

如下所示代码，我们定义了4个基础数据类型，定义了2个引用数据类型。基础数据类型在变量对象里可以直接对应对应的值，而引用数据类型是存储在堆里的，在变量对象中对应的是堆内存的地址。

而要真正理解引用数据类型，我们可以看下下面的赋值操作。

因为a是基础数据类型，c是引用数据。c会有一个引用指向在堆里面真正的对象。

现在，我们进行复制操作，把a的值复制给b的时候，是把a真正的值赋值给了b。但是，将c复制给d的时候，是把c的引用赋值给了d。如代码下方的图示。

因此，当我们修改b的值的时候，是不会影响a的值，但是修改c的值的时候，会影响d的值。因为我们修改c本质上是修改了堆内存里的数据。