JS版資料結構第一篇(棧)

由於前端上手比較快,而且平時開發時大部分寫的都是業務邏輯以及互動,常常導致我們被一些後端人員'鄙視',這無疑是對我們前端開發人員是不公平的,前端技術更新迭代很快,而且知識點瑣碎,想要學好前端是需要一定的持續性學習能力以及創造性和好奇心的,學好前端並不是一件很容易的事情。

我們都知道 程式設計=演算法+資料結構

無論是前端還是後端,作為開發人員對這些基礎知識的掌握程度決定了你以後的技術道路發展的上限,演算法和資料結構對程式設計師的重要程度不言而喻。

拋開一些偏見,我們不能否認的是:

1. 有很多非科班出身的前端同學對資料結構的理解並不是很深,甚至一些資料結構型別的定義都不清楚。
2. 網上利用JS實現的資料結構的資料有限。

針對這種實際情況,我將分六篇部落格介紹最常見的幾種資料結構,並結合LeetCode上面的經典原題利用js方法進行實際題目的求解,包括:

• 棧
• 佇列
• 連結串列
• 矩陣
• 二叉樹
• 堆

如果你也是一名想夯實一下資料結構基礎的前端開發人員,在網上又找不到合適的資源的話,那麼小弟的部落格一定會對你有所幫助。

棧（stack）

棧的定義

作為資料結構中最簡單的一種想必大家對棧都有所瞭解，我們先來看一下百度百科上'棧'的定義

而當你拿到這杯酒時,

var arr = [2,7,1]
arr.push(8) 
arr.push(2)
arr.pop()
arr.pop()
arr.pop()複製程式碼

程式碼如下:

export default (arr) => {  
    // 新建空棧,儲存處理後的結果  
        let result = []  
    // 上一輪的資料  
        let pre1  
    // 上上輪的資料  
        let pre2  
    // 對傳進來的陣列進行遍歷，遍歷的目的是處理得分  
    arr.forEach(item => {    
        switch (item) {      
            case 'C':        
                if (result.length) {          
                    result.pop()        
                }        
                break      
            case 'D':        
                pre1 = result.pop()        
                result.push(pre1, pre1 * 2)       
                break      
            case '+':       
                pre1 = result.pop()       
                pre2 = result.pop()      
                result.push(pre2, pre1, pre2 + pre1)      
                break     
            default:
                // *1是為了將item轉為number型別       
                result.push(item * 1)    }  })
     //利用reduce進行求和 
     return result.reduce((prev, cur) =>  prev + cur )}複製程式碼

例題二:最大矩形

更多的註釋寫在程式碼裡,我把原始碼發出來供大家參考

export default arr => {
  // 用來儲存處理過後的二維陣列  
  let changeArr = []
  // 將傳入的二維陣列根據每一項的連續1的索引位置遍歷  
  arr.forEach((item, i) => {
    //每一項的索引    
    let itemArr = []    
    let str = item.join('')    
    let reg = /1{2,}/g
    // 連續1的匹配結果    
    let execRes = reg.exec(str)
    //如果不為null就繼續匹配    
    while (execRes) {
      // 將第i項匹配到的第j組1的起止位置推入      
      itemArr.push([execRes.index, execRes.index + execRes[0].length - 1])      
      execRes = reg.exec(str)    
    }
    // 將第i項的匹配結果推入    
    changeArr.push(itemArr)  })
    // 用來儲存面積  
    let area = []  
    // 取交集函式  
    let find = (arr, n = 1) => {    
        // 深拷貝arr陣列 防止由於引用導致每次執行函式被改變    
        let copyArr = [].concat(arr)    
        // 陣列最後一項    
        let last = copyArr.pop()    
        // 陣列倒數第二項    
        let next = copyArr.pop()
        // 最後一項和倒數第二項的每一項   
        let lastItem, nextItem
        // 取到的交集陣列    
        let recuArr = []
        // 作為每次取到交集的臨時變數    
        let item = []
        // 已遍歷的行數    
        n++
        // 將每相鄰兩項的每個區間分別取交集    
        for (let i = 0; i < last.length; i++) {      
            lastItem = last[i]      
            for (let j = 0; j < next.length; j++) {        
            nextItem = next[j]        
            // 開始取交集       
            // 若有交集        
            if (!(Math.max(...lastItem) <= Math.min(...nextItem) ||                   
                    Math.max(...nextItem) <= Math.min(...lastItem))) {           
                item = [Math.max(lastItem[0], nextItem[0]), Math.min(lastItem[1], nextItem[1])]          
                recuArr.push(item)
            // 求此時交集的面積並推入area           
            area.push((item[1] - item[0] + 1) * n)        }      }    }    
            // 若遍歷完了所有情況都沒有交集,則返回false
            if (recuArr.length === 0) {
              return false
              } else {
              // 有交集,繼續遞迴遍歷
              if (copyArr.length > 0) {
                copyArr.push(recuArr)
                find(copyArr, n)
              }
            }
      }
      //將陣列一直遞減,每一行都作為第一行找一次交集
      while (changeArr.length > 1) {
          find(changeArr)
          changeArr.pop()
      }
      //最後將儲存面積的矩形陣列的最大值返回
      return area.length === 0 ? 0 : Math.max(...area)
    }複製程式碼

參考

1. 百度百科
2. 今日頭條視訊架構前端負責人銀國徽老師的《js資料結構與演算法》
3. leetCode

總結

作為一種比較簡單的資料結構,棧在js中很常見,也比較容易理解,我們可以利用js原生的陣列API就可以實現。

下一篇我將介紹佇列的使用方法。