36 个 JS 手写题

最新推荐文章于 2022-12-30 11:28:47 发布

vagrant..

最新推荐文章于 2022-12-30 11:28:47 发布

阅读量278

点赞数 3

分类专栏： javascript 文章标签： js javascript es6

本文链接：https://blog.csdn.net/m0_46733951/article/details/115971502

版权

本文涵盖了36个JavaScript手写题目，包括数据类型判断、继承方式、数组操作、深浅拷贝、事件总线、Promise实现等，旨在提升JS基础和项目开发能力。通过阅读、测试和实践，读者可以深入理解JS核心概念并掌握高级技巧。

摘要由CSDN通过智能技术生成

36 个 JS 手写题

看完本文能收获什么

这篇文章总体上分为 2 类手写题，前半部分可以归纳为是常见需求，后半部分则是对现有技术的实现；

对常用的需求进行手写实现，比如数据类型判断函数、深拷贝等可以直接用于往后的项目中，提高了项目开发效率；
对现有关键字和 API 的实现，可能需要用到别的知识或 API，比如在写 forEach 的时候用到了无符号位右移的操作，平时都不怎么能够接触到这玩意，现在遇到了就可以顺手把它掌握了。所以手写这些实现能够潜移默化的扩展并巩固自己的 JS 基础；
通过写各种测试用例，你会知道各种 API 的边界情况，比如 Promise.all，你得考虑到传入参数的各种情况，从而加深了对它们的理解及使用；

阅读的时候需要做什么

阅读的时候，你需要把每行代码都看懂，知道它在干什么，为什么要这么写，能写得更好嘛？比如在写图片懒加载的时候，一般我们都是根据当前元素的位置和视口进行判断是否要加载这张图片，普通程序员写到这就差不多完成了。而大佬程序员则是会多考虑一些细节的东西，比如性能如何更优？代码如何更精简？比如 yeyan1996 写的图片懒加载就多考虑了 2 点：比如图片全部加载完成的时候得把事件监听给移除；比如加载完一张图片的时候，得把当前 img 从 imgList 里移除，起到优化内存的作用。

除了读通代码之外，还可以打开 Chrome 的 Script snippet 去写测试用例跑跑代码，做到更好的理解以及使用。
在看了几篇以及写了很多测试用例的前提下，尝试自己手写实现，看看自己到底掌握了多少。条条大路通罗马，你还能有别的方式实现嘛？或者你能写得比别人更好嘛？

好了，还楞着干啥，开始干活。

数据类型判断

typeof 可以正确识别：Undefined、Boolean、Number、String、Symbol、Function 等类型的数据，但是对于其他的都会认为是 object，比如 Null、Date 等，所以通过 typeof 来判断数据类型会不准确。但是可以使用
Object.prototype.toString 实现。

function typeOf(obj) {
   
    let res = Object.prototype.toString.call(obj).split(' ')[1]
    res = res.substring(0, res.length - 1).toLowerCase()
    return res
}
typeOf([])        // 'array'
typeOf({
   })        // 'object'
typeOf(new Date)  // 'date'

继承

原型链继承

function Animal() {
   
    this.colors = ['black', 'white']
}
Animal.prototype.getColor = function() {
   
    return this.colors
}
function Dog() {
   }
Dog.prototype =  new Animal()

let dog1 = new Dog()
dog1.colors.push('brown')
let dog2 = new Dog()
console.log(dog2.colors)  // ['black', 'white', 'brown']

原型链继承存在的问题：

问题1：原型中包含的引用类型属性将被所有实例共享；
问题2：子类在实例化的时候不能给父类构造函数传参；

借用构造函数实现继承

function Animal(name) {
   
    this.name = name
    this.getName = function() {
   
        return this.name
    }
}
function Dog(name) {
   
    Animal.call(this, name)
}
Dog.prototype =  new Animal()

借用构造函数实现继承解决了原型链继承的 2 个问题：引用类型共享问题以及传参问题。但是由于方法必须定义在构造函数中，所以会导致每次创建子类实例都会创建一遍方法。

组合继承

组合继承结合了原型链和盗用构造函数，将两者的优点集中了起来。基本的思路是使用原型链继承原型上的属性和方法，而通过盗用构造函数继承实例属性。这样既可以把方法定义在原型上以实现重用，又可以让每个实例都有自己的属性。

function Animal(name) {
   
    this.name = name
    this.colors = ['black', 'white']
}
Animal.prototype.getName = function() {
   
    return this.name
}
function Dog(name, age) {
   
    Animal.call(this, name)
    this.age = age
}
Dog.prototype =  new Animal()
Dog.prototype.constructor = Dog

let dog1 = new Dog('奶昔', 2)
dog1.colors.push('brown')
let dog2 = new Dog('哈赤', 1)
console.log(dog2) 
// { name: "哈赤", colors: ["black", "white"], age: 1 }

寄生式组合继承

组合继承已经相对完善了，但还是存在问题，它的问题就是调用了 2 次父类构造函数，第一次是在 new Animal()，第二次是在 Animal.call() 这里。

所以解决方案就是不直接调用父类构造函数给子类原型赋值，而是通过创建空函数 F 获取父类原型的副本。

寄生式组合继承写法上和组合继承基本类似，区别是如下这里：

- Dog.prototype =  new Animal()
- Dog.prototype.constructor = Dog

+ function F() {
   }
+ F.prototype = Animal.prototype
+ let f = new F()
+ f.constructor = Dog
+ Dog.prototype = f

稍微封装下上面添加的代码后：

function object(o) {
   
    function F() {
   }
    F.prototype = o
    return new F()
}
function inheritPrototype(child, parent) {
   
    let prototype = object(parent.prototype)
    prototype.constructor = child
    child.prototype = prototype
}
inheritPrototype(Dog, Animal)

如果你嫌弃上面的代码太多了，还可以基于组合继承的代码改成最简单的寄生式组合继承：

Dog.prototype =  new Animal()
Dog.prototype.constructor = Dog

Dog.prototype =  Object.create(Animal.prototype)
Dog.prototype.constructor = Dog

class 实现继承

class Animal {
   
    constructor(name) {
   
        this.name = name
    } 
    getName() {
   
        return this.name
    }
}
class Dog extends Animal {
   
    constructor(name, age) {
   
        super(name)
        this.age = age
    }
}

数组去重

ES5 实现：

function unique(arr) {
   
    var res = arr.filter(function(item, index, array) {
   
        return array.indexOf(item) === index
    })
    return res
}

ES6 实现：

var unique = arr => [...new Set(arr)]

数组扁平化

数组扁平化就是将 [1, [2, [3]]] 这种多层的数组拍平成一层 [1, 2, 3]。使用 Array.prototype.flat 可以直接将多层数组拍平成一层：

[1, [2, [3]]].flat(2)  // [1, 2, 3]

现在就是要实现 flat 这种效果。
ES5 实现：递归。

function flatten(arr) {
   
    var result = [];
    for (var i = 0, len = arr.length; i < len; i++) {
   
        if (Array.isArray(arr[i])) {
   
            result = result.concat(flatten(arr[i]))
        } else {
   
            result.push(arr[i])
        }
    }
    return result;
}

ES6 实现：

function flatten(arr) {
   
    while (arr.some(item => Array.isArray(item))) {
   
        arr = [].concat(...arr);
    }
    return arr;
}

深浅拷贝

浅拷贝：只考虑对象类型。

function shallowCopy(obj) {
   
    if (typeof obj !== 'object') return
    
    let newObj = obj instanceof Array ? [] : {
   }
    for (let key in obj) {
   
        if (obj.hasOwnProperty(key)) {
   
            newObj[key] = obj[key]
        }
    }
    return newObj
}

简单版深拷贝：只考虑普通对象属性，不考虑内置对象和函数。

function deepClone(obj) {
   
    if (typeof obj !== 'object') return;
    var newObj = obj instanceof Array ? [] : {
   };
    for (var key in obj) {
   
        if (obj.hasOwnProperty(key)) {
   
            newObj[key] = typeof obj[key] === 'object' ? deepClone(obj[key]) : obj[key];
        }
    }
    return newObj;
}

复杂版深克隆：基于简单版的基础上，还考虑了内置对象比如 Date、RegExp 等对象和函数以及解决了循环引用的问题。

const isObject = (target) => (typeof target === "object" || typeof target === "function") && target !== null;

function deepClone(target, map = new WeakMap()) {
   
    if (map.get(target)) {
   
        return target;
    }
    // 获取当前值的构造函数：获取它的类型
    let constructor = target.constructor;
    // 检测当前对象target是否与正则、日期格式对象匹配
    if (/^(RegExp|Date)$/i.test(constructor.name)) {
   
        // 创建一个新的特殊对象(正则类/日期类)的实例
        return new constructor(target);  
    }
    if (isObject(target)) {
   
        map.set(target, true);  // 为循环引用的对象做标记
        const cloneTarget = Array.isArray(target) ? [] : {
   };
        for (let prop in target) {
   
            if (target.hasOwnProperty(prop)) {
   
                cloneTarget[prop] = deepClone(target[prop], map);
            }
        }
        return cloneTarget;
    } else {
   
        return target;
    }
}

事件总线（发布订阅模式）

class EventEmitter {
   
    constructor() {
   
        this.cache = {
   }
    }
    on(name, fn) {
   
        if (this.cache[name]) {
   
            this.cache[name].push(fn)
        } else {
   
            this.cache[name] = [fn]
        }
    }
    off(name, fn) {
   
        let tasks = this.cache[name]
        if (tasks) {
   
            const index = tasks.findIndex(f => f === fn || f.callback === fn)
            if (index >= 0) {
   
                tasks.splice(index, 1)
            }
        }
    }
    emit(name, once = false, ...args) {
   
        if (this.cache[name]) {
   
            // 创建副本，如果回调函数内继续注册相同事件，会造成死循环
            let tasks = this.cache[name].slice()
            for (let fn of tasks) {
   
                fn(...args)
            }
            if (once) {
   
                de

最低0.47元/天解锁文章

vagrant..

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
4
评论
36 个 JS 手写题

36 个 JS 手写题看完本文能收获什么这篇文章总体上分为 2 类手写题，前半部分可以归纳为是常见需求，后半部分则是对现有技术的实现；对常用的需求进行手写实现，比如数据类型判断函数、深拷贝等可以直接用于往后的项目中，提高了项目开发效率；对现有关键字和 API 的实现，可能需要用到别的知识或 API，比如在写 forEach 的时候用到了无符号位右移的操作，平时都不怎么能够接触到这玩意，现在遇到了就可以顺手把它掌握了。所以手写这些实现能够潜移默化的扩展并巩固自己的 JS 基础；通过写各种测试用例，
复制链接

扫一扫