10个常考的前端手写题，你全都会吗？（下）

迈不过友情╰ 2024-04-22 12:28 6阅读 0赞

**前言**

> 📫 大家好，我是南木元元，热爱技术和分享，欢迎大家交流，一起学习进步！
> 
> 🍅 **个人主页：[南木元元][Link 1]**

今天接着[上篇][Link 2]再来分享一下10个常见的JavaScript手写功能。

--------------------

**目录**

1.实现继承

ES5继承（寄生组合式继承）

ES6继承

2.获取URL参数

split方法

URLSearchParams方法

3.手写reduce

4.实现观察者模式

5.实现发布-订阅模式

6.异步控制并发数

7.实现Promise.all

8.使用setTimeout实现setInterval

9.实现每隔一秒打印 1,2,3,4

10.循环打印红黄绿

结语

--------------------

## 1.实现继承 ##

### ES5继承（寄生组合式继承） ###

寄生组合式继承是对组合式继承（调用了2次父构造方法）的改进，使用父类的原型的副本来作为子类的原型，这样就只调用一次父构造函数，避免了创建不必要的属性。

测试结果：

![43014aab6cf04ffaa2e2492593abca9f.png][]

### ES6继承 ###

在`ES6`中，可以使用class类去实现继承。使用extends表明继承自哪个父类，并且在子类构造函数中必须调用super。

class Parent {
      constructor(name) {
        this.name = name;
      }
      getName() {
        console.log(this.name);
      }
    }
    
    class Child extends Parent {
      constructor(name, age) {
        //使用this之前必须先调用super(),它调用父类的构造函数并绑定父类的属性和方法
        super(name);
        //之后子类的构造函数再进一步访问和修改 this
        this.age = age;
      }
    }
    
    // 测试
    let child = new Child("kevin", 18);
    console.log(child.name); // kevin
    console.log(child.age); // 18
    child.getName(); // kevin

测试结果：

![69de4912adf0416494718a657a25a51c.png][]

es5继承和es6继承的**区别**：

*  `ES5`继承是先创建子类的实例对象，然后再将父类方法添加到this（`Parent.call(this)`）上。
 *  `ES6`的继承不同，实质是先将父类实例对象的属性和方法，加到this上面（所以必须先调用super方法），然后再用子类的构造函数修改this。

## 2.获取URL参数 ##

### split方法 ###

function getParams(url) {
      const res = {}
      //判断字符串中是否可以找到?
      if (url.includes('?')) {
        const str = url.split('?')[1]
        const arr = str.split('&')
        arr.forEach(item => {
          const key = item.split('=')[0]
          const val = item.split('=')[1]
          res[key] = decodeURIComponent(val) // 中文需解码
        })
      }
      return res
    }
    
    // 测试
    const user = getParams('http://www.baidu.com?user=%E9%98%BF%E9%A3%9E&age=16')
    console.log(user) // { user: '阿飞', age: '16' }

测试结果：

![c0a6f9fbeb694e2aaf9566d6acdb3669.png][]

### URLSearchParams方法 ###

URLSearchParams方法返回一个 URLSearchParams 对象，来处理 URL 的查询字符串。

// 该url的url.search为"?foo=1&bar=2"
    let url = new URL("https://example.com?foo=1&bar=2"); 
    // 创建一个URLSearchParams实例，即URLSearchParams { 'foo' => '1', 'bar' => '2' }
    let searchParams = new URLSearchParams(url.search); 
    
    // 键值对列表URLSearchParams Iterator { [ 'foo', '1' ], [ 'bar', '2' ] }
    console.log(searchParams.entries()); 
    
    // 将键值对列表转换为一个对象
    let res = Object.fromEntries(searchParams.entries()); 
    console.log(res); //{ foo: '1', bar: '2' }

测试结果：

![a7e22c3ccafb424d93a08cd82b59d702.png][]

## 3.手写reduce ##

reduce的使用

//普通数组求和
    let arr = [1,2,3,4,5,6,7,8,9,10]
    arr.reduce((prev, cur) => { return prev + cur }, 0)//55
    //多维数组求和
    let arr = [1,2,3,[[4,5],6],7,8,9]
    arr.flat(Infinity).reduce((prev, cur) => { return prev + cur }, 0)//45
    //对象数组求和
    let arr = [{a:9, b:3, c:4}, {a:1, b:3}, {a:3}] 
    arr.reduce((prev, cur) => {
        return prev + cur["a"];//13 求对象数组中所有属性为a的和
    }, 0)

reduce的实现

Array.prototype.myReduce = function (cb, initialValue) {
      const arr = this; //this就是调用reduce方法的数组
      let total = initialValue ? initialValue : arr[0]; //不传默认取数组第一项
      let startIndex = initialValue ? 0 : 1; // 有初始值的话从0遍历，否则从1遍历
      for (let i = startIndex; i < arr.length; i++) {
        total = cb(total, arr[i], i, arr); //参数为初始值、当前值、索引、当前数组
      }
      return total;
    };
    
    //测试
    let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    let res = arr.myReduce((total, cur) => {
      return total + cur;
    }, 0);
    console.log(res);//55

测试结果：

![7826be52fefc4f29896e1f5b690e7520.png][]

## 4.实现观察者模式 ##

观察者模式：定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。

// 被观察者 学生
    class Subject {
      constructor() {
        this.state = "happy";
        this.observers = []; // 存储所有的观察者
      }
      //新增观察者
      add(o) {
        this.observers.push(o);
      }
      //获取状态
      getState() {
        return this.state;
      }
      // 更新状态并通知
      setState(newState) {
        this.state = newState;
        this.notify();
      }
      //通知所有的观察者
      notify() {
        this.observers.forEach((o) => o.update(this));
      }
    }
    
    // 观察者 父母和老师
    class Observer {
      constructor(name) {
        this.name = name;
      }
      //更新
      update(student) {
        console.log(`亲爱的${this.name} 通知您当前学生的状态是${student.getState()}`);
      }
    }
    
    let student = new Subject();
    let parent = new Observer("父母");
    let teacher = new Observer("老师");
    //添加观察者
    student.add(parent);
    student.add(teacher);
    //设置被观察者的状态
    student.setState("sad");

测试结果：

![f71b164958d04b679979814960d8bcbc.png][]

详细可以去看我的这篇文章——[JavaScript 简单实现观察者模式和发布-订阅模式][JavaScript _-]

## 5.实现发布-订阅模式 ##

发布订阅模式跟观察者模式很像，但它的发布和订阅是不互相依赖的，因为有一个**统一调度中心。**

class EventBus {
      constructor() {
        // 缓存列表，用来存放注册的事件与回调
        this.cache = {};
      }
    
      // 订阅事件
      on(name, cb) {
        // 如果当前事件没有订阅过，就给事件创建一个队列
        if (!this.cache[name]) {
          this.cache[name] = []; //由于一个事件可能注册多个回调函数，所以使用数组来存储事件队列
        }
        this.cache[name].push(cb); 
      }
    
      // 触发事件
      emit(name, ...args) {
        // 检查目标事件是否有监听函数队列
        if (this.cache[name]) {
          // 逐个调用队列里的回调函数
          this.cache[name].forEach((callback) => {
            callback(...args);
          });
        }
      }
    
      // 取消订阅
      off(name, cb) {
        const callbacks = this.cache[name]; 
        const index = callbacks.indexOf(cb); 
        if (index !== -1) {
          callbacks.splice(index, 1); 
        }
      }
    
      // 只订阅一次
      once(name, cb) {
        // 执行完第一次回调函数后，自动删除当前订阅事件
        const fn = (...args) => {
          cb(...args); 
          this.off(name, fn); 
        };
        this.on(name, fn);
      }
    }
    
    // 测试
    let eventBus = new EventBus();
    let event1 = function (...args) {
      console.log(`通知1-订阅者小陈老师,小明同学当前心情状态：${args}`)
    };
    // 订阅事件，只订阅一次
    eventBus.once("teacherName1", event1);
    // 发布事件
    eventBus.emit("teacherName1", "教室", "上课", "打架", "愤怒");
    eventBus.emit("teacherName1", "教室", "上课", "打架", "愤怒");
    eventBus.emit("teacherName1", "教室", "上课", "打架", "愤怒");

测试结果：

![1abb8bfe14e64f09bfc309aaf2c5d0ce.png][]

## 6.异步控制并发数 ##

场景：实现一个带并发限制的异度调度器，保证同时运行的任务最多有两个。

class Controll {
      constructor(limit) {
        // 待执行的任务队列
        this.waitTasks = []; 
        // 正在执行的任务队列
        this.runTasks = []; 
        // 允许同时运行的任务数量
        this.limit = limit; 
      }
      //添加任务
      add(task) {
        //当前执行任务队列小于并发限制，就执行该任务
        if (this.runTasks.length < this.limit) {
          this.run(task);
        } else {
          //将该任务添加到等待队列
          this.waitTasks.push(task);
        }
      }
      //执行任务
      run(task) {
        //push添加元素并返回新的数组长度
        const len = this.runTasks.push(task);
        const index = len - 1;
        task().then(() => {
          //执行完后删除任务
          this.runTasks.splice(index, 1);
          if (this.waitTasks.length > 0) {
            //执行并删除等待队列中的第一个任务
            this.run(this.waitTasks.shift());
          }
        });
      }
    }
    
    //测试：允许同时执行2个任务
    const scheduler = new Controll(2);
    //添加任务
    const addTask = (time, order) => {
      scheduler.add(async () => {
        //定时器打印
        await new Promise((resolve) => {
          setTimeout(resolve, time);//定时器时间到了就resolve执行成功，然后打印结果
        });
        console.log(order);
      });
    };
    //添加任务，参数为定时器时间和打印数字
    addTask(1000, "1");
    addTask(500, "2");
    addTask(300, "3");
    addTask(400, "4");

测试结果：

![ec66d9aa8f4446dbb9d7cbdc4024513c.png][]

## 7.实现Promise.all ##

测试结果：

![98f681c7268d46df8c07490e7859ad4a.png][]

## 8.使用setTimeout实现setInterval ##

setInterval的缺点：setInterval 的作用是每隔一段时间执行一个函数，但是这个执行不是真的到了时间立即执行，它真正的作用是**每隔一段时间将事件加入事件队列中去**，只有当当前的执行栈为空的时候，才能去从事件队列中取出事件执行。所以可能会出现这样的情况，就是当前执行栈执行的时间很长，导致事件队列里边积累多个定时器加入的事件，当执行栈结束的时候，这些事件会依次执行，因此就不能到间隔一段时间执行的效果。

针对 setInterval 的这个缺点，我们可以使用 setTimeout 递归调用来模拟 setInterval，这样我们就**确保了只有一个事件结束了**，我们**才会触发下一个定时器事件**，这样解决了 setInterval 的问题。

实现思路是使用**递归**函数，不断地去执行setTimeout从而达到setInterval的效果。

测试结果：

![f69656b7e67a498ea688543345a24622.png][]

## 9.实现每隔一秒打印 1,2,3,4 ##

// 1.使用 let 块级作用域
    for (let i = 0; i < 5; i++) {
      setTimeout(() => {
        console.log(i);
      }, i * 1000);
    }
    
    // 2.使用闭包实现
    for (var i = 0; i < 5; i++) {
      (function(j) {
        setTimeout(() => {
          console.log(j);
        }, j * 1000);
      })(i);
    }

测试结果：

![4ea76e17283e4e699e27d57f3cee9f67.png][]

## 10.循环打印红黄绿 ##

场景：红灯 3s 亮一次，绿灯 1s 亮一次，黄灯 2s 亮一次；如何让三个灯不断**交替重复**亮灯？

三个亮灯函数：

function red() {
        console.log('red');
    }
    function green() {
        console.log('green');
    }
    function yellow() {
        console.log('yellow');
    }

用async/await实现：

测试结果：

![9f28bbcc060a4a758fdccc1ae13467e0.png][]

## 结语 ##

本文总结了前端常见的一些手写功能，你是不是全都掌握了呢，欢迎在评论区交流。

🔥如果此文对你有帮助的话，欢迎💗**关注**、👍**点赞**、⭐**收藏**、**✍️评论，**支持一下博主~

[Link 1]: https://blog.csdn.net/weixin_43288600
[Link 2]: https://blog.csdn.net/weixin_43288600/article/details/135691164
[43014aab6cf04ffaa2e2492593abca9f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/69a786f8696b48e1af27ea7a9db8bb38.png
[69de4912adf0416494718a657a25a51c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/644d434680704489943b714277c8f527.png
[c0a6f9fbeb694e2aaf9566d6acdb3669.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/3a92716810b24728847dd5d255db6c9d.png
[a7e22c3ccafb424d93a08cd82b59d702.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/eba87aa2b1ec4c108bf1a91c2aaa0c90.png
[7826be52fefc4f29896e1f5b690e7520.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/d4a6cee3b5734365a65ba477e866bb35.png
[f71b164958d04b679979814960d8bcbc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/575517a29b8e495a999344e4e99fd063.png
[JavaScript _-]: https://blog.csdn.net/weixin_43288600/article/details/131968091
[1abb8bfe14e64f09bfc309aaf2c5d0ce.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/918200daf357402b9de933e1b834e424.png
[ec66d9aa8f4446dbb9d7cbdc4024513c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/27169356425742cda848619e8863b536.png
[98f681c7268d46df8c07490e7859ad4a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/fd115416aea84b3f92be7c53f385a41e.png
[f69656b7e67a498ea688543345a24622.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/5cb1dabd55764115a193136df3971366.png
[4ea76e17283e4e699e27d57f3cee9f67.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/d2322636c4724ed6b2bb9073a2df4e7c.png
[9f28bbcc060a4a758fdccc1ae13467e0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/32d82d3309e947329886934acdfc8a41.png