2020面试系列-js手写代码

函数节流，防抖

 节流

//函数节流
function throttle(handler, wait) {
        let preTime = 0;
        return function () {
          let now = Date.now();
          if (now - preTime >= wait) {
            handler();
            preTime = now;
          }
        };
      }
      var t = throttle(function () {
        console.log(11);
      }, 1000);
      var oBtn1 = document.getElementById('btn1');
      oBtn1.onclick = function(){
          t();
      }

　防抖

//函数防抖
function debounce(handler, wait) {
        let timer = null;
        return function () {
          if(timer){
              clearTimeout(timer);
          }
          timer = setTimeout(
              handler,1000
          )
        };
      }

      var t = debounce(function () {
        console.log(11);
      }, 1000);

      document.onmousemove = function(){
          t();
      }

　　

　

实现call，apply，bind

call

Function.prototype.mcall = function (context) {
  //传参第一个参数转对象，不传参直接去window
  let ctx = Object(context) || window;
  let fn = "fn",
    res = "";
  while (ctx.hasOwnProperty(fn)) {
    // 循环判断并重新赋值 ,防止上下文对象上本来就有同名方法
    fn = fn + Math.random();
  }
  //把绑定函数作为上下文对象的方法
  ctx[fn] = this;
  //作为对象方法调用绑定函数，并把参数传入
  if (arguments.length > 1) {
    res = ctx[fn](...[...arguments].slice(1));
  } else {
    res = ctx[fn]();
  }
  delete ctx[fn];
  //返回函数返回值
  return res;
};

apply

Function.prototype.mapply = function (context, arr) {
  let ctx = Object(context) || window;

  let fn = "fn",
    res = "";
  while (ctx.hasOwnProperty(fn)) {
    fn = fn + Math.random();
  }

  ctx[fn] = this;

  if (arr) {
    res = ctx[fn](...arr);
  } else {
    res = ctx[fn]();
  }

  delete ctx[fn];
  return res;
};

bind

Function.prototype.mbind = function (context) {
  context = context ? Object(context) : window;
  //保存argumets
  var mArguments = arguments,
    self = this;
  if (arguments.length > 1) {
    return function () {
      //借用apply
      self.apply(context, [...mArguments].slice(1));
    };
  } else {
    return function () {
      self.apply(context);
    };
  }
};

　　

实现数组实例方法

push

//push 从后面新增
Array.prototype.push = functon(){
  for(var i =0;i<arguments.length;i++){
    this[this.length-1] = arguments[i];
  }
  return this.length;
}　　

POP

//pop 从后面删除一个
Array.prototype.pop = function(){
  var item = this[this.length-1];
  if(this.length>0){
    this.length = this.length - 1;
  }
  return item;

}

　shift

//shift 从前面删除一项
Array.prototype.shift = function(){
  var item = this[0];
  for(var i = 1;i<this.length;i++){
    this[i-1] = this[i];
  }
  this.length = this.length-1;
  return item;
}

unshrft

//unshift 从前面增加n项
Array.ptototype.unshift = function(){
  var l = arguments.length;
  //把原数组向后移动
  for(var i= 0;i<this.length;i++){
    this[i+l] = this[i];
  }
  //赋值
  for(var j = 0;j<arguments.length;j++{
    this[j] = arguments[j];
  }
  return this.length;
}

　filter

//fitler
Array.prototype.fitler = function(handler){
  var newArr = [];
 for(var i = 0;i<this.length;i++){
   if(handler(this[i],i,this)){
    newArr[newArr.length] = this[i];
   }
 }
  return newArr;
}

　　

数组去重

//普通去重
function unique(arr) {
  var newArr = [];
  arr.forEach((item, index, arr) => {
    if (newArr[newArr.length] != item) {
      newArr[newArr.length] = item;
    }
  });
  return newArr;
}
//indexOf去重
function unique(arr) {
  var newArr = [];
  arr.forEach((item, inddex, arr) => {
    if (newArr.indexOf(item) == -1) {
      newArr.length = item;
    }
  });
  return newArr;
}
//利用对象属性不能相同
function unique(arr) {
  var obj = {},
    newArr = [];
  arr.forEach((item, index, arr) => {
    if (!obj[item]) {
      obj[arr[i]] = 1;
      newArr.push(item);
    }
  });
  return newArr;
}
//es6去重
function unique(arr) {
  return Array.from(new Set(arr));
}
//扩展运算符
function unique(arr) {
  return [...new Set(arr)];
}

　　

排序算法

//冒泡排序
//相邻两元素之间两两比较，比较出大值进行赋值互换，再依次与相邻的元素比较，层层递进
//假设升序排序
function bubbleSort(arr) {
  var l = arr.length;
  for (var i = 0; i < l; i++) {
    //比较轮数
    for (var j = 0; j < l - i - 1; j++) {
      //每一轮确定一个最大值，放最右边
      var temp = arr[j];
      if (arr[j] > arr[j + 1]) {
        arr[j] = arr[j + 1];
        arr[j + 1] = temp;
      }
    }
  }
  return arr;
}

//选择排序
//先假设一个值为最大或者最小值

function selectSort(arr){
  for(var i = 0;i<arr.length;i++){
    var minIndex = i; 
    for(var j = i;j<arr.length;j++){
      if(arr[j]>arr[j+1]){
        minIndex=j+1;
        var temp = arr[j];
        arr[j] = arr[j+1];
        arr[j+1] = temp;
      }
    }
  }

}
//快速排序
//找基准，遍历数组，小于基准的放在left，大于基准的放在right，最后递归
function quickSAort(arr){
  if(arr.length<=1>)return arr;
  var temp = arr[0],left=[],right =[];
  for(var i = 1;i<arr.length;i++){
    if(arr[i]<temp){
      left.push(arr[i])
    }else{
      right.push(arr[i])
    }
  }
  return [].concat(quickSort(left),temp,quickSort(right));
}

　　

深拷贝

//深拷贝黑科技
JSON.parse(JSON.stringify(obj));
//存在问题：无法拷贝原型上的属性和方法

//递归实现
function deepCopy(obj) {
  var newobj = obj.constructor === Array ? [] : {};
  if (typeof obj !== "object") {
    return obj;
  } else {
    for (var i in obj) {
      //判断对象的这条属性是否为对象,//若是对象进行嵌套调用,否则直接赋值
      newobj[i] = typeof obj[i] === "object" ? deepCopy(obj[i]) : obj[i];
    }
  }
  return newobj; //返回深度克隆后的对象
}

　　

拉平多维数组

//简便方法
function flatArr(arr) {
  return arr.join(",").split(",");
}
//递归实现
function flat(arr) {
  let arr1 = [];
  arr.forEach((val) => {
    if (val instanceof Array) {
      arr1 = arr1.concat(flat(val));
    } else {
      arr1.push(val);
    }
  });
  return arr1;
}

　　

setTimeout模拟定时器

function mInterval() {
  //要执行的逻辑
  console.log(1);
  //每次逻辑执行完，才会向队列添加事件
  setTimeout(mInterval, 1000);
}

mInterval();

　　

手写promise

promise

//判断变量是否是函数
function isFunction(variable) {
  return typeof variable === "function";
}

//promise构造函数
function MyPromise(handle) {
  if (!isFunction(handle)) {
    throw new Error("必须传入一个函数");
  }
  this.status = "pending"; //状态,默认等待状态
  this.value = ""; //值
  this.onResolveCallbacks = []; //存放成功回调的数组
  this.onRejectCallbacks = []; //存放失败回调的数组
  var that = this;
  try {
    handle(resolve, reject);
  } catch (err) {
    reject(err); //有报错，状态直接变为rejected
  }

  function resolve(val) {
    if (that.status == "pending") {
      that.status = "resolved";
      that.value = val;
      that.onResolveCallbacks.forEach((fn) => {
        fn();
      });
    }
  }

  function reject(err) {
    if (that.status == "pending") {
      that.status = "rejected";
      that.value = err;
      that.onRejectCallbacks.forEach((fn) => {
        fn();
      });
    }
  }
}

 

promise.then

MyPromise.prototype.then = function (sucFun, faildFun) {
  //可选参数
  //如果没有传，只负责把值往后传
  sucFun = isFunction(sucFun) ? sucFun : (value) => value;
  faildFun = isFunction(faildFun) ? faildFun : (value) => value;
  var that = this;
  //先改变了状态
  if (this.status === "resolved") {
    sucFun(this.value);
  }
  if (this.status === "rejected") {
    faildFun(this.value);
  }
  //先指定了回调函数，状态还没改变
  if (this.status === "pending") {
    //存住回调函数，在异步操作完成时调用
    this.onResolveCallbacks.push(() => {
      sucFun(this.value);
    });
    this.onRejectCallbacks.push(() => {
      faildFun(this.value);
    });
  }

  return this;
};

　promise.all

Promise.allFun = (arr) => {
  return new Promise((resolve, reject) => {
    var resolveArr = [],
      rejectArr = [];
    for (var i = 0; i < arr.length; i++) {
      if (!(arr[i] instanceof Promise)) {
        arr[i] = Promise.resolve(arr[i]);
      }
      arr[i]
        .then((res) => {
          resolveArr.push(res);
          if (resolveArr.length == arr.length) {
            resolve(resolveArr);
          }
        })
        .catch((err) => {
          rejectArr.push(err);
          reject(rejectArr);
        });
    }
  });
};

promise.race

myPromise.race = function (arr) {
  return new Promise(function (resolve, reject) {
    for (var i in arr) {
      arr[i].then(resolve, reject);
    }
  });
};

　　

实现一个并发请求控制方法

async function sendRequest(list, max = 4) {
  return new Promise((resolve, reject) => {
    let index = 0; //
    let count = 0; //上传成功个数
    const start = () => {
      while (max > 0 && index < list.length) {
        //剩余位置-1
        max--;
        let chunk = list[index];
        index++;
        request().then((res) => {
          max++; //释放暂用位置
          count++; //上传成功数量+1
          if (count == list.length) {
            resolve("完成了");
          } else {
            start();
          }
        });
      }
    };

    start();
  });
}

function request() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(1);
      resolve(1);
    }, 2000);
  });
}

var list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1];
sendRequest(list, 4)
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    console.log("上传失败了");
  });

　　

实现new

function new() {
  //创建空对象
  let obj = {};
  //获取构造函数
  let Constructor = Array.prototype.shift.call(arguments);
  //绑定原型关系
  obj.__proto__ = Constructor.prototype;
  // 执行构造函数，即绑定 this，并且为这个新对象添加属性
  Constructor.apply(newObj, arguments);
  //返回新对象
  return obj;
}

　　

Object.create

新创建一个对象，使用传入对象作为新对象的原型对象

Object.create = function (obj) {
  //创建空构造函数F
  function F() {}
  //F的prottotype指向obj
  F.prtotype = obj;
  //返回F实例
  return new F();
};

　　

输出数据类型

function getType(param){
        if(param){
           return Object.prototype.toString.call(param).split(' ')[1].split(']')[0];
        }else{<br>　　　　　　 console.log('参数不能为空')<br>　　　　　　}
 
     }

 斐波那契数列

//给定位置，输出对应的值
function fib(n){
        if(n==1||n==2){
            return 1;
        }
        return fib(n-1)+fib(n-2)
      }