前端需要学习算法吗 算法面的意义 职业规划

资深前端工程师

• 数据可视化
• 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）