前端算法题的修炼等级
纵观大厂的前端算法题,有难有易,下面就难度等级划分为几个类型供大家参考。
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;
}
推荐阅读
「多图预警」完美实现一个@功能
一天产品大大向 boss 汇报完研发成果和产品业绩产出,若有所思的走出来,劲直向我走过来,嘴角微微上扬。产品大大:boss 对我们的研发成果挺满意的,balabala...(内心 OS:不听,讲重点)产品大大:咱们的客服 I...
wuwhs赞 39阅读 4.7k评论 5
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...
chokcoco赞 19阅读 2k评论 2
在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...
边城赞 17阅读 1.9k
你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...
XboxYan赞 20阅读 1.5k评论 1
「彻底弄懂」this全面解析
当一个函数被调用时,会创建一个活动记录(有时候也称为执行上下文)。这个记录会包含函数在 哪里被调用(调用栈)、函数的调用方法、传入的参数等信息。this就是记录的其中一个属性,会在 函数执行的过程中用到...
wuwhs赞 17阅读 2.4k
学会这些 Web API 使你的开发效率翻倍
随着浏览器的日益壮大,浏览器自带的功能也随着增多,在 Web 开发过程中,我们经常会使用一些 Web API 增加我们的开发效率。本篇文章主要选取了一些有趣且有用的 Web API 进行介绍,并且 API 可以在线运行预览。C...
九旬赞 13阅读 1.5k
用了那么久的 SVG,你还没有入门吗?
其实在大部分的项目中都有 直接 或 间接 使用到 SVG 和 Canvas,但是在大多数时候我们只是选择 简单了解 或 直接跳过,这有问题吗?没有问题,毕竟砖还是要搬的!
熊的猫赞 16阅读 1.5k评论 2
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。