## 一、棧
  棧(stack)是一種操作受限的線性表數據結構,基于后進先出(LIFO)策略的集合類型,例如函數中的臨時變量符合后進先出的特性,因此用棧保存最合適。
  在入棧和出棧過程中所需的空間復雜度是 O(1),時間復雜度也是 O(1)。空間復雜度是指運行算法還需要的額外存儲空間。
  注意,內存中的堆棧和數據結構中的堆棧不是一個概念,前者是真實存在的物理區,后者是抽象的數據存儲結構。
  面試題30[包含min函數的棧](https://leetcode-cn.com/problems/bao-han-minhan-shu-de-zhan-lcof/)。在壓棧時,與之前的最小值比較,每次把兩者較小的那個值存放到輔助棧中。
  面試題31[棧的壓入和彈出序列](https://leetcode-cn.com/problems/zhan-de-ya-ru-dan-chu-xu-lie-lcof/)。如果彈出的數字是棧頂,則彈出;如果彈出的數字不在棧頂,則把還沒入棧的數字壓入到輔助棧中,直到棧頂是彈出數字為止。
**1)括號匹配**
  用正確的類型和順序匹配括號,例如“(”跟“)”匹配,“\[”跟“\]”匹配,“{”跟“}”匹配。例題:LeetCode的[20\. 有效的括號](https://leetcode-cn.com/problems/valid-parentheses/)。
  第一種思路是,當遇到匹配的最小括號對時,將它們從棧中刪除(即出棧),如果最后棧為空,那么它是有效的括號,反之不是,[代碼如下所示](https://codepen.io/strick/pen/RwrEWaP)。
~~~
function isValidParentheses(s) {
const length = s.length;
let i = 0;
const stack = [];
while (i < length) {
let stackLen = stack.length > 0 ? stack.length - 1 : stack.length;
if (
(stack[stackLen] == "(" && s[i] == ")") ||
(stack[stackLen] == "{" && s[i] == "}") ||
(stack[stackLen] == "[" && s[i] == "]")
) {
stack.pop();
i++;
continue;
}
stack.push(s[i]);
i++;
}
return stack.length === 0;
}
~~~
  第二種思路是巧妙的利用一張映射表,以右括號為鍵,左括號為值。先判斷當前字符是否是左括號,若是,就入棧,否則匹配當前棧頂元素是否與當前字符匹配。
~~~
function isValidParentheses(s) {
const stack = [],
map = { "}": "{", "]": "[", ")": "(" };
for (let i = 0, len = s.length; i < len; i++) {
let c = s[i];
if (!map[c]) {
stack.push(c);
continue;
}
if (stack.length > 0 && map[c] != stack.pop())
return false;
}
return stack.length == 0;
}
~~~
**2)算術表達式求值**
  ( 1 + ( 2 + 3 ) \* ( 4 \* 5 ) ) 是一個算術表達式,如果將4乘以5,把3加上2,取它們的積然后加1,就得到了101。
  表達式由括號、運算符和操作數(數字)組成,可以用兩個棧分別保存運算符和操作數來完成算術求值,處理過程如下所列。
  (1)將操作數壓入操作數棧;
  (2)將運算符壓入運算符棧;
  (3)忽略左括號;
  (4)在遇到右括號時,彈出一個運算符,彈出所需數量的操作數,并將運算符和操作數的運算結果壓入操作數棧。
  源碼[如下所示](https://codepen.io/strick/pen/VweqvGe)。例題:LeetCode的[150\. 逆波蘭表達式求值](https://leetcode-cn.com/problems/evaluate-reverse-polish-notation/)。
~~~
function evalExpress(s) {
const length = s.length;
let i = 0;
const ops = [],
vals = [];
while (i < length) {
let word = s[i];
if (word == "(") {
} else if (word == "+" || word == "-" || word == "*" || word == "/")
ops.push(word);
else if (word == ")") {
let op = ops.pop(),
val = vals.pop();
if (op == "+") val = vals.pop() + val;
else if (op == "-") val = vals.pop() - val;
else if (op == "*") val = vals.pop() * val;
else if (op == "/") val = vals.pop() / val;
vals.push(val);
} else
vals.push(parseInt(word));
i++;
}
return vals.pop();
}
~~~
## 二、隊列
  隊列(queue)也是一種操作受限的線性表數據結構,基于先進先出(FIFO)策略的集合類型,隊列的應用非常廣泛,例如循環隊列、阻塞隊列、并發隊列等。
  棧只需一個棧頂指針,而隊列需要兩個:隊首指針和隊尾指針。
  面試題9[用兩個棧實現隊列](https://leetcode-cn.com/problems/yong-liang-ge-zhan-shi-xian-dui-lie-lcof/)。先進后出的棧實現先進先出的隊列,一系列棧的壓入和彈出模擬隊列。
  面試題59[窗口滑動的最大值](https://leetcode-cn.com/problems/hua-dong-chuang-kou-de-zui-da-zhi-lcof/)。只把可能成為滑動窗口最大值的數存入一個兩端開口的隊列(deque)。延伸題:[隊列的最大值](https://leetcode-cn.com/problems/dui-lie-de-zui-da-zhi-lcof/)。
**1)循環隊列**
  循環隊列是首尾相連的隊列,這樣可避免在出隊時進行數據搬移的操作,但需要準確的判斷出隊空和隊滿,[如下所示](https://codepen.io/strick/pen/MWKZymb)。例題:LeetCode的[641\. 設計循環雙端隊列](https://leetcode-cn.com/problems/design-circular-deque/)。
~~~
class CircularQueue {
constructor(capacity) {
this.items = [];
this.n = capacity; //隊列大小
this.head = 0; //隊首指針
this.tail = 0; //隊尾指針
}
enqueue(item) {
const { head, tail, n } = this;
//隊滿
if ((tail + 1) % n == head) return false;
this.items[tail] = item;
//隊尾沒有存儲數據,會浪費一個數組的存儲空間
this.tail = (tail + 1) % n;
return true;
}
dequeue() {
const { head, tail, n, items } = this;
//隊空
if (head == tail) return null;
const result = items[head];
this.head = (head + 1) % n;
return result;
}
}
~~~
## 三、散列表
  散列表(Hash Table)也叫哈希表,一種以空間換時間的方式,是數組的擴展,可根據鍵(Key)而直接訪問內存儲存位置的數據結構。
  它通過計算一個關于鍵值的函數,將所需查詢的數據映射到表中一個位置來訪問記錄,提升查找速度。
  這個映射函數稱做散列函數,存放記錄的數組稱做散列表。
  散列函數的特點如下:
  (1)計算得到的結果是一個非負整數。
  (2)如果 key1 = key2,那 hash(key1) == hash(key2)。
  (3)如果 key1 ≠ key2,那 hash(key1) ≠ hash(key2)。
  但即使是著名的MD5、SHA等散列算法,也不能避免散列沖突。當出現沖突時,可采用拉鏈法(Chaining)和線性探測法(Linear Probing)。
  所以在散列表中查找數據,最好情況是 O(1),最壞情況是 O(n)。
  LeetCode的[242\. 有效的字母異位詞](https://leetcode-cn.com/problems/valid-anagram/),除了排序字符之外,還可用散列表記錄字符出現的次數。
  LeetCode的[1\. 兩數之和](https://leetcode-cn.com/problems/two-sum/),將數組放入一個散列表中,用總數減去遍歷的值,判斷差是否可在散列表中查到。復雜度升級后的例題:[15\. 三數之和](https://leetcode-cn.com/problems/3sum/)、[18\. 四數之和](https://leetcode-cn.com/problems/4sum/)。
## 四、位運算
  位運算就是直接對整數在內存中的二進制進行操作。由于位運算不需要轉成十進制,因此處理速度非常快。位運算的總結摘錄于《[算法面試通關40講](https://time.geekbang.org/course/intro/100019701)》。
  XOR(異或)的特點如下:
~~~
x^0 = x
x^1s = ~x; //1s是一種全為1的數,即1s = ~0
x^(~x) = 1s;
x^x = 0;
a^b=c => a^c=b, b^c=a //swap
a^b^c = a^(b^c) = (a^b)^c
~~~
  常用的位運算包括:
~~~
x&1 == 1 OR == 0 //判斷奇偶(x%2==1)。
x = x&(x-1) //將最低位的 1 清零。
x & -x //得到最低位的 1。
~~~
  更復雜的位運算包括:
~~~
x & (~0 << n) //將x最右邊的n位清零
(x >> n) & 1 //獲取x的第n位值(0或1)
x & (1 << (n-1)) //獲取x的第n位的冪值
x | (1 << n) //僅將第n位置為1
x & (~(1 << n)) //僅將第n位置為0
x & ((1 << n) - 1) //將x最高位至第n位(含)清零
x & (~((1 << (n+1)) - 1)) //將第n位至第0位(含)清零
~~~
  LeetCoded的[191\. 位1的個數](https://leetcode-cn.com/problems/number-of-1-bits/),循環執行 x&(x-1),并且記錄循環次數,判斷條件是x和0是否相同。
  LeetCoded的[231\. 2的冪](https://leetcode-cn.com/problems/power-of-two/),仍然使用 x&(x-1),然后判斷x是否等于0。
  LeetCoded的[338\. 比特位計數](https://leetcode-cn.com/problems/counting-bits/),使用遞推公式 count\[i\] = count\[i&(i-1)\] + 1,只需一遍循環就能得出1的數量。
*****
> 原文出處:
[博客園-數據結構和算法躬行記](https://www.cnblogs.com/strick/category/1809992.html)
已建立一個微信前端交流群,如要進群,請先加微信號freedom20180706或掃描下面的二維碼,請求中需注明“看云加群”,在通過請求后就會把你拉進來。還搜集整理了一套[面試資料](https://github.com/pwstrick/daily),歡迎閱讀。

推薦一款前端監控腳本:[shin-monitor](https://github.com/pwstrick/shin-monitor),不僅能監控前端的錯誤、通信、打印等行為,還能計算各類性能參數,包括 FMP、LCP、FP 等。
- ES6
- 1、let和const
- 2、擴展運算符和剩余參數
- 3、解構
- 4、模板字面量
- 5、對象字面量的擴展
- 6、Symbol
- 7、代碼模塊化
- 8、數字
- 9、字符串
- 10、正則表達式
- 11、對象
- 12、數組
- 13、類型化數組
- 14、函數
- 15、箭頭函數和尾調用優化
- 16、Set
- 17、Map
- 18、迭代器
- 19、生成器
- 20、類
- 21、類的繼承
- 22、Promise
- 23、Promise的靜態方法和應用
- 24、代理和反射
- HTML
- 1、SVG
- 2、WebRTC基礎實踐
- 3、WebRTC視頻通話
- 4、Web音視頻基礎
- CSS進階
- 1、CSS基礎拾遺
- 2、偽類和偽元素
- 3、CSS屬性拾遺
- 4、浮動形狀
- 5、漸變
- 6、濾鏡
- 7、合成
- 8、裁剪和遮罩
- 9、網格布局
- 10、CSS方法論
- 11、管理后臺響應式改造
- React
- 1、函數式編程
- 2、JSX
- 3、組件
- 4、生命周期
- 5、React和DOM
- 6、事件
- 7、表單
- 8、樣式
- 9、組件通信
- 10、高階組件
- 11、Redux基礎
- 12、Redux中間件
- 13、React Router
- 14、測試框架
- 15、React Hooks
- 16、React源碼分析
- 利器
- 1、npm
- 2、Babel
- 3、webpack基礎
- 4、webpack進階
- 5、Git
- 6、Fiddler
- 7、自制腳手架
- 8、VSCode插件研發
- 9、WebView中的頁面調試方法
- Vue.js
- 1、數據綁定
- 2、指令
- 3、樣式和表單
- 4、組件
- 5、組件通信
- 6、內容分發
- 7、渲染函數和JSX
- 8、Vue Router
- 9、Vuex
- TypeScript
- 1、數據類型
- 2、接口
- 3、類
- 4、泛型
- 5、類型兼容性
- 6、高級類型
- 7、命名空間
- 8、裝飾器
- Node.js
- 1、Buffer、流和EventEmitter
- 2、文件系統和網絡
- 3、命令行工具
- 4、自建前端監控系統
- 5、定時任務的調試
- 6、自制短鏈系統
- 7、定時任務的進化史
- 8、通用接口
- 9、微前端實踐
- 10、接口日志查詢
- 11、E2E測試
- 12、BFF
- 13、MySQL歸檔
- 14、壓力測試
- 15、活動規則引擎
- 16、活動配置化
- 17、UmiJS版本升級
- 18、半吊子的可視化搭建系統
- 19、KOA源碼分析(上)
- 20、KOA源碼分析(下)
- 21、花10分鐘入門Node.js
- 22、Node環境升級日志
- 23、Worker threads
- 24、低代碼
- 25、Web自動化測試
- 26、接口攔截和頁面回放實驗
- 27、接口管理
- 28、Cypress自動化測試實踐
- 29、基于Electron的開播助手
- Node.js精進
- 1、模塊化
- 2、異步編程
- 3、流
- 4、事件觸發器
- 5、HTTP
- 6、文件
- 7、日志
- 8、錯誤處理
- 9、性能監控(上)
- 10、性能監控(下)
- 11、Socket.IO
- 12、ElasticSearch
- 監控系統
- 1、SDK
- 2、存儲和分析
- 3、性能監控
- 4、內存泄漏
- 5、小程序
- 6、較長的白屏時間
- 7、頁面奔潰
- 8、shin-monitor源碼分析
- 前端性能精進
- 1、優化方法論之測量
- 2、優化方法論之分析
- 3、瀏覽器之圖像
- 4、瀏覽器之呈現
- 5、瀏覽器之JavaScript
- 6、網絡
- 7、構建
- 前端體驗優化
- 1、概述
- 2、基建
- 3、后端
- 4、數據
- 5、后臺
- Web優化
- 1、CSS優化
- 2、JavaScript優化
- 3、圖像和網絡
- 4、用戶體驗和工具
- 5、網站優化
- 6、優化閉環實踐
- 數據結構與算法
- 1、鏈表
- 2、棧、隊列、散列表和位運算
- 3、二叉樹
- 4、二分查找
- 5、回溯算法
- 6、貪心算法
- 7、分治算法
- 8、動態規劃
- 程序員之路
- 大學
- 2011年
- 2012年
- 2013年
- 2014年
- 項目反思
- 前端基礎學習分享
- 2015年
- 再一次項目反思
- 然并卵
- PC網站CSS分享
- 2016年
- 制造自己的榫卯
- PrimusUI
- 2017年
- 工匠精神
- 2018年
- 2019年
- 前端學習之路分享
- 2020年
- 2021年
- 2022年
- 2023年
- 2024年
- 日志
- 2020