javascript中有哪些棧

JavaScript中有哪些棧

在JavaScript中，棧（Stack）是一種常見的數據結構，遵循“后進先出”（LIFO, Last In First Out）的原則。棧在JavaScript中的應用非常廣泛，從函數調用棧到瀏覽器的歷史記錄管理，都可以看到棧的身影。本文將介紹JavaScript中常見的幾種棧及其應用場景。

1. 函數調用棧（Call Stack）

函數調用棧是JavaScript引擎用來管理函數調用和返回的一種棧結構。每當一個函數被調用時，JavaScript引擎會將該函數的執行上下文（Execution Context）壓入調用棧中。當函數執行完畢后，其執行上下文會從棧中彈出，控制權返回到調用該函數的位置。

function foo() {
    console.log('foo');
    bar();
}

function bar() {
    console.log('bar');
}

foo();

在上面的代碼中，foo函數調用時，foo的執行上下文被壓入調用棧。接著，foo函數內部調用了bar函數，bar的執行上下文也被壓入調用棧。當bar執行完畢后，其執行上下文從棧中彈出，控制權返回到foo。最后，foo執行完畢后，其執行上下文也從棧中彈出。

2. 瀏覽器的歷史記錄棧（History Stack）

瀏覽器的歷史記錄棧用于管理用戶在瀏覽器中訪問的頁面歷史。每當用戶訪問一個新頁面時，該頁面的URL會被壓入歷史記錄棧中。用戶點擊“后退”按鈕時，瀏覽器會從棧中彈出最近訪問的URL，并加載對應的頁面。

// 假設用戶依次訪問了以下頁面
history.pushState({}, '', '/page1');
history.pushState({}, '', '/page2');
history.pushState({}, '', '/page3');

// 用戶點擊“后退”按鈕
history.back(); // 返回到/page2
history.back(); // 返回到/page1

3. 手動實現的棧數據結構

雖然JavaScript本身沒有內置的棧數據結構，但我們可以使用數組來手動實現一個棧。數組的push和pop方法正好符合棧的“后進先出”原則。

class Stack {
    constructor() {
        this.items = [];
    }

    push(element) {
        this.items.push(element);
    }

    pop() {
        if (this.items.length === 0) {
            return "Underflow";
        }
        return this.items.pop();
    }

    peek() {
        return this.items[this.items.length - 1];
    }

    isEmpty() {
        return this.items.length === 0;
    }

    size() {
        return this.items.length;
    }
}

const stack = new Stack();
stack.push(10);
stack.push(20);
stack.push(30);
console.log(stack.pop()); // 輸出 30
console.log(stack.peek()); // 輸出 20

4. 遞歸調用棧

遞歸是函數調用自身的一種編程技巧。在遞歸調用中，每次函數調用都會將當前的執行上下文壓入調用棧中。如果遞歸深度過大，可能會導致棧溢出（Stack Overflow）錯誤。

function factorial(n) {
    if (n === 0) {
        return 1;
    }
    return n * factorial(n - 1);
}

console.log(factorial(5)); // 輸出 120

在上面的代碼中，factorial函數遞歸調用自身，每次調用都會將當前的執行上下文壓入調用棧中。當遞歸深度過大時，可能會導致棧溢出。

5. 事件循環中的任務棧（Task Queue）

在JavaScript的事件循環機制中，任務棧（Task Queue）用于管理異步任務的執行順序。任務棧中的任務按照“先進先出”（FIFO, First In First Out）的原則執行。常見的異步任務包括setTimeout、setInterval、Promise等。

setTimeout(() => {
    console.log('Timeout 1');
}, 0);

Promise.resolve().then(() => {
    console.log('Promise 1');
});

console.log('Sync');

在上面的代碼中，setTimeout和Promise的回調函數會被放入任務棧中。事件循環會先執行同步代碼，然后從任務棧中取出任務執行。因此，輸出順序為：

Sync
Promise 1
Timeout 1

總結

JavaScript中的棧結構在多個場景中都有應用，包括函數調用棧、瀏覽器的歷史記錄棧、手動實現的棧數據結構、遞歸調用棧以及事件循環中的任務棧。理解這些棧的工作原理和應用場景，有助于我們更好地掌握JavaScript的編程技巧和性能優化。