详解 JavaScript 三种数据结构

在 JavaScript 中，有三种常用的数据结构是我们必须要了解的，它们分别是栈、堆和队列。它们是理解整个 JavaScript 核心的基础，在 JavaScript 中分别由不同的应用场景。

栈

当我们在学习中遇到栈这个名词的时候，可能面临的是不同的含义。如果没有理清不同的应用场景，就会给我们的理解带来困惑。

场景一：栈是一种数据结构，它表达的是数据的一种存取方式，这是一种理论基础。

场景二：栈可用来规定代码的执行顺序，在 JavaScript 中叫做函数调用栈，它是根据栈数据结构理论而实现的一种实践。

场景三：栈表达的是一种数据在内存中的存储区域，通常叫做栈区。但是 JavaScript 作为一门高级程序语言，并没有同其他语言那样区分栈区和堆区，因此这里不做扩展。我们可以简单粗暴认为在 JavaScript 中，所有的数据都是存放在堆内存空间中的。

这里需要重点掌握栈这种数据结构的原理与特点，学习它的最终目的是掌握函数调用栈的运行方式。通过下图我们可以直观的理解栈的存取方式。

如上图所示，在乒乓球盒子中依次放入乒乓球，当想要取出来使用的时候，处于盒子顶端的乒乓球 5，它一定是最后被放进去且最先被取出来的。而想要使用底层的乒乓球 1，则必须要先将上面的所有乒乓球取出来以后才能取出。但乒乓球 1 是最先放入盒子中的。

这种乒乓球的存取方式与栈数据结构如出一辙。这种存取方式的特点可总结为先进后出，后进先出（LIFO, Last In, First Out）。如图右侧所示，处于栈顶的数据true，最后进栈，最先出栈。处于栈底的数据 1，最先进栈，最后出栈。

在 JavaScript 中，数组（Array）提供了两个栈方法来对应栈的这种存取方式，它们在实践中非常常用。

push：向素组末尾添加元素（进栈方法）

push方法可以接收任意参数，并将其逐个添加到数组末尾，并返回数组修改后的长度。

let a =[];
a.push(1); // a:[1]
a.push(1, 2, 3, 6); // a:[1, 2, 3, 6]
let 1 = a .push(5); // a:[1, 3, 3, 6, 5] l:5

pop：弹出数据最末尾的一个元素（出栈方法）

pop方法会删除数组最末尾的一个元素，并返回。

let a = [1, 2, 3];
a.pop(); // a:[1, 2]

// a.pop()的返回结果为 3

堆

堆数据结构通常是一种树状结构。它的存取方式与在书架上取书的方式非常相似。书虽然整齐地摆放在书架上，但是只要知道书的名字，在书架中找到它之后就可以很方便地取出，甚至我们都不用关心它的存放顺序，即不用像从乒乓球盒子中取乒乓球那样，必须将一些乒乓球拿出来之后才能取到中间的某一个乒乓球。

该示意图可以用字面量对象的形式体现出来。

let testHeap = {
    a: 10,
    b: 20,
    c: {
        m: 100,
        n: 110
    }
}

当我们想要访问 a 时，只需要通过testHeap.a来访问即可，而不用关心 a、b、c 的具体顺序。

队列

在 JavaScript 中，理解队列数据结构的目的是为了搞清楚事件循环机制到底是怎么回事。队列是一种先进先出（FIFO）的数据结构。正如同排队过安检一样，排在队伍前面的人一定是最先过安检的人。队列原理如下图所示。