前端算法题的修炼等级

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

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 粉丝
0 条评论
推荐阅读
「多图预警」完美实现一个@功能
一天产品大大向 boss 汇报完研发成果和产品业绩产出,若有所思的走出来,劲直向我走过来,嘴角微微上扬。产品大大:boss 对我们的研发成果挺满意的,balabala...(内心 OS:不听,讲重点)产品大大:咱们的客服 I...

wuwhs39阅读 4.7k评论 5

封面图
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco19阅读 2k评论 2

在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 1.9k

封面图
你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...

XboxYan20阅读 1.5k评论 1

封面图
「彻底弄懂」this全面解析
当一个函数被调用时,会创建一个活动记录(有时候也称为执行上下文)。这个记录会包含函数在 哪里被调用(调用栈)、函数的调用方法、传入的参数等信息。this就是记录的其中一个属性,会在 函数执行的过程中用到...

wuwhs17阅读 2.4k

封面图
学会这些 Web API 使你的开发效率翻倍
随着浏览器的日益壮大,浏览器自带的功能也随着增多,在 Web 开发过程中,我们经常会使用一些 Web API 增加我们的开发效率。本篇文章主要选取了一些有趣且有用的 Web API 进行介绍,并且 API 可以在线运行预览。C...

九旬13阅读 1.5k

封面图
用了那么久的 SVG,你还没有入门吗?
其实在大部分的项目中都有 直接 或 间接 使用到 SVG 和 Canvas,但是在大多数时候我们只是选择 简单了解 或 直接跳过,这有问题吗?没有问题,毕竟砖还是要搬的!

熊的猫16阅读 1.5k评论 2

封面图

前端攻城狮一枚

220 声望
11 粉丝
宣传栏