尝试手写-死磕 36 个 JS 手写题(搞懂后，提升真的大)

前言

原文：死磕 36 个 JS 手写题(搞懂后，提升真的大)

话不多说，开始手写

1. 数据类型判断

/**
 * 变量类型校验
 * @param {any} arg
 */
function myTypeof(arg) {
    let type = Object.prototype.toString.call(arg);
    return type.slice(8, -1);
}

console.log(myTypeof(1)); //Number
console.log(myTypeof("1")); //String
console.log(myTypeof(true)); //Boolean
console.log(myTypeof(null)); //Null
console.log(myTypeof(undefined)); //Undefined
console.log(myTypeof(Symbol())); //Symbol
console.log(myTypeof(1n)); //BigInt
console.log(myTypeof(new Date())); //Date
console.log(myTypeof([])); //Array
console.log(myTypeof({})); //Object

2. 继承

//创建父类
function Parent(name) {
    this.name = name;
}
Parent.prototype.sayName = function () {
    console.log(this.name);
};
//创建子类类
function Children(name, age) {
    Parent.call(this, name); //继承属性
    this.age = age;
}
Children.prototype = Object.create(Parent.prototype); //继承原型
Children.prototype.constructor = Children;
Children.prototype.sayAge = function () {
    console.log(this.age);
 };
//创建实例
let c = new Children("张三", 19);
console.log(c);
c.sayName();
c.sayAge();

对比ES6 class 和 ES5

3. 数组去重

• 利用ES6 Set去重

let arr = [1,2,3,1,2,3]
console.log([...new Set(arr)]) //[1, 2, 3]
// or
console.log(Array.from(new Set(arr))) //[1, 2, 3]

• 遍历+比较去重（filter，reduce，for循环，forEach）原理一致

let arr = [1, 2, 3, 1, 2, 3]
let map = {}
let result = arr.reduce((prev, cur) => prev.concat(map[cur] ? [] : (map[cur] = true && cur)), [])

4. 数组扁平化

• ES6 flat()

let arr = [1, [2, [3, [4]]]];

let result = arr.flat(Infinity); //[1, 2, 3, 4]

• reduce()

let arr = [1, [2, [3, [4]]]];

function flat(arr) {
    return arr.reduce(
        (prev, cur) => prev.concat(Array.isArray(cur) ? flat(cur) : cur),
        []
    );
}
let result = flat(arr); //[1, 2, 3, 4]

• while循环

let arr = [1, [2, [3, [4]]]];

function flat(arr) {
    let result = [...arr]
    while (result.some(Array.isArray)) {
        result = [].concat(...result);
    }
    return result
}
let result = flat(arr); //[1, 2, 3, 4]

5. 深拷贝（只实现了普通对象属性的拷贝）

let obj = [{ a: [1] }, 1];

function cloneDeep(obj) {
    if (typeof obj !== 'object') return
    
    let result = Object.prototype.toString.call(obj) === "[object Object]" ? {} : [];
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            let value = obj[key];
            result[key] = typeof value === "object" ? cloneDeep(value) : value;
        }
    }
    return result;
}

6. 事件总线

//后续补充

7. 解析url参数为对象

//后续补充

8. 字符串模板

//后续补充

9. 图片懒加载

//后续补充

10. 函数防抖

function debound(fun,time){
    let timer = null
    return function(...arg){
        if(timer) clearTimeout(timer)
        timer = setTimeout(()=>{
            clearTimeout(timer)
            fun.apply(this,arg)
            
        },time)
    }
}

11. 函数节流

function throttle(fun,time){
    let timer = null
    return function(...arg){
        if(timer) return 
        timer = setTimeout(()=>{
            clearTimeout(timer)
            fun.apply(this,arg)
        },time)
    }
}

12. 函数柯里化

//后续补充

13. 偏函数

//后续补充

14. JSONP

//后续补充

15. AJAX

//后续补充

16. 数组原型方法

//后续补充

16. 函数原型方法

• call

Function.prototype.myCall = (obj,...arg){
    let fun = Symble('fun')
    obj[fun] = this
    let res = obj[fun](...arg)
    delete obj[fun]
    return res
}

• apply

Function.prototype.myApply = (obj,arg){
    let fun = Symble('fun')
    obj[fun] = this
    let res = obj[fun](...arg)
    delete obj[fun]
    return res
}

• bind

Function.prototype.myBind = (obj,...arg1){
    let _this = this
    let fun = (...arg2)=>{
        let that = this instanceof _this ? this ：obj
        let res = _this.call(that,...arg1,...arg2)
        return res
    }
    fun.prototype = Object.creat(_this.prototype)
    return fun
}

17. 实现 new 关键字

function myNew(fun,...arg){
    let obj = Object.create(fun.prototype) 
    let cnt = fun.apply(obj,arg)
    return Object.prototype.toString.call(cnt) === '[object Object]' ? cnt : obj
}

18 实现 instanceof 关键字

function myInstanceof(left,right){
    let proto = Object.getPrototypeof(left)
    while(true){
        if(proto === null) return false
        if(proto === right.prototype) return true
        proto = Object.getPrototypeof(proto)
        
    }
}

19 .....

总结

就这？还吃什么饭，我不配，学习去了