关于面试:前端面试常见js手写题记录含答案

本篇文章次要记录了前端口试中常考的根底手写题，对源码进行了一点缩减，也是为了能在口试中能更快的写进去。

防抖节流：

// 防抖
function debounce(fn, time) {
  let timer;
  return function () {clearTimeout(timer);
    timer = setTimeout(() => {fn.call(this, ...arguments);
    }, time);
  };
}

// 节流
function throttle(fn, delay) {var prev = Date.now();
  return function () {var now = Date.now();
    if (now - prev >= delay) {fn.call(this, ...arguments);
      prev = Date.now();}
  };
}

继承：

// 组合继承
function Parent(name){this.name = name;}
Parent.prototype.getName = function(){console.log(this.name)
}
function Child(name){Parent.call(this,name);
}
Child.prototype = new Parent();



// 寄生组合
function Parent(name){this.name = name;}
Parent.prototype.getName = function () { console.log(this.name) }
function Child(name){Parent.call(this,name);
}
Child.prototype = Object.create(Parent.prototype,{
    constructor:{
        value:Child,
        writable:true,
        enumerable:false,
        configurable:true
    }
})

call、apply、bind 实现：

//call
Function.prototype.myCall = function (content, ...args) {
  content = content || window;
  content.fn = this;
  let result = content.fn(...args);
  delete content.fn;
  return result;
};

//apply
Function.prototype.myApply = function (content, arr) {
  content = content || window;
  content.fn = this;
  let result = arr && content.fn(...arr);
  delete content.fn;
  return result;
};


//bind
Function.prototype.myBind = function (content, ...args) {
  const that = this;
  return  function F() {if (this instanceof F) {return new that(...args, ...arguments); // 因为返回了一个函数，咱们能够 new F()，所以须要判断}
    return that.apply(content, [...args, ...arguments]);
  };
};

柯里化：

// 定长柯里化
function curry(fn, ...presetArgs) {return function (...args) {let allargs = [...presetArgs, ...args];
    if (allargs.length >= fn.length) {fn.apply(this, allargs);
    } else {return curry(fn, ...allargs);
    }
  };
}


// 累加函数
function add(){let  args= [...arguments];
    let adder = function(){args.push(...arguments);
        return adder;
    }
    adder.toString = function (){return args.reduce((a,b)=>a+b)
    }
    return adder;
}

new、instanceof、object.create 实现：

//new
function myNew(Con, ...args) {let obj = {};
  obj.__proto__ = Con.prototype;
  let result = Con.call(obj, ...args);
  return result instanceof Object ? result : obj;
}



//instanceof
function myInstanceof(left, right) {
  let prototype = right.prototype;
  left = left.__proto__;
  while (true) {if (left === null || left === undefined) return false;
    if (prototype === left) return true;
    left = left.__proto__;
  }
}

//object.create
function myCreate(p) {function F(){}
    F.prototype = p;
    return new F();}

其余：

// 数组 map
function map(arr,callback) {if(Array.isArray(arr)){let newArr = [];
        for(let i = 0 ;i<arr.length;i++){newArr[i] = callback(arr[i],i,arr);
        }
        return newArr;
    }
    return [];}

// 深拷贝
const deepCopy = function (obj) {let newObj = obj instanceof Array ? [] : {};
  for (let key in obj) {if (obj.hasOwnProperty(key)) {newObj[key] =
        typeof obj[key] === "object" ? deepCopy(obj[key]) : obj[key];
    }
  }
  return newObj;
};

// 冒泡排序
const popSort = (arr)=>{for(let i=0;i<=arr.length-1;i++){for(let j=i+1;j<=arr.length;j++){if (arr[i] > arr[j]) {[arr[i], arr[j]] = [arr[j], arr[i]];
             }
      }
 
  }
}

50 行简略版 Promise 实现：

// 以后执行栈执行结束时会立即先解决所有微工作队列中的事件，而后再去宏工作队列中取出一个事件。同一次事件循环中，微工作永远在宏工作之前执行
const PENDING = "pending",
  RESOLVED = "fulfilled",
  REJECTED = "rejected";
function myPromise(fn) {
  this.val = null;
  this.state = PENDING;
  this.resolvedCallback = [];
  this.rejectedCallback = [];
  try {fn(resolve.bind(this), reject.bind(this));
  } catch (e) {this.reject(e);
  }
  function resolve(val) {if (this.state === PENDING) {setTimeout(() => {
        this.state = RESOLVED;
        this.val = val;
        this.resolvedCallback.forEach((cb) => cb(val));
      });
    }
  }
  function reject(val) {if (this.state === PENDING) {setTimeout(() => {
        this.state = REJECTED;
        this.val = val;
        this.rejectedCallback.forEach((cb) => cb(val));
      });
    }
  }
}
myPromise.prototype.then = function (onResolve, onReject) {onResolve = typeof onResolve === "function" ? onResolve : (v) => v;
  onReject =
    typeof onReject === "function"
      ? onResolve
      : (r) => {throw r;};
  if (this.state === PENDING) {this.resolvedCallback.push(onResolve);
    this.rejectedCallback.push(onReject);
  }
  if (this.state === RESOLVED) {setTimeout(() => {onResolve(this.val);
    });
  }
  if (this.state === REJECTED) {setTimeout(() => {onReject(this.val);
    });
  }
};