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

阿新 • • 發佈：2020-09-14

資深前端工程師

資料視覺化
VR & AR
框架級別開發
業務開發攻堅

獨當一面

管理能力
架構能力
程式能力

配股票和期權

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

演算法面的定義

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

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

專家+首席：競賽程式
圖的同構
淘寶到了節日的宣傳圖片，幾萬張幾十萬張，演算法生成宣傳圖片攻克
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
}

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