【面试】970- 一文帮你搞定90%的JS手写题

Bertha 。 2022-10-16 07:25 135阅读 0赞

> 还在害怕手写题吗，本文可以帮你扩展并巩固自己的JS基础，顺便搞定90%的手写题。在工作中还可以对常用的需求进行手写实现，比如深拷贝、防抖节流等可以直接用于往后的项目中，提高项目开发效率。不说废话了，下面就直接上代码吧。  
>

### 1.call的实现 ###

*  第一个参数为null或者undefined时，this指向全局对象window，值为原始值的指向该原始值的自动包装对象，如 String、Number、Boolean
 *  为了避免函数名与上下文(context)的属性发生冲突，使用Symbol类型作为唯一值
 *  将函数作为传入的上下文(context)属性执行
 *  函数执行完成后删除该属性
 *  返回执行结果

Function.prototype.myCall = function(context,...args){
        let cxt = context || window;
        //将当前被调用的方法定义在cxt.func上.(为了能以对象调用形式绑定this)
        //新建一个唯一的Symbol变量避免重复
        let func = Symbol() 
        cxt[func] = this;
        args = args ? args : []
        //以对象调用形式调用func,此时this指向cxt 也就是传入的需要绑定的this指向
        const res = args.length > 0 ? cxt[func](...args) : cxt[func]();
        //删除该方法，不然会对传入对象造成污染（添加该方法）
        delete cxt[func];
        return res;
    }

### 2.apply的实现 ###

*  前部分与call一样
 *  第二个参数可以不传，但类型必须为数组或者类数组

Function.prototype.myApply = function(context,args = []){
        let cxt = context || window;
        //将当前被调用的方法定义在cxt.func上.(为了能以对象调用形式绑定this)
        //新建一个唯一的Symbol变量避免重复
        let func = Symbol()
        cxt[func] = this;
        //以对象调用形式调用func,此时this指向cxt 也就是传入的需要绑定的this指向
        const res = args.length > 0 ? cxt[func](...args) : cxt[func]();
        delete cxt[func];
        return res;
    }

### 3.bind的实现 ###

需要考虑：

*  bind() 除了 this 外，还可传入多个参数；
 *  bind 创建的新函数可能传入多个参数；
 *  新函数可能被当做构造函数调用；
 *  函数可能有返回值；

实现方法：

*  bind 方法不会立即执行，需要返回一个待执行的函数；（闭包）
 *  实现作用域绑定（apply）
 *  参数传递（apply 的数组传参）
 *  当作为构造函数的时候，进行原型继承

Function.prototype.myBind = function (context, ...args) {
        //新建一个变量赋值为this，表示当前函数
        const fn = this
        //判断有没有传参进来，若为空则赋值[]
        args = args ? args : []
        //返回一个newFn函数，在里面调用fn
        return function newFn(...newFnArgs) {
            if (this instanceof newFn) {
                return new fn(...args, ...newFnArgs)
            }
            return fn.apply(context, [...args,...newFnArgs])
        }
    }

*  测试

let name = '小王',age =17;
    let obj = {
        name:'小张',
        age: this.age,
        myFun: function(from,to){
            console.log(this.name + ' 年龄 ' + this.age+'来自 '+from+'去往'+ to)
        }
    }
    let db = {
        name: '德玛',
        age: 99
    }
    
    //结果
    obj.myFun.myCall(db,'成都','上海');     // 德玛 年龄 99  来自 成都去往上海
    obj.myFun.myApply(db,['成都','上海']);      // 德玛 年龄 99  来自 成都去往上海
    obj.myFun.myBind(db,'成都','上海')();       // 德玛 年龄 99  来自 成都去往上海
    obj.myFun.myBind(db,['成都','上海'])();   // 德玛 年龄 99  来自 成都, 上海去往 undefined

### 4.寄生式组合继承 ###

function Person(obj) {
        this.name = obj.name
        this.age = obj.age
    }
    Person.prototype.add = function(value){
        console.log(value)
    }
    var p1 = new Person({name:"番茄", age: 18})
    
    function Person1(obj) {
        Person.call(this, obj)
        this.sex = obj.sex
    }
    // 这一步是继承的关键
    Person1.prototype = Object.create(Person.prototype);
    Person1.prototype.constructor = Person1;
    
    Person1.prototype.play = function(value){
        console.log(value)
    }
    var p2 = new Person1({name:"鸡蛋", age: 118, sex: "男"})

### 5.ES6继承 ###

//class 相当于es5中构造函数
    //class中定义方法时，前后不能加function，全部定义在class的protopyte属性中
    //class中定义的所有方法是不可枚举的
    //class中只能定义方法，不能定义对象，变量等
    //class和方法内默认都是严格模式
    //es5中constructor为隐式属性
    class People{
      constructor(name='wang',age='27'){
        this.name = name;
        this.age = age;
      }
      eat(){
        console.log(`${this.name} ${this.age} eat food`)
      }
    }
    //继承父类
    class Woman extends People{ 
       constructor(name = 'ren',age = '27'){ 
         //继承父类属性
         super(name, age); 
       } 
        eat(){ 
         //继承父类方法
          super.eat() 
        } 
    } 
    let wonmanObj=new Woman('xiaoxiami'); 
    wonmanObj.eat();
    
    //es5继承先创建子类的实例对象，然后再将父类的方法添加到this上（Parent.apply(this)）。 
    //es6继承是使用关键字super先创建父类的实例对象this，最后在子类class中修改this。

### 6.new的实现 ###

*  一个继承自 Foo.prototype 的新对象被创建。
 *  使用指定的参数调用构造函数 Foo，并将 this 绑定到新创建的对象。new Foo 等同于 new Foo()，也就是没有指定参数列表，Foo 不带任何参数调用的情况。
 *  由构造函数返回的对象就是 new 表达式的结果。如果构造函数没有显式返回一个对象，则使用步骤1创建的对象。
 *  一般情况下，构造函数不返回值，但是用户可以选择主动返回对象，来覆盖正常的对象创建步骤

function Ctor(){
        ....
    }
    
    function myNew(ctor,...args){
        if(typeof ctor !== 'function'){
          throw 'myNew function the first param must be a function';
        }
        var newObj = Object.create(ctor.prototype); //创建一个继承自ctor.prototype的新对象
        var ctorReturnResult = ctor.apply(newObj, args); //将构造函数ctor的this绑定到newObj中
        var isObject = typeof ctorReturnResult === 'object' && ctorReturnResult !== null;
        var isFunction = typeof ctorReturnResult === 'function';
        if(isObject || isFunction){
            return ctorReturnResult;
        }
        return newObj;
    }
    
    let c = myNew(Ctor);

### 7.instanceof的实现 ###

*  instanceof 是用来判断A是否为B的实例，表达式为：A instanceof B，如果A是B的实例，则返回true,否则返回false。
 *  instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。
 *  不能检测基本数据类型，在原型链上的结果未必准确，不能检测null,undefined
 *  实现：遍历左边变量的原型链，直到找到右边变量的 prototype，如果没有找到，返回 false

function myInstanceOf(a,b){
        let left = a.__proto__;
        let right = b.prototype;
        while(true){
            if(left == null){
                return false
            }
            if(left == right){
                return true
            }
            left = left.__proto__
        }
    }
    
    //instanceof 运算符用于判断构造函数的 prototype 属性是否出现在对象的原型链中的任何位置。
    function myInstanceof(left, right) {
        let proto = Object.getPrototypeOf(left), // 获取对象的原型
        prototype = right.prototype; // 获取构造函数的 prototype 对象
        // 判断构造函数的 prototype 对象是否在对象的原型链上
        while (true) {
            if (!proto) return false;
            if (proto === prototype) return true;
            proto = Object.getPrototypeOf(proto);
        }
    }

### 8.Object.create()的实现 ###

*  MDN文档
 *  Object.create()会将参数对象作为一个新创建的空对象的原型, 并返回这个空对象

//简略版
    function myCreate(obj){
        // 新声明一个函数
        function C(){};
        // 将函数的原型指向obj
        C.prototype = obj;
        // 返回这个函数的实力化对象
        return new C()
    }
    //官方版Polyfill
    if (typeof Object.create !== "function") {
        Object.create = function (proto, propertiesObject) {
            if (typeof proto !== 'object' && typeof proto !== 'function') {
                throw new TypeError('Object prototype may only be an Object: ' + proto);
            } else if (proto === null) {
                throw new Error("This browser's implementation of Object.create is a shim and doesn't support 'null' as the first argument.");
            }
    
            if (typeof propertiesObject !== 'undefined') throw new Error("This browser's implementation of Object.create is a shim and doesn't support a second argument.");
    
            function F() {}
            F.prototype = proto;
    
            return new F();
        };
    }

### 9.实现 Object.assign ###

Object.assign2 = function(target, ...source) {
        if (target == null) {
            throw new TypeError('Cannot convert undefined or null to object')
        }
        let ret = Object(target) 
        source.forEach(function(obj) {
            if (obj != null) {
                for (let key in obj) {
                    if (obj.hasOwnProperty(key)) {
                        ret[key] = obj[key]
                    }
                }
            }
        })
        return ret
    }

### 10.Promise的实现 ###

实现 Promise 需要完全读懂 Promise A+ 规范，不过从总体的实现上看，有如下几个点需要考虑到：

*  Promise本质是一个状态机，且状态只能为以下三种：Pending（等待态）、Fulfilled（执行态）、Rejected（拒绝态），状态的变更是单向的，只能从Pending -> Fulfilled 或 Pending -> Rejected，状态变更不可逆
 *  then 需要支持链式调用

class Promise {
        callbacks = [];
        state = 'pending';//增加状态
        value = null;//保存结果
        constructor(fn) {
            fn(this._resolve.bind(this), this._reject.bind(this));
        }
        then(onFulfilled, onRejected) {
            return new Promise((resolve, reject) => {
                this._handle({
                    onFulfilled: onFulfilled || null,
                    onRejected: onRejected || null,
                    resolve: resolve,
                    reject: reject
                });
            });
        }
        _handle(callback) {
            if (this.state === 'pending') {
                this.callbacks.push(callback);
                return;
            }
     
            let cb = this.state === 'fulfilled' ? callback.onFulfilled : callback.onRejected;
     
            if (!cb) {//如果then中没有传递任何东西
                cb = this.state === 'fulfilled' ? callback.resolve : callback.reject;
                cb(this.value);
                return;
            }
     
            let ret = cb(this.value);
            cb = this.state === 'fulfilled' ? callback.resolve : callback.reject;
            cb(ret);
        }
        _resolve(value) {
     
            if (value && (typeof value === 'object' || typeof value === 'function')) {
                var then = value.then;
                if (typeof then === 'function') {
                    then.call(value, this._resolve.bind(this), this._reject.bind(this));
                    return;
                }
            }
     
            this.state = 'fulfilled';//改变状态
            this.value = value;//保存结果
            this.callbacks.forEach(callback => this._handle(callback));
        }
        _reject(error) {
            this.state = 'rejected';
            this.value = error;
            this.callbacks.forEach(callback => this._handle(callback));
        }
    }

#### Promise.resolve ####

*  Promsie.resolve(value) 可以将任何值转成值为 value 状态是 fulfilled 的 Promise，但如果传入的值本身是 Promise 则会原样返回它。

Promise.resolve(value) {
      if (value && value instanceof Promise) {
        return value;
      } else if (value && typeof value === 'object' && typeof value.then === 'function') {
        let then = value.then;
        return new Promise(resolve => {
          then(resolve);
        });
      } else if (value) {
        return new Promise(resolve => resolve(value));
      } else {
        return new Promise(resolve => resolve());
      }
    }

#### Promise.reject ####

*  和 Promise.resolve() 类似，Promise.reject() 会实例化一个 rejected 状态的 Promise。但与 Promise.resolve() 不同的是，如果给 Promise.reject() 传递一个 Promise 对象，则这个对象会成为新 Promise 的值。

Promise.reject = function(reason) {
        return new Promise((resolve, reject) => reject(reason))
    }

#### Promise.all ####

*  传入的所有 Promsie 都是 fulfilled，则返回由他们的值组成的，状态为 fulfilled 的新 Promise；
 *  只要有一个 Promise 是 rejected，则返回 rejected 状态的新 Promsie，且它的值是第一个 rejected 的 Promise 的值；
 *  只要有一个 Promise 是 pending，则返回一个 pending 状态的新 Promise；

Promise.all = function(promiseArr) {
        let index = 0, result = []
        return new Promise((resolve, reject) => {
            promiseArr.forEach((p, i) => {
                Promise.resolve(p).then(val => {
                    index++
                    result[i] = val
                    if (index === promiseArr.length) {
                        resolve(result)
                    }
                }, err => {
                    reject(err)
                })
            })
        })
    }

#### Promise.race ####

*  Promise.race 会返回一个由所有可迭代实例中第一个 fulfilled 或 rejected 的实例包装后的新实例。

Promise.race = function(promiseArr) {
        return new Promise((resolve, reject) => {
            promiseArr.forEach(p => {
                Promise.resolve(p).then(val => {
                    resolve(val)
                }, err => {
                    rejecte(err)
                })
            })
        })
    }

### 11.Ajax的实现 ###

function ajax(url,method,body,headers){
        return new Promise((resolve,reject)=>{
            let req = new XMLHttpRequest();
            req.open(methods,url);
            for(let key in headers){
                req.setRequestHeader(key,headers[key])
            }
            req.onreadystatechange(()=>{
                if(req.readystate == 4){
                    if(req.status >= '200' && req.status <= 300){
                        resolve(req.responeText)
                    }else{
                        reject(req)
                    }
                }
            })
            req.send(body)
        })
    }

### 12.实现防抖函数（debounce） ###

*  连续触发在最后一次执行方法，场景：输入框匹配

let debounce = (fn,time = 1000) => {
        let timeLock = null
    
        return function (...args){
            clearTimeout(timeLock)
            timeLock = setTimeout(()=>{
                fn(...args)
            },time)
        }
    }

### 13.实现节流函数（throttle） ###

*  在一定时间内只触发一次，场景：长列表滚动节流

let throttle = (fn,time = 1000) => {
        let flag = true;
    
        return function (...args){
            if(flag){
                flag = false;
                setTimeout(()=>{
                    flag = true;
                    fn(...args)
                },time)
            }
        }
    }

### 14.深拷贝（deepclone） ###

*  判断类型，正则和日期直接返回新对象
 *  空或者非对象类型，直接返回原值
 *  考虑循环引用，判断如果hash中含有直接返回hash中的值
 *  新建一个相应的new obj.constructor加入hash
 *  遍历对象递归（普通key和key是symbol情况）

function deepClone(obj,hash = new WeakMap()){
        if(obj instanceof RegExp) return new RegExp(obj);
        if(obj instanceof Date) return new Date(obj);
        if(obj === null || typeof obj !== 'object') return obj;
        //循环引用的情况
        if(hash.has(obj)){
            return hash.get(obj)
        }
        //new 一个相应的对象
        //obj为Array，相当于new Array()
        //obj为Object，相当于new Object()
        let constr = new obj.constructor();
        hash.set(obj,constr);
        for(let key in obj){
            if(obj.hasOwnProperty(key)){
                constr[key] = deepClone(obj[key],hash)
            }
        }
        //考虑symbol的情况
        let symbolObj = Object.getOwnPropertySymbols(obj)
        for(let i=0;i<symbolObj.length;i++){
            if(obj.hasOwnProperty(symbolObj[i])){
                constr[symbolObj[i]] = deepClone(obj[symbolObj[i]],hash)
            }
        }
        return constr
    }

### 15.数组扁平化的实现(flat) ###

let arr = [1,2,[3,4,[5,[6]]]]
    console.log(arr.flat(Infinity))//flat参数为指定要提取嵌套数组的结构深度，默认值为 1

//用reduce实现
    function fn(arr){
       return arr.reduce((prev,cur)=>{
          return prev.concat(Array.isArray(cur)?fn(cur):cur)
       },[])
    }

### 16.函数柯里化 ###

function sumFn(a,b,c){return a+ b + c};
    let sum = curry(sumFn);
    sum(2)(3)(5)//10
    sum(2,3)(5)//10

function curry(fn,...args){
      let fnLen = fn.length,
          argsLen = args.length;
      //对比函数的参数和当前传入参数
      //若参数不够就继续递归返回curry
      //若参数够就调用函数返回相应的值
      if(fnLen > argsLen){
        return function(...arg2s){
          return curry(fn,...args,...arg2s)
        }
      }else{
        return fn(...args)
      }
    }

### 17.使用闭包实现每隔一秒打印 1,2,3,4 ###

for (var i=1; i<=5; i++) {
      (function (i) {
        setTimeout(() => console.log(i), 1000*i)
      })(i)
    }

### 18.手写一个 jsonp ###

const jsonp = function (url, data) {
        return new Promise((resolve, reject) => {
            // 初始化url
            let dataString = url.indexOf('?') === -1 ? '?' : ''
            let callbackName = `jsonpCB_${Date.now()}`
            url += `${dataString}callback=${callbackName}`
            if (data) {
                // 有请求参数，依次添加到url
                for (let k in data) {
                    url += `${k}=${data[k]}`
                }
            }
            let jsNode = document.createElement('script')
            jsNode.src = url
            // 触发callback，触发后删除js标签和绑定在window上的callback
            window[callbackName] = result => {
                delete window[callbackName]
                document.body.removeChild(jsNode)
                if (result) {
                    resolve(result)
                } else {
                    reject('没有返回数据')
                }
            }
            // js加载异常的情况
            jsNode.addEventListener('error', () => {
                delete window[callbackName]
                document.body.removeChild(jsNode)
                reject('JavaScript资源加载失败')
            }, false)
            // 添加js节点到document上时，开始请求
            document.body.appendChild(jsNode)
        })
    }
    jsonp('http://192.168.0.103:8081/jsonp', {
        a: 1,
        b: 'heiheihei'
    })
    .then(result => {
        console.log(result)
    })
    .catch(err => {
        console.error(err)
    })

### 19.手写一个观察者模式 ###

class Subject{
      constructor(name){
        this.name = name
        this.observers = []
        this.state = 'XXXX'
      }
      // 被观察者要提供一个接受观察者的方法
      attach(observer){
        this.observers.push(observer)
      }
    
      // 改变被观察着的状态
      setState(newState){
        this.state = newState
        this.observers.forEach(o=>{
          o.update(newState)
        })
      }
    }
    
    class Observer{
      constructor(name){
        this.name = name
      }
    
      update(newState){
        console.log(`${this.name}say:${newState}`)
      }
    }
    
    // 被观察者 灯
    let sub = new Subject('灯')
    let mm = new Observer('小明')
    let jj = new Observer('小健')
     
    // 订阅 观察者
    sub.attach(mm)
    sub.attach(jj)
     
    sub.setState('灯亮了来电了')

### 20.EventEmitter 实现 ###

class EventEmitter {
        constructor() {
            this.events = {};
        }
        on(event, callback) {
            let callbacks = this.events[event] || [];
            callbacks.push(callback);
            this.events[event] = callbacks;
            return this;
        }
        off(event, callback) {
            let callbacks = this.events[event];
            this.events[event] = callbacks && callbacks.filter(fn => fn !== callback);
            return this;
        }
        emit(event, ...args) {
            let callbacks = this.events[event];
            callbacks.forEach(fn => {
                fn(...args);
            });
            return this;
        }
        once(event, callback) {
            let wrapFun = function (...args) {
                callback(...args);
                this.off(event, wrapFun);
            };
            this.on(event, wrapFun);
            return this;
        }
    }

### 21.生成随机数的各种方法？ ###

function getRandom(min, max) {
      return Math.floor(Math.random() * (max - min)) + min   
    }

### 22.如何实现数组的随机排序？ ###

let arr = [2,3,454,34,324,32]
    arr.sort(randomSort)
    function randomSort(a, b) {
      return Math.random() > 0.5 ? -1 : 1;
    }

### 23.写一个通用的事件侦听器函数。 ###

const EventUtils = {
      // 视能力分别使用dom0||dom2||IE方式 来绑定事件
      // 添加事件
      addEvent: function(element, type, handler) {
        if (element.addEventListener) {
          element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
          element.attachEvent("on" + type, handler);
        } else {
          element["on" + type] = handler;
        }
      },
      // 移除事件
      removeEvent: function(element, type, handler) {
        if (element.removeEventListener) {
          element.removeEventListener(type, handler, false);
        } else if (element.detachEvent) {
          element.detachEvent("on" + type, handler);
        } else {
          element["on" + type] = null;
        }
      },
     // 获取事件目标
      getTarget: function(event) {
        return event.target || event.srcElement;
      },
      // 获取 event 对象的引用，取到事件的所有信息，确保随时能使用 event
      getEvent: function(event) {
        return event || window.event;
      },
     // 阻止事件（主要是事件冒泡，因为 IE 不支持事件捕获）
      stopPropagation: function(event) {
        if (event.stopPropagation) {
          event.stopPropagation();
        } else {
          event.cancelBubble = true;
        }
      },
      // 取消事件的默认行为
      preventDefault: function(event) {
        if (event.preventDefault) {
          event.preventDefault();
        } else {
          event.returnValue = false;
        }
      }
    };

### 24.使用迭代的方式实现 flatten 函数。 ###

var arr = [1, 2, 3, [4, 5], [6, [7, [8]]]]
    /** * 使用递归的方式处理 * wrap 内保
    存结果 ret * 返回一个递归函数 **/
    function wrap() {
        var ret = [];
        return function flat(a) {
            for (var item of
                a) {
                    if (item.constructor === Array) {
                        ret.concat(flat(item))
                    } else {
                        ret.push(item)
                    }
            }
            return ret
        }
    } 
    console.log(wrap()(arr));

### 25.怎么实现一个sleep ###

*  sleep函数作用是让线程休眠，等到指定时间在重新唤起。

function sleep(delay) {
      var start = (new Date()).getTime();
      while ((new Date()).getTime() - start < delay) {
        continue;
      }
    }
    
    function test() {
      console.log('111');
      sleep(2000);
      console.log('222');
    }
    
    test()

### 26.实现正则切分千分位（10000 => 10,000） ###

//无小数点
    let num1 = '1321434322222'
    num1.replace(/(\d)(?=(\d{3})+$)/g,'$1,')
    //有小数点
    let num2 = '342243242322.3432423'
    num2.replace(/(\d)(?=(\d{3})+\.)/g,'$1,')

### 27.对象数组去重 ###

输入:
    [{a:1,b:2,c:3},{b:2,c:3,a:1},{d:2,c:2}]
    输出:
    [{a:1,b:2,c:3},{d:2,c:2}]

*  首先写一个函数把对象中的key排序，然后再转成字符串
 *  遍历数组利用Set将转为字符串后的对象去重

function objSort(obj){
        let newObj = {}
        //遍历对象，并将key进行排序
        Object.keys(obj).sort().map(key => {
            newObj[key] = obj[key]
        })
        //将排序好的数组转成字符串
        return JSON.stringify(newObj)
    }
    
    function unique(arr){
        let set = new Set();
        for(let i=0;i<arr.length;i++){
            let str = objSort(arr[i])
            set.add(str)
        }
        //将数组中的字符串转回对象
        arr = [...set].map(item => {
            return JSON.parse(item)
        })
        return arr
    }

### 28.解析 URL Params 为对象 ###

let url = 'http://www.domain.com/?user=anonymous&id=123&id=456&city=%E5%8C%97%E4%BA%AC&enabled';
    parseParam(url)
    /* 结果
    { user: 'anonymous',
      id: [ 123, 456 ], // 重复出现的 key 要组装成数组，能被转成数字的就转成数字类型
      city: '北京', // 中文需解码
      enabled: true, // 未指定值得 key 约定为 true
    }
    */

function parseParam(url) {
      const paramsStr = /.+\?(.+)$/.exec(url)[1]; // 将 ? 后面的字符串取出来
      const paramsArr = paramsStr.split('&'); // 将字符串以 & 分割后存到数组中
      let paramsObj = {};
      // 将 params 存到对象中
      paramsArr.forEach(param => {
        if (/=/.test(param)) { // 处理有 value 的参数
          let [key, val] = param.split('='); // 分割 key 和 value
          val = decodeURIComponent(val); // 解码
          val = /^\d+$/.test(val) ? parseFloat(val) : val; // 判断是否转为数字
    
          if (paramsObj.hasOwnProperty(key)) { // 如果对象有 key，则添加一个值
            paramsObj[key] = [].concat(paramsObj[key], val);
          } else { // 如果对象没有这个 key，创建 key 并设置值
            paramsObj[key] = val;
          }
        } else { // 处理没有 value 的参数
          paramsObj[param] = true;
        }
      })
    
      return paramsObj;
    }

### 29.模板引擎实现 ###

let template = '我是{
        {name}}，年龄{
        {age}}，性别{
        {sex}}';
    let data = {
      name: '姓名',
      age: 18
    }
    render(template, data); // 我是姓名，年龄18，性别undefined

function render(template, data) {
      const reg = /\{\{(\w+)\}\}/; // 模板字符串正则
      if (reg.test(template)) { // 判断模板里是否有模板字符串
        const name = reg.exec(template)[1]; // 查找当前模板里第一个模板字符串的字段
        template = template.replace(reg, data[name]); // 将第一个模板字符串渲染
        return render(template, data); // 递归的渲染并返回渲染后的结构
      }
      return template; // 如果模板没有模板字符串直接返回
    }

### 30.转化为驼峰命名 ###

var s1 = "get-element-by-id"
    // 转化为 getElementById

var f = function(s) {
        return s.replace(/-\w/g, function(x) {
            return x.slice(1).toUpperCase();
        })
    }

### 31.查找字符串中出现最多的字符和个数 ###

*  例: abbcccddddd -> 字符最多的是d，出现了5次

let str = "abcabcabcbbccccc";
    let num = 0;
    let char = '';
    
     // 使其按照一定的次序排列
    str = str.split('').sort().join('');
    // "aaabbbbbcccccccc"
    
    // 定义正则表达式
    let re = /(\w)\1+/g;
    str.replace(re,($0,$1) => {
        if(num < $0.length){
            num = $0.length;
            char = $1;        
        }
    });
    console.log(`字符最多的是${char}，出现了${num}次`);

### 32.图片懒加载 ###

let imgList = [...document.querySelectorAll('img')]
    let length = imgList.length
    
    const imgLazyLoad = function() {
        let count = 0
        return (function() {
            let deleteIndexList = []
            imgList.forEach((img, index) => {
                let rect = img.getBoundingClientRect()
                if (rect.top < window.innerHeight) {
                    img.src = img.dataset.src
                    deleteIndexList.push(index)
                    count++
                    if (count === length) {
                        document.removeEventListener('scroll', imgLazyLoad)
                    }
                }
            })
            imgList = imgList.filter((img, index) => !deleteIndexList.includes(index))
        })()
    }
    
    // 这里最好加上防抖处理
    document.addEventListener('scroll', imgLazyLoad)

## 参考资料 ##

*  高频 JavaScript 手写
 *  初、中级前端应该要掌握的手写代码实现
 *  22 道高频 JavaScript 手写
 *  [死磕 36 个 JS 手写题（搞懂后，提升真的大）][36 _ JS]

![0dcdb1451a36117a116bf64ed28c53b5.gif][]

[1. JavaScript 重温系列（22篇全）][1. JavaScript _22]

[2. ECMAScript 重温系列（10篇全）][2. ECMAScript _10]

[3. JavaScript设计模式 重温系列（9篇全）][3. JavaScript_ _9]

4. [正则 / 框架 / 算法等 重温系列（16篇全）][_ _ _ _ _16]

5. [Webpack4 入门（上）][Webpack4]|| [Webpack4 入门（下）][Webpack4 1]

6. [MobX 入门（上）][MobX] || [MobX 入门（下）][MobX 1]

7. 120[\+篇原创系列汇总][Link 1]

![ed80632976455cfbe52479cc3e03f621.gif][]

回复“**加群**”与大佬们一起交流学习~

点击“**阅读原文**”查看 120+ 篇原创文章

[36 _ JS]: https://mp.weixin.qq.com/s?__biz=MzI3ODU4MzQ1MA%3D%3D&idx=2&mid=2247491240&scene=21&sn=23045e57849ada6d917614d93a44dd95#wechat_redirect
[0dcdb1451a36117a116bf64ed28c53b5.gif]: /images/20221014/51422592582648ebaad58b3f2ab2147f.png
[1. JavaScript _22]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224ea86b5adfc10c3aa1841be3879b9360d671e98cc73391c2490246f1348857b9821d32c&idx=1&mid=2458453187&scene=21&sn=a69b4d7d991867a07a933f86e66b9f55#wechat_redirect
[2. ECMAScript _10]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e086b5adf6dad41a0d36b77a9bfb4bc9f0d29a816266b3e28c892e54274967dbce380b&idx=1&mid=2458453193&scene=21&sn=e5392cb77bc17c9e94b6c826b5f52a83#wechat_redirect
[3. JavaScript_ _9]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e386b5adf554ab928cdeaf7ee16dbb2d895be17f2a12a59054a75b913470ca7649bbc7&idx=1&mid=2458453194&scene=21&sn=e7f0734b04484bee5e10a85a7cbb85c1#wechat_redirect
[_ _ _ _ _16]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e286b5adf432850f82db18cc8647d639836798cf16b478d9a6f7c81df87c6da5257684&idx=1&mid=2458453195&scene=21&sn=1e0c8b7ea8ddc207b523ec0a636a5254#wechat_redirect
[Webpack4]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251f86b5ac09dbbbb7c8e1d80c6cbd793a523cdfa690f8734def57812e616b9906aeec79&idx=1&mid=2458453302&scene=21&sn=904e40a421024ea0d394e9850b674012#wechat_redirect
[Webpack4 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251e86b5ac08464872cd880811423e0d1bbcebbe11dcac9d99fa38c5332c089c06d65d95&idx=1&mid=2458453303&scene=21&sn=422f2b5e22c3b0e91a8353ee7e53fed9#wechat_redirect
[MobX]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264c86b5af5aa7300a04d55efead6223e310d68e10222cd3577a25c783d3429f00767960&idx=1&mid=2458453605&scene=21&sn=0a506769d5eeb7953f676e93fb4d18eb#wechat_redirect
[MobX 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264086b5af5611524eedb0d409afe86d859dce6ceff1c17ddab49d353c385e45611a73fa&idx=1&mid=2458453609&scene=21&sn=f0c22e82f2537204d9b173161bae6b82#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224dd86b5adcbd98189315e60de6a0106993690b69927cc1c1f19fd8f591fefce4e3db51f&idx=2&mid=2458453236&scene=21&sn=daf00392f960c115463c5aaf980620b4#wechat_redirect
[ed80632976455cfbe52479cc3e03f621.gif]: /images/20221014/b817f9711dc74ab59c8433f8d027cec5.png