2

纵观大厂的前端算法题,有难有易,下面就难度等级划分为几个类型供大家参考。

1. 熟练掌握语言的基本语法以及常用函数的基本用法(1星难度)

展开一个数组,数组最多二维:[[1,2],[3,4]] => [1,2,3,4]

解答:主要考察spread运算符以及数组的concat用法。

function flatten(arr) {
    return [].concat(...arr);
}

2. 使用递归,以及其他高级应用的实现(2星难度)

例1:展开一个数组(多维): [[1,2],3,[4,[5,6,[7,8]]]] => [1,2,3,4,5,6,7,8]
解答:考察递归的思想,其实递归是一种数学思想,把问题本身转化为能够用递归的形式表示的数学公式,那么再复杂的递归问题也可以迎刃而解。

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

例2:写一个节流函数,使得用户滚动滚动条的时候每60ms才触发一次scroll事件
解答:利用“加锁”的思想。

function throttle(func, delay = 30) {
    let lock = false;
    return (...args) => {
        if(lock) return;
        func(...args);
        lock = true;
        setTimeout(() => {lock = false}, delay);
    }
}
document.addEventListener("scroll", throttle(console.log("scrolling")));

例3: 写一个节流函数,使得用户输入停止后300ms才触发验证
解答:每来一次事件,都重启计数器。

function throttle(func, delay = 300, timeoutId = null) {
    return (...args) => {
        clearTimeout(timeoutId);
        timeoutId = setTimeout((...args) => func(...args), delay)
    }
}

3. 函数式编程(3星难度)

实现函数柯里化
解答:柯里化通常也称部分求值,其含义是给函数分步传递参数,每次传递参数后部分应用参数,并返回一个更具体的函数接受剩下的参数,这中间可嵌套多层这样的接受部分参数函数,直至返回最后结果。

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

魔法博士
220 声望11 粉丝

前端攻城狮一枚