你真的了解“栈”吗？
堆栈(stack)又称为栈或堆叠,是计算机科学里最重要且最基础的数据结构之一,它按照FILO(First In Last Out,后进先出)的原则存储数据。
栈
一种遵从先进后出 (LIFO) 原则的有序集合；新添加的或待删除的元素都保存在栈的末尾，称作栈顶，另一端为栈底。在栈里，新元素都靠近栈顶，旧元素都接近栈底。
栈的定义：栈是一个数据集合，可以理解为只能在一端进行插入或删除操作的列表。
栈的特点：后进先出（last-in,first-out）, 简称LIFO表。类似一摞书：
image.png
栈的概念：
- 栈顶：允许插入和删除的这一端称为栈顶。
- 栈底：另外固定的这一端称为栈底。
- 空栈：不含任何元素的栈称为空栈。
栈的基本操作：
- 压栈：push
- 出栈：pop
- 取栈顶：gettop（查看栈顶元素，但不取走） li[-1]
image.png
栈的JS实现
class Stack {
constructor() {
this.items = []
}
// 入栈
push(element) {
this.items.push(element)
}
// 出栈
pop() {
return this.items.pop()
}
// 末位
get peek() {
return this.items[this.items.length - 1]
}
// 是否为空栈
get isEmpty() {
return !this.items.length
}
// 尺寸
get size() {
return this.items.length
}
// 清空栈
clear() {
this.items = []
}
// 打印栈数据
print() {
console.log(this.items.toString())
}
}
// 实例化一个栈
const stack = new Stack()
console.log(stack.isEmpty) // true
// 添加元素
stack.push(5)
stack.push(8)
// 读取属性再添加
console.log(stack.peek) // 8
stack.push(11)
console.log(stack.size) // 3
console.log(stack.isEmpty) // false
JS的调用栈
执行上下文：就是当前JS代码被解析和执行所在环境的抽象的概念
JS中的任何代码都是在执行上下文中运行的。（执行环境）
const one = () => {
two();
console.log('我是one');
};
const two = () => {
console.log('我是two');
};
one();
JS引擎创建一个新的全局执行上下文并且将这个执行上下文推入到当前的执行栈中
执行栈用于：存储在代码执行期间创建的所有的执行上下文
每当发生函数调用的时候，JS引擎都会为该函数创建一个新的执行上下文并且PUSH到当前执行栈的栈顶
当调用one函数的时候，js引擎为这个函数创建一个新的执行上下文并将其推到当前执行栈的栈顶
当调用two函数的时候，js引擎为这个函数创建一个新的执行上下文并将其推到当前执行栈的栈顶
当two函数调用完毕以后，它的执行上下文从当前执行栈中弹出。上下文的控制权移到当前执行栈中的下一个执行上下文。
递归与栈
函数的调用的本质：“压栈与出栈操作”。函数在在调用栈里边有一个特例，叫做递归
递归：自己调自己
递归调用，递归栈。LIFO
先进栈，到条件后再出栈，如果不出栈，就会导致：栈溢出
阶乘
const factor = (n) => {
if (n === 1) {
return 1;
}
return n * factor(n - 1);
};
console.log(factor(10));
尾调用优化
尾调用（Tail Call）是函数式编程的一个重要概念，本身非常简单，一句话就能说清楚，就是指某个函数的最后一步是调用另一个函数。
function f(x){
return g(x);
}
在开始进一步了解尾调用优化前，我们首先要熟悉两个概念，分别是调用栈（call stack）和调用帧（call frame）。
调用栈（call stack）
- 调用栈是一种栈结构的数据，它是由调用侦组成的。
- 调用栈记录了函数的执行顺序和函数内部变量等信息。
程序运行到一个函数，它就会将其添加到“调用栈”中，当从这个函数返回的时候，就会将这个函数从调用栈中删掉。
调用帧（call frame）
每个进入到调用栈中的函数，都会分配到一个单独的栈空间，称为“调用侦”。
在调用栈中每个“调用侦”都对应一个函数，最上方的调用帧称为“当前帧”，调用栈是由所有的调用侦形成的。
image.png
尾调用之所以与其他调用不同，就在于它的特殊的调用位置。
如果在函数A的内部调用函数B，那么在A的调用帧上方，还会形成一个B的调用帧。等到B运行结束，将结果返回到A，B的调用帧才会消失。如果函数B内部还调用函数C，那就还有一个C的调用帧，以此类推。所有的调用帧，就形成一个“调用栈（call stack）”。
话不多说，举个例子
function one() { console.log(111); }
function two() { one(); }
function three () { two(); }
three();
调用栈情况参考下图：
image.png
造成这种结果是因为每个函数在调用另一个函数的时候，并没有 return 该调用，所以JS引擎会认为你还没有执行完，会保留你的调用帧。
three() 里面调用了 two() 函数，并没有 return 该调用，所以在调用栈中保持自己的调用帧，同时 two() 函数的调用帧在调用栈中生成，同理，two() 函数又调用了 one() 函数，最后执行到 one() 函数的时候，没有再调用其他函数，这里没有显示声明 return，所以这里默认 return undefined。
one() 执行完了，销毁调用栈中自己的记录，依次销毁 two() 和 three() 的调用帧，最后完成整个流程。
如果对上面的例子做如下修改：
function one() { console.log(111); }
function two() { return one(); }
function three () { return two(); }
three();
如果尾调用优化生效，流程图就会变成这样：
image.png
我们可以很清楚的看到，尾调用由于是函数的最后一步操作，所以不需要保留外层函数的调用记录，只要直接用内层函数的调用记录取代外层函数的调用记录就可以了，调用栈中始终只保持了一条调用帧。
这就叫做尾调用优化（Tail call optimization），即只保留内层函数的调用帧。如果所有的函数都是尾调用的话，调用位置、内部变量等信息都不会再用到了，那么在调用栈中的调用帧始终只有一条，这样会节省很大一部分的内存，这也是尾调用优化的意义。
尾调用尾递归
函数调用自身，称为递归。如果尾调用自身，就称为尾递归。
递归非常耗费内存，因为需要同时保存成千上百个调用帧，很容易发生“栈溢出”错误（stack overflow）。但对于尾递归来说，由于只存在一个调用帧，所以永远不会发生“栈溢出”错误。
function factorial(n) {
if (n === 1) return 1;
return n * factorial(n - 1);
}
factorial(5) // 120
上面代码是一个阶乘函数，计算n的阶乘，最多需要保存n个调用记录，空间复杂度 O(n) 。
如果改写成尾递归，只保留一个调用记录，空间复杂度 O(1) 。
function factorial(n, total) {
if (n === 1) return total;
return factorial(n - 1, n * total);
}
factorial(5, 1) // 120
还有一个比较著名的例子，就是计算 Fibonacci 数列，也能充分说明尾递归优化的重要性。
非尾递归的 Fibonacci 数列实现如下。
function Fibonacci (n) {
if ( n <= 1 ) {return 1};
return Fibonacci(n - 1) + Fibonacci(n - 2);
}
Fibonacci(10) // 89
Fibonacci(100) // 超时
尾递归优化过的 Fibonacci 数列实现如下。
function Fibonacci2 (n , ac1 = 1 , ac2 = 1) {
if( n <= 1 ) {return ac2};
return Fibonacci2 (n - 1, ac2, ac1 + ac2);
}
Fibonacci2(100) // 573147844013817200000
由此可见，“尾调用优化”对递归操作意义重大，所以一些函数式编程语言将其写入了语言规格。ES6 亦是如此，第一次明确规定，所有 ECMAScript 的实现，都必须部署“尾调用优化”。
朵拉姐【ITI2018】的前端摸鱼技术群
欢迎大家技术交流 内推 摸鱼 求助皆可 - 链接
