前端面试必须掌握的手写题：进阶篇

最新推荐文章于 2025-01-19 12:06:03 发布
原创 最新推荐文章于 2025-01-19 12:06:03 发布 · 676 阅读 · 9 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
本文详细介绍了前端面试中常见的手写题，包括并发控制的实现、Promise异步调度器、懒加载、虚拟DOM、SWR缓存、发布-订阅模式等，旨在帮助面试者理解和记忆这些关键知识点。

本文是前端面试必须掌握的手写题系列的最后一篇，这个系列几乎将我整理和遇到的题目都包含到了，这里还是想强调一下，对于特别常见的题目最好能“背”下来，不要眼高手低，在面试的时候不需要再进行推导分析直接一把梭，后续会整理分享一些其他的信息，希望对你能有所帮助

前端面试必须掌握的手写题：基础篇

前端面试必须掌握的手写题：场景篇

前端面试必须掌握的手写题：进阶篇

🔥请求并发控制

多次遇到的题目，而且有很多变种，主要就是同步改异步

function getUrlByFetch() {
  let idx = maxLoad;

  function getContention(index) {
    fetch(pics[index]).then(() => {
      idx++;
      if(idx < pics.length){
        getContention(idx);
      }
    });
  }
  function start() {
    for (let i = 0; i < maxLoad; i++) {
      getContention(i);
    }
  }
  start();
}

🔥带并发限制的promise异步调度器

上一题的其中一个变化

function taskPool() {
  this.tasks = [];
  this.pool = [];
  this.max = 2;
}

taskPool.prototype.addTask = function(task) {
  this.tasks.push(task);
  this.run();
}

taskPool.prototype.run = function() {
  if(this.tasks.length === 0) {
    return;
  }
  let min = Math.min(this.tasks.length, this.max - this.pool.length);
  for(let i = 0; i<min;i++) {
    const currTask = this.tasks.shift();
    this.pool.push(currTask);
    currTask().finally(() => {
      this.pool.splice(this.pool.indexOf(currTask), 1);
      this.run();
    })
  }
}

🔥🔥🔥实现lazy链式调用: person.eat().sleep(2).eat()

解法其实就是将所有的任务异步化，然后存到一个任务队列里

function Person() {
  this.queue = [];
  this.lock = false;
}

Person.prototype.eat = function () {
  this.queue.push(() => new Promise(resolve => { console.log('eat'); resolve(); }));
  
  return this;
}

Person.prototype.sleep = function(time, flag) {
  this.queue.push(() => new Promise(resolve => {
    setTimeout(() => {
      console.log('sleep', flag);
      resolve();
    }, time * 1000)
  }));
  
  return this;
}

Person.prototype.run = async function() {
  if(this.queue.length > 0 && !this.lock) {
    this.lock = true;
    const task = this.queue.shift();
    await task();
    this.lock = false;
    this.run();
  }
}

const person = new Person();
person.eat().sleep(1, '1').eat().sleep(3, '2').eat().run();

方法二

class Lazy {
    
    #cbs = [];
    constructor(num) {
        
        this.res = num;
    }

    
    #add(num) {
        this.res += num;
        console.log(this.res);
    }

    
    #multipy(num) {
        this.res *= num;
        console.log(this.res)
    }

    add(num) {

        
        
        this.#cbs.push({
            type: 'function',
            params: num,
            fn: this.#add
        })
        return this;
    }
    multipy(num) {

        
        this.#cbs.push({
            type: 'function',
            params: num,
            fn: this.#multipy
        })
        return this;
    }
    top (fn) {

        
        this.#cbs.push({
            type: 'callback',
            fn: fn
        })
        return this;
    }
    delay (time) {

        
        this.#cbs.push({
            type: 'delay',

            
            fn: () => {
                return new Promise(resolve => {
                    console.log(`等待${time}ms`);
                    setTimeout(() => {
                        resolve();
                    }, time);
                })
            }
        })
        return this;
    }

    
    
    
    async output() {
        let cbs = this.#cbs;
        for(let i = 0, l = cbs.length; i < l; i++) {
            const cb = cbs[i];
            let type = cb.type;
            if (type === 'function') {
                cb.fn.call(this, cb.params);
            }
            else if(type === 'callback') {
                cb.fn.call(this, this.res);
            }
            else if(type === 'delay') {
                await cb.fn();
            }
        }

        
        this.#cbs = [];
    }
}
function lazy(num) {
    return new Lazy(num);
}

const lazyFun = lazy(2).add(2).top(console.log).delay(1000).multipy(3)
console.log('start');
console.log('等待1000ms');
setTimeout(() => {
    lazyFun.output();
}, 1000);

🔥函数柯里化

毫无疑问，需要记忆

function curry(fn, args) {
  let length = fn.length;
  args = args || [];

  return function() {
    let subArgs = args.slice(0);
    subArgs = subArgs.concat(arguments);
    if(subArgs.length >= length) {
      return fn.apply(this, subArgs);
    } else {
      return curry.call(this, fn, subArgs);
    }
  }
}


function curry(func, arity = func.length) {
  function generateCurried(preArgs) {
    return function curried(nextArgs) {
      const args = [...preArgs, ...nextArgs];
      if(args.length >= arity) {
        return func(...args);
      } else {
        return generateCurried(args);
      }
    }
  }
  return generateCurried([]);
}

es6实现方式

function curry(fn, ...args) {
  return fn.length <= args.length ? fn(...args) : curry.bind(null, fn, ...args);
}

lazy-load实现

img标签默认支持懒加载只需要添加属性 loading="lazy"，然后如果不用这个属性，想通过事件监听的方式来实现的话，也可以使用IntersectionObserver来实现，性能上会比监听scroll好很多

const imgs = document.getElementsByTagName('img');
const viewHeight = window.innerHeight || document.documentElement.clientHeight;

let num = 0;

function lazyLoad() {
  for (let i = 0; i < imgs.length; i++) {
    let distance = viewHeight - imgs[i].getBoundingClientRect().top;
    if(distance >= 0) {
      imgs[i].src = imgs[i].getAttribute('data-src');
      num = i+1;
    }
  }
}
window.addEventListener('scroll', lazyLoad, false);

实现简单的虚拟dom

给出如下虚拟dom的数据结构，如何实现简单的虚拟dom，渲染到目标dom树

let demoNode = ({
    tagName: 'ul',
    props: {'class': 'list'},
    children: [
        ({tagName: 'li', children: ['douyin']}),
        ({tagName: 'li', children: ['toutiao']})
    ]
});

构建一个render函数，将demoNode对象渲染为以下dom

<ul class="list">
  <li>douyin</li>
  <li>toutiao</li>
</ul>

通过遍历，逐个节点地创建真实DOM节点

function Element({tagName, props, children}){
   
    if(!(this instanceof Element)){
        return new Element({tagName, props, children})
    }
    this.tagName = tagName;
    this.props = props || {};
    this.children = children || [];
}

Element.prototype.render = function(){
    var el = document.createElement(this.tagName),
        props = this.props,
        propName,
        propValue;
    for(propName in props){
        propValue = props[propName];
        el.setAttribute(propName, propValue);
    }
    this.children.forEach(function(child){
        var childEl = null;
        if(child instanceof Element){
            childEl = child.render();
        }else{
            childEl = document.createTextNode(child);
        }
        el.appendChild(childEl);
    });
    return el;
};


var elem = Element({
    tagName: 'ul',
    props: {'class': 'list'},
    children: [
        Element({tagName: 'li', children: ['item1']}),
        Element({tagName: 'li', children: ['item2']})
    ]
});
document.querySelector('body').appendChild(elem.render());

实现SWR 机制

SWR 这个名字来自于 stale-while-revalidate：一种由 HTTP RFC 5861[4] 推广的 HTTP 缓存失效策略

const cache = new Map();

async function swr(cacheKey, fetcher, cacheTime) {
  let data = cache.get(cacheKey) || { value: null, time: 0, promise: null };
  cache.set(cacheKey, data);
  
  
  const isStaled = Date.now() - data.time > cacheTime;
  if (isStaled && !data.promise) {
    data.promise = fetcher()
      .then((val) => {
        data.value = val;
        data.time = Date.now();
      })
      .catch((err) => {
        console.log(err);
      })
      .finally(() => {
        data.promise = null;
      });
  }
  
  if (data.promise && !data.value) await data.promise;
  return data.value;
}

const data = await fetcher();
const data = await swr('cache-key', fetcher, 3000);

实现一个只执行一次的函数

function once(fn) {
  let called = false;
  return function _once() {
    if (called) {
      return _once.value;
    }
    called = true;
    _once.value = fn.apply(this, arguments);
  }
}


Reflect.defineProperty(Function.prototype, 'once', {
  value () {
    return once(this);
  },
  configurable: true,
})

LRU 算法实现

LRU（Least recently used，最近最少使用）算法根据数据的历史访问记录来进行淘汰数据，其核心思想是“如果数据最近被访问过，那么将来被访问的几率也更高”。

class LRUCahe {
  constructor(capacity) {
    this.cache = new Map();
    this.capacity = capacity;
  }

  get(key) {
    if (this.cache.has(key)) {
      const temp = this.cache.get(key);
      this.cache.delete(key);
      this.cache.set(key, temp);
      return temp;
    }
    return undefined;
  }

  set(key, value) {
    if (this.cache.has(key)) {
      this.cache.delete(key);
    } else if (this.cache.size >= this.capacity) {
      
      this.cache.delete(this.cache.keys().next().value);
    }
    this.cache.set(key, value);
  }
}

🔥发布-订阅

发布者不直接触及到订阅者、而是由统一的第三方来完成实际的通信的操作，叫做发布-订阅模式。

class EventEmitter {
  constructor() {
    
    this.handlers = {}
  }

  
  on(eventName, cb) {
    
    if (!this.handlers[eventName]) {
      
      this.handlers[eventName] = []
    }

    
    this.handlers[eventName].push(cb)
  }

  
  emit(eventName, ...args) {
    
    if (this.handlers[eventName]) {
      
      const handlers = this.handlers[eventName].slice()
      
      handlers.forEach((callback) => {
        callback(...args)
      })
    }
  }

  
  off(eventName, cb) {
    const callbacks = this.handlers[eventName]
    const index = callbacks.indexOf(cb)
    if (index !== -1) {
      callbacks.splice(index, 1)
    }
  }

  
  once(eventName, cb) {
    
    const wrapper = (...args) => {
      cb(...args)
      this.off(eventName, wrapper)
    }
    this.on(eventName, wrapper)
  }
}

观察者模式

const queuedObservers = new Set();

const observe = fn => queuedObservers.add(fn);
const observable = obj => new Proxy(obj, {set});

function set(target, key, value, receiver) {
  const result = Reflect.set(target, key, value, receiver);
  queuedObservers.forEach(observer => observer());
  return result;
}

单例模式

核心要点: 用闭包和Proxy属性拦截

function getSingleInstance(func) {
  let instance;
  let handler = {
    construct(target, args) {
      if(!instance) instance = Reflect.construct(func, args);
      return instance;
    }
  }
  return new Proxy(func, handler);
}

洋葱圈模型compose函数

function compose(middleware) {
  return function(context, next) {
    let index = -1;
    return dispatch(0);
    function dispatch(i) {
      
      if(i <= index) return Promise.reject(new Error('next() called multiple times'));
      
      index = i;
      let fn = middle[i];
      
      if(i === middle.length) fn = next;
      if(!fn) return Promsie.resolve();
      try{
        return Promise.resove(fn(context, dispatch.bind(null, i+1)));
      }catch(err){
        return Promise.reject(err);
      }
    }
  }
}

总结

当你看到这里的时候，几乎前端面试中常见的手写题目基本都覆盖到了，对于社招的场景下，其实手写题的题目是越来越务实的，尤其是真的有hc的情况下，一般出一些常见的场景题的可能性更大，所以最好理解➕记忆，最后欢迎评论区分享一些你遇到的题目

至此，手写题系列分享结束，希望对你有所帮助

标签
#前端 #面试
社招前端一面经典手写面试题集锦
helloworld1024fd的博客
09-17 395
社招前端一面经典手写面试题集锦
DETR系列文章之–Co-DETR
weixin_43731232的博客
04-11 1773
Co-DETR，并行训练多个辅助头，以一对多的标签分配方式进行监督从辅助头中提取正样本坐标，为解码器中的正样本的训练效率进行额外的定制化正样本query.一对一标签分配：每个GT框分配给一个特定的query（DETR），较少的正query导致低效训练，从编码器生成的潜在表示和解码器中的注意力学习分析这一问题。一对多标签分配：每个GT框分配给检测器输出的多个proposal/anchor，依赖NMS或者anchor生成（ATSS，RetinaNet，FCOS，PAA）。
2022必会的前端手写面试题
潇晨1998的博客
05-01 592
面试题视频讲解（高效学习）：进入学习 二、题目 1. 防抖节流 这也是一个经典题目了，首先要知道什么是防抖，什么是节流。 防抖： 在一段时间内，事件只会最后触发一次。 节流： 事件，按照一段时间的间隔来进行触发。 实在不懂的话，可以去这个大佬的Demo地址玩玩防抖节流DEMO // 防抖 function debounce(fn) { let timeout = null; return function () {
【深度学习时间序列预测案例】零基础入门经典深度学习时间序列预测项目实战（附代码+数据集+原理介绍）
热门推荐
CSDN 精品推荐
01-07 4万+
本专栏整理了《深度学习时间序列预测案例》，内包含了各种不同的基于深度学习模型的时间序列预测方法，例如LSTM、GRU、CNN（一维卷积、二维卷积）、LSTM-CNN、BiLSTM、Self-Attention、LSTM-Attention、Transformer等经典模型，包含项目原理以及源码，每一个项目实例都附带有完整的代码+数据集。
2024前端面试12个手写题，你确定会？
富朝阳的博客
01-19 1656
万丈高楼平地起，地基打的牢，才能永远立于不败之地。今天给大家带来的是10个常见的 JavaScript 手写功能，重要的地方已添加注释。有的是借鉴别人的，有的是自己写的，如有不正确的地方，欢迎多多指正。
前端面试手写题目总结
qq_48896417的博客
04-23 1189
【代码】面试手写题目总结。
前端面试必须掌握的手写题：进阶篇_前端必须掌握的手写题 进阶篇
2401_84446882的博客
05-02 358
console.log(‘等待1000ms’);}, 1000);} else {// 更好理解的方式} else {es6实现方式// es6实现i++) {num = i+1;// 样例数据});// 判断必须使用构造函数if(!}else{
前端面试必须掌握的手写题：进阶篇_前端必须掌握的手写题 进阶篇(1)
2401_84618023的博客
05-09 387
*JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串。**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式。// 函数调用记录，私有属性。
2024年Web前端最新前端面试必须掌握的手写题：进阶篇_前端必须掌握的手写题 进阶篇，头条三面技术四面HR
2401_84620288的博客
05-12 674
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它}, 1000);### 🔥函数柯里化毫无疑问，需要记忆} else {// 更好理解的方式} else {es6实现方式// es6实现### lazy-load实现。
前端面试题-手写篇-万字长文！
最新发布
qq_44704740的博客
01-19 1191
本文归纳了常见的前端面试手写题，后续会不断补充
前端面试常见手写代码题【详细篇】
前端探索者
10-08 3105
在前端面试中，经常会遇到防抖 、节流、函数柯里化、函数组合、instanceof 实现、实现new操作符的行为、深拷贝、继承实现：、手写Promise、数组中常见函数的实现等代码手写题，本文都已全部列举
32个手撕JS，彻底摆脱初级前端（面试高频）
SherrybabyOne的博客
09-29 1909
作为前端开发，JS是重中之重，最近结束了面试的高峰期，基本上offer也定下来了就等开奖，趁着这个时间总结下32个手写JS问题，这些都是高频面试题，希望对你能有所帮助。 关于源码都紧遵规范，都可跑通MDN示例，其余的大多会涉及一些关于JS的应用题和本人面试过程 01.数组扁平化 数组扁平化是指将一个多维数组变为一个一维数组 const arr = [1, [2, [3, [4, 5]]], 6]; // => [1, 2, 3, 4, 5, 6] 方法一：使用flat() const res1 =
二叉树的遍历（JS版）
chengzihy的专栏
01-09 1576
二叉树的遍历有深度优先和广度优先两种。前序、中序、后序遍历都属于深度优先遍历。层次遍历属于广度优先遍历，从上到下，从左到右或从右到左一层一层的遍历。 1、二叉树的深度优先遍历-递归 // 前/先序：根左右 var DLR = function(root, res) { if(!root) return ; res.push(root.val); root.lef...
前端面试必备 常见手写题
m0_59113449的博客
03-27 2178
常见手写题 1.Filter export function filter(arr, callback) { // 定义空数组接收 回调返回为true的 元素 let result = []; for (let i = 0; i < arr.length; i++) { let res = callback(arr[i], i); // 如果回调结果为真 就压入结果数组中 if (res) { result.push(arr[i])...
前端面试常见手写代码题集
小卡拉米的博客
01-06 961
定义了一个`curry`函数，它接受一个函数作为参数，并返回一个新的柯里化函数。同时，还维护了两个变量`maxCount`和`mostFrequentChar`，用于记录出现次数最多的字符和其出现的次数。快速排序是一种常用的排序算法，它通过选择一个基准元素，将数组分成两个子数组，然后对子数组进行递归排序，最后将两个子数组合并成一个有序数组。在上述示例中，我们选择数组中间的元素作为基准元素，然后将小于基准元素的数放在左边，大于基准元素的数放在右边，最后递归地对左右两个子数组进行排序，最终得到排序后的数组。
前端面试题（手写代码篇）（更新中）
hyx_1225的博客
12-04 982
reduce：让数组中的前项和后项做某种计算，并累计得到最终值。map：让数组通过某种计算产生一个新的数组。foreach：让数组中的每一项做一件事。foreach 遍历数组中每一项。reduce 适合做累计运算。map 会返回新的数组。
10个常考的前端手写题
jnfy的博客
09-02 1831
10个常考的前端手写题，你全都会吗？
前端面试必须掌握的手写题：基础篇
Web面试那些事儿的博客
02-18 1050
金九银十过了大半，笔者最近也面了一些公司，现将一些自己遇到的和收集的基础题目整理出来，后续会整理分享一些其他的信息，希望对你能有所帮助前端面试必须掌握的手写题：基础篇前端面试必须掌握的手写题：场景篇前端面试必须掌握的手写题：进阶篇闲言少叙，看正文。
前端常见手写面试题集锦
helloworld1024fd的博客
02-23 1257
写一个生成器函数并没有什么难度，但在面试的过程中，面试官往往对生成器这种语法糖背后的实现逻辑更感兴趣。下面我们要做的，不仅仅是写一个迭代器对象，而是用。Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。中，实现一个迭代器生成函数并不是什么难事儿，因为ES6早帮我们考虑好了全套的解决方案，内置了贴心的。此处为了记录每次遍历的位置，我们实现了一个闭包，借助自由变量来做我们的迭代过程中的“游标”。内的变量替换，如果属性不存在保持原样（比如。
前端面试题手写题汇总
筱的博客
05-10 792
前端面试题手写题汇总
最新2025海南省村界村级行政区划矢量shp数据下载
最新2025海南省村界村级行政区划矢量shp数据，几万个面，属性包含村、社区乡、街道镇、市多级属性，非常准确
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Web面试那些事儿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值