前端经典面试题(代码篇)

在面试前端开发中，原生JavaScript能力的高低是占比很大的一个体现部分，不少考官会有要求现场写一些JS方法，以下整理了一些前端面试的各种方法，希望能帮到你。

1. promise的实现

class IPromise {
      callbacks = [];
      failbacks = [];
      constructor(fn) {
          fn(this.resolve.bind(this), this.reject.bind(this));
      }
      resolve(res) {
          if (this.callbacks.length > 0) this.callbacks.shift()(res, this.resolve.bind(this), this.reject.bind(this));
      }
      reject(res) {
          this.callbacks = [];
          if (this.failbacks.length > 0) this.failbacks.shift()(res, this.resolve.bind(this), this.reject.bind(this));
      }
      catch(fn) {
          this.failbacks.push(fn);
      }
      then(fn) {
          this.callbacks.push(fn);
          return this;
      }

1. bind的实现

Function.prototype.mybind = function () {
    var self = this,args = arguments;
    return function () {
        self.apply(args);
    }

}

1. 函数防抖

// func是用户传入需要防抖的函数
// wait是等待时间
const debounce = (func, wait = 50) => {
  // 缓存一个定时器id
  let timer = 0
  // 这里返回的函数是每次用户实际调用的防抖函数
  // 如果已经设定过定时器了就清空上一次的定时器
  // 开始一个新的定时器，延迟执行用户传入的方法
  return function(...args) {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      func.apply(this, args)
    }, wait)
  }
}

1. 函数节流

function throttle(method,delay){
    var timer=null;
    return function(){
        var context=this, args=arguments;
        if(timer) return;
        timer=setTimeout(function(){
            method.apply(context,args);
            timer = null;
        },delay);
    }
}

1. 深拷贝

function deepClone(obj) {
    let result = typeof  obj.splice === "function" ? [] : {};
    if (obj && typeof obj === 'object') {
        for (let key in obj) {
            if (obj[key] && typeof obj[key] === 'object') {
                result[key] = deepClone(obj[key]);//如果对象的属性值为object的时候，递归调用deepClone。
            } else {
                result[key] = obj[key];//如果对象的属性值不为object的时候，直接复制参数对象的每一个键值到新的对象对应的键值对中。
            }

        }
        return result;
    }
    return obj;
}

1. 单例模式

function A(name){
    // 如果已存在对应的实例
   if(typeof A.instance === 'object'){
       return A.instance
   }
   //否则正常创建实例
   this.name = name
   
   // 缓存
   A.instance =this
   return this
}

1. 发布订阅模式

// 事件类
 class EventEmitter {
     constructor () {
         this.events = { } // 事件队列，保存着每一种事件的处理程序
     }
 
     on (type, callback) { // type 要绑定的事件名字， callback 处理程序
         if (this.events[type]) {// 如果事件队列中有这个事件
             // 将此次绑定的处理程序放入进去
             this.events[type].push(callback.bind(this))
             return false
         }
         // 如果没有这个事件，新建
         this.events[type] = [callback.bind(this)]
     }
 
     emit (type, ...args) {
         // 触发事件的时候如果没有事件，报错
         if (!this.events[type]) {
             console.error('type event is not found')
         }else {
             // 挨个执行队列中的处理程序
             this.events[type].forEach(callback => {
                 callback(...args)
             });
         }
     }
 }
 
 let bus = new EventEmitter()
 
 bus.on('play', (num1, num2) => {
     alert(456)
     alert(num1 + num2)
 })
 
 bus.emit('play', 1, 2)

1. new的实现

function create() {
    // 创建一个空的对象
    let obj = new Object()
    // 获得构造函数
    let Con = [].shift.call(arguments)
    // 链接到原型
    obj.__proto__ = Con.prototype
    // 绑定 this，执行构造函数
    let result = Con.apply(obj, arguments)
    // 确保 new 出来的是个对象
    return typeof result === 'object' ? result : obj
}

1. 闭包：访问函数内部变量的函数

   function A() {    
   	var count = 0;    
   	function B() {       
   		count ++;       
   		console.log(count);    
   	}    
   	return B;
   }
   var C = A();
   C();// 1
   C();// 2
   C();// 3

2. 冒泡排序

   function bubbleSort(arr) {
       let len = arr.length;
       for (var i = 0; i < len; i++) {
           for (var j = 0; j < len - 1 - i; j++) {
               if (arr[j] > arr[j+1]) {        //相邻元素两两对比
                   [arr[j], arr[j+1]] = [arr[j+1], arr[j]];        //元素交换
               }
           }
       }
       return arr;
   }

3. 快排

   function quickSort(arr){
       //如果数组<=1,则直接返回
       if(arr.length <= 1) { return arr; }
       var pivotIndex = Math.floor(arr.length/2);
       //找基准，并把基准从原数组删除
       var pivot=arr.splice(pivotIndex, 1)[0];
       //定义左右数组
       var left=[];
       var right=[];
       //比基准小的放在left，比基准大的放在right
       for(var i=0; i<arr.length; i++){
   	    if(arr[i]<=pivot){
   	          left.push(arr[i]);
   	    }else{
   	          right.push(arr[i]);
   	    }
       }
       //递归
       return quickSort(left).concat([pivot],quickSort(right));
   }

4. 数组去重

   let arr = [1,1,2,3,4,4,4]
   let result1 = arr.filter((val, key, self) => self.indexOf(val) === key)
   
   let result2 = [...new Set(arr)]
   
   let result2 = Array.from(new Set(arr))