前端需要學習算法嗎 算法面的意義 職業規划

資深前端工程師

• 數據可視化
• VR & AR
• 框架級別開發
• 業務開發攻堅

獨當一面

• 管理能力
• 架構能力
• 程序能力

配股票和期權

Javascript + CSS + HTML
React/Vue/Node/Webpack/Gu,p 進階培養、直指大廠
算法、架構 回歸本質， 目標高T

T6

算法面的定義

大廠初中高級： 基礎程序
排序、遞歸、正則表達式、函數節流、柯理化程序
速度、質量、執行效率、對一些函數的掌握
業務經常用

大廠資深： 算法程序
全排序、八皇后、動態規划
千萬級性能優化， 你來

專家+首席： 競賽程序
圖的同構
淘寶到了節日的宣傳圖片， 幾萬張幾十萬張， 算法生成宣傳圖片攻克
react核心算法實現

舉例

總共5星

0星 數組展平簡單

function flattenOnce(arr){
    return [].concat(...arr)
}

arr = [[1, 2], [3, 4]]
[].concat([1, 2], [3, 4])
[].concat(...[ [1, 2], [3, 4] ])
[].apply(null, [ [1,2], [3, 4] ])

思考速度
對於語言的運用， 函數的運用， 小技巧的運用

1星 數組展平（遞歸）

展平一個數組， 【【1， 2】， 3， 【【【4】， 5】】】 = >【1， 2， 3， 4， 5】

function flatten(arr){
    return [].concat(
        ...arr.map(x => Array.isArray(x) ? flatten(x): x)
    )
}

抽象遞歸表達式， 根據科學理論來實現

初級工程師面試 10個人 有5個人可以答出來， 沒有打出來的直接走
5個中 有2個寫的很好， 面試官就很高興， 2個人基本都要
3個人寫的不簡介寫的復雜， 第一次沒寫對， 小環節出錯， 還要考核
對淘汰貢獻很大

1星 函數節流

過濾掉重復的滾動事件

監聽滾動的事件， 並進行UI處理
60毫秒響應一次
讓UI操作更流暢

時序圖思考：

function throttle(func, delay = 60){
    let lock = false； // 鎖
    return (...args) => {
        if(lock) {return}
        func(...args)
        lock = true // 上鎖
        setTimeOut(()=> {lock = false}, delay) // 60ms解鎖
    }
}

過濾重復的驗證事件（用戶輸入停止后300ms觸發驗證）

輸錯了框要變紅， 用戶輸入了錯誤字符馬上刪除， 這時候就沒有判斷的必要

時序圖思考：

function throttle(func, delay = 300, I = null){
    return (...args) = >{
        clearInterval(I)
        I = setTimeout(func.bind(null, ...args), delay)
        // I = setTimeout( (...args) => func(...args), delay)
    }
}

2星 柯里化

對於curry（foo）， g函數參數足夠4個， 就調用foo（a, b, c, d）， 如果小於4個就返回一個可以繼續積累參數的函數

const foo = curry( (a, b, c, d) => {
    console.log(a, b, c, d)
})
foo(1)(2)(3)(4) // 1 2 3 4
foo(1)(2)(3) // 不返回
const f = foo(1)(2)(3) //
f(5) // 1 2 3 5

高階函數處理函數， 閉包， allArgs參數保存函數

const curry = func => {
    const g = {...allArgs} => allArgs.length >= func.length ? func(...allArgs)
    : (...args) => g(...allArgs, ...args)
    return g
}

能答出來就很厲害了， 答得很好的高階工程師就可以錄用了
做不出來， 資深工程師必掛， 喪失很多機會（深度不夠）

3星 Y-組合子

去掉上述的const g
看不懂了直接截圖

前置知識lambda演算

4星 樹的編輯距離（DOM-DIFF）

將DOM抽象成一棵標簽樹
上圖

前置知識： 動態規划

算法對職業生涯的意義

• 工作機會 面試通過率
• 成倍效率 高效/快樂
• 語言跨度 語法容易、算法難！！ 職位跨度
• 保值 轉型成本低、越老越吃香

算法修煉什么

• 思維
• 專注
• 視野 算法是各行各業抽象出來的問題
• 技巧

整個思維整個價值
算法積累了幾百年， 學習算法就是學習精華
學習算法越早越好

如何修煉算法？

知識量巨大如何修煉？

理論知識+大量練習

• 《算法導論》 《概率》-人工智能 8個月 + 4個月
  挑戰人性
• 組內分享+引導+實戰 2個月+2個月（有成效、緩慢提升）
• 教學 + 練習 + 長期指導（算法1）