前端基础之手写代码篇

01.常用方法

// 01. Math相关方法
Math.floor(x) // 向下取整
Math.abs(x) // 取绝对值
Math.max(x,y) // 取较大值
Math.min(x,y) // 取较小值
Math.round(x) // 四舍五入

// 02. Array相关方法
push() // 向数组的末尾添加一个或更多元素，并返回新的长度。
unshift() // 向数组的开头添加一个或更多元素，并返回新的长度。
reverse() // 颠倒数组中元素的顺序。
pop() // 删除并返回数组的最后一个元素
shift()	// 删除并返回数组的第一个元素
slice(start,end) // 从已有的数组中返回选定的元素
splice(index,howmany,item1,.....,itemX) // 删除元素，并向数组添加新元素。

// 03. string相关方法
charAt() // 返回在指定位置的字符。
indexOf() // 检索字符串。
substring(start,end)	// 提取字符串中两个指定的索引号之间的字符。

02.实现new操作符

// 1、Con: 接收一个构造函数
// 2、args：传入构造函数的参数
function create(Con, ...args){
    let obj = {};
    obj._proto_ = Con.prototype;
    let result = Con.apply(obj,args)
    return result instanceof Object ?  result : obj;
}
// 构造函数
function Test(name, age) {
    this.name = name
    this.age = age
}
Test.prototype.sayName = function () {
    console.log(this.name)
}
// 实现一个 new 操作符
const a = create(Test,'小鹿','23')
console.log(a.age)

03.实现一个深拷贝

乞丐版

JSON.parse(JSON.stringify());

基础版

function clone(target) {
    let cloneTarget = {};
    for (const key in target) {
        cloneTarget[key] = target[key];
    }
    return cloneTarget;
};

考虑数组

function clone(target) {
    if (typeof target === 'object') {
        let cloneTarget = Array.isArray(target) ? [] : {};
        for (const key in target) {
            cloneTarget[key] = clone(target[key]);
        }
        return cloneTarget;
    } else {
        return target;
    }
};

考虑循环引用

// function clone(target, map = new WeakMap()) {
function clone(target, map = new Map()) {
    if (typeof target === 'object') {
        let cloneTarget = Array.isArray(target) ? [] : {};
        if (map.get(target)) {
            return map.get(target);
        }
        map.set(target, cloneTarget);
        for (const key in target) {
            cloneTarget[key] = clone(target[key], map);
        }
        return cloneTarget;
    } else {
        return target;
    }
};

04.继承实现

组合继承（构造函数+原型链）

function SuperType(name){ 
 this.name = name; 
 this.colors = ["red", "blue", "green"]; 
} 
SuperType.prototype.sayName = function(){ 
 alert(this.name);
}; 
function SubType(name, age){ 
 //继承属性
 SuperType.call(this, name); 
 this.age = age; 
} 
//继承方法
SubType.prototype = new SuperType(); 
SubType.prototype.constructor = SubType; 
SubType.prototype.sayAge = function(){ 
 alert(this.age); 
}; 
var instance1 = new SubType("Nicholas", 29); 
instance1.colors.push("black"); 
alert(instance1.colors); //"red,blue,green,black" 
instance1.sayName(); //"Nicholas"; 
instance1.sayAge(); //29 
var instance2 = new SubType("Greg", 27); 
alert(instance2.colors); //"red,blue,green" 
instance2.sayName(); //"Greg"; 
instance2.sayAge(); //27

05. 防抖与节流

// 防抖-定时器版
function debounce(fn,delay=500){
    let timer
    return function(){
        timer && clearTimeout(timer) 
        timer = setTimeout(() => {
            fn.apply(this, arguments)
        },delay)
    }
}
// 节流-定时器版
throttle (fn, delay = 500) {
  let timer = null
  return function () {
    if (!timer) {
      timer = setTimeout(() => {
        fn.apply(this, arguments)
        clearTimeout(timer)
        timer = null
      }, delay)
    }
  }
}
// 节流-时间戳版
function throttle(func, delay=500){
  let prev = Date.now();
  return function(){
    let context = this;
    let args = arguments;
    let now = Date.now();
    if(now - prev >= delay){
      func.apply(context, args);
      prev = Date.now();
    }
  }
}

06. call、apply、bind实现

Function.prototype.myCall = function(context) {
  var context = Object(context) || window;
  context.fn = this;
  const args = [...arguments].slice(1);
  //const args = Array.prototype.slice.call(arguments, 1);
  //const args = Array.from(arguments).slice(1);
  let result = context.fn(...args);
  delete context.fn;
  return result;
}

Function.prototype.myApply = function(context, args) {
    var context = Object(context) || window
    context.fn = this
    let result = args ? context.fn(...args) : context.fn()
    delete context.fn
    return result
}

Function.prototype.myBind = function(context) {
    const self = this;
    const args1 = [...arguments].slice(1);
    const bindFn = function() {
        const args2 = [...arguments];
        return self.apply(this instanceof bindFn ? this : context, args1.concat(args2));
    }
    function proFn() {} 
    proFn.prototype = self.prototype; 
    return bindFn
}

07. 函数柯理化实现

function add(...args) {
    let res = 0
    args.forEach(num => {
        res += num
    })
    return res
}
function curry (fn, ...arg) {
    let all = arg || []
    return function sum(...arg) {
        if (arg.length == 0) {
            return fn.apply(null,all)
        } else {
            all.push(...arg)
            return sum
        }
    }
}
console.log(curry(add, 1, 5)(2,3)())

08. EventBus实现

class EventBus{
    constructor(){
      this.event = Object.create(null);
    };
    //注册事件
    on(name,fn){
      if(!this.event[name]){
        //一个事件可能有多个监听者
        this.event[name]=[];
      };
      this.event[name].push(fn);
    };
    //触发事件
    emit(name,...args){
      //给回调函数传参
      this.event[name]&&this.event[name].forEach(fn => {
        fn(...args)
      });
    };
    //只被触发一次的事件
    once(name,fn){
      //在这里同时完成了对该事件的注册、对该事件的触发，并在最后并取消该事件。
      const cb=(...args)=>{
        //触发
        fn.apply(this,args);
        //取消
        this.off(name,fn);
      };
      //监听
      this.on(name,cb);
    };
    //取消事件
    off(name,offcb){
      if(this.event[name]){
        let index=this.event[name].findIndex((fn)=>{
          return offcb===fn;
        })
        this.event[name].splice(index,1);
        if(!this.event[name].length){
          delete this.event[name];
        }
      }
    }
  }

08. promise.all实现

function isPromise(obj) {
    return !!obj && (typeof obj === 'object' || typeof obj === 'function') && typeof obj.then === 'function';  
}

const myPromiseAll = (arr)=>{
    let result = new Array(arr.length)
    return new Promise((resolve,reject)=>{
        for(let i = 0;i < arr.length;i++){
            if(isPromise(arr[i])){
                arr[i].then((data)=>{
                    result[i] = data;
                    let tag = true
                    for (let val of result) {
                        if (val === undefined) {
                            tag = false
                            break
                        }
                    }
                    if(tag){
                        resolve(result)
                    }
                },reject)
            }else{
                result[i] = arr[i];
            }
        }    
    })
}
// 测试
let p1 = Promise.resolve(3);
let p2 = 1337;
let p3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
}); 
myPromiseAll([p1, p2, p3]).then(values => { 
  console.log(values); // [3, 1337, "foo"] 
});