面试题手撕篇

参考博客

开始之前，理解递归

手写 浅拷贝

function shallow(target){
    if(target instanceof Array){
        return [...resObj]
    }else{
        return Object.assign({},target);
    }
}

手写深拷贝

const _sampleDeepClone = target => {
                // 补全代码
                return JSON.parse(JSON.stringify(target))
            }

无法处理处理循环引用的问题

完整写法

function DeepCopy(target, map = new Map()) {
  //对于普通类型 直接返回即可
  if(typeof target!=='object' || target===null){return target}
  //主要处理的是引用类型

  let result = Array.isArray(target)?[]:{};

  if (map.has(target)) {
    result = map.get(target);
  } else {
    map.set(target, result);
    for (let key in target) {
      if (target.hasOwnProperty(key)) {
        if (typeof target[key] === "object") {
          result[key] = DeepCopy(target[key], map);
        } else {
          result[key] = target[key];
        }
      }
    }
  }
  return result;
}

手写new

当你使用 new Person() 来调用构造函数 Person 时，它会创建一个新的对象，并将该对象的原型设置为 Person.prototype。这个新对象可以通过 this 关键字在构造函数内部访问和设置属性。

function Person(name, age){
  this.name=name;
  this.age=age;
  return{
    abc:'abc'
  } 
  //mynew中最后的判断就是为了防止这种情况：构造函数会返回值，而不会创建新的实例
}

function myNew(func, ...args) {
  //接受不确定长度的参数放到args数组中

  if (typeof func !== "function") {
    return new TypeError("fn must be a function");
  }

  //把新对象的__proto__指向func.prototype
  let obj = Object.create(func.prototype);
  //构造函数内部的 this 值指向新创建的对象，从而在构造函数中正确地初始化新对象的属性和方法。
  //apply会立即执行
  //result接受执行结果
  let result = func.apply(obj, args);
  //如果构造函数有返回值，则返回这个返回值，没有的话返回新创建的对象
  if (result && (typeof result === "object" || typeof result === "function")) {
    return result;
  } else {
    return obj;
  }
}

// const f1=new Person("xiaoming",22)
const f2= myNew(Person,"xiaoming",22)
console.log(f2);

手写instanceof

function myInstanceof(obj,target){
//obj是被判断的对象
//target是一个构造函数
  if(typeof obj!=='object'|| typeof target !== 'function'){
    return new TypeError("inputs must be object type!")
  }


  let objProto = obj.__proto__
  while(objProto!==null){
  //注意这里用的是 构造函数.prototype
    if(objProto===target.prototype) return true
    objProto = obj.__proto__
  }

  return false
}
console.log(myInstanceof([1,2],Array));

Object.create

Object.create(proto)返回一个新对象，新对象的原型是proto

【可以不看】proto应该填入一个对象，而不是一个构造函数。
如果你使用 Object.create(Person)，而不是 Object.create(Person.prototype)
person 对象的原型将直接设置为 Person 构造函数本身，而不是 Person 构造函数的原型。这意味着 person 对象将无法继承 Person.prototype 上的属性和方法。
这意味着 person 对象将继承 Function.prototype 上的属性和方法，而不是 Person.prototype 上的属性和方法。

function myOBJcreate(proto){
  function f(){}
  f.prototype = proto

  return new f()
}

const obj1={
  name:'alice',
  age:11
}
const f1 = Object.create(obj1)
const f2 = myOBJcreate(obj1)
//不需要比较，因为f1 f2是两个不同的对象

手写 防抖

主要思路：定时器控制1s后触发，并且保证只有一个定时器会被触发（timer的作用）
其实就是用定时器，来控制，这个函数只能1s后触发。

    let Inp = document.querySelector("input");
    function getValue() {
        console.log(`获取${Inp.value}`);
    }
    Inp.addEventListener("keyup", debounce(getValue, 1000));

//业务代码
    function debounce(func, time) {
        let timer = null;
        return function () {
            if (!timer) {
                timer = setTimeout(() => {
                    func.apply(this, arguments);
                    timer = null;
                }, time);
            }
        };
    }

如果你想传参：

    let Inp = document.querySelector("input");
    function getValue(name) {
      console.log(`${name}获取${Inp.value}`);
    }
    newfunc = debounce(getValue, 1000);
    Inp.addEventListener("keyup", ()=>{
        newfunc("xiaoming")
    });

    function debounce(func, time) {
      let timer = null;
      return function () {
        if (!timer) {
          timer = setTimeout(() => {
            func.apply(this, arguments);
            timer = null;
          }, time);
        }
      };
    }

节流防抖巧记！

下面是业务代码，只有一行不同。
可以先把防抖的写出来（防抖的更容易理解），然后吧func.apply移出timer即可。
即节流第一次触发就要执行。

    function debounce(func, delay) {
      let timer = null;
      return function () {
        if (!timer) {
          timer = setTimeout(() => {
            func.apply(this, arguments);
            timer = null;
          }, delay);
        }
      };
    }

    const throttle = (func, delay) => {
      let timer;
      return function () {
        if (!timer) {
          func.apply(this, arguments);
          timer = setTimeout(() => {
            timer = null;
          }, delay);
        }
      };
    };

手写 节流（另一种方式，了解）

主要思路：判断上次触发的时间和这次的时间
使用方法是这样的：

const throttledFunction = throttle(myFunction, 1000); // 设置节流时间为1秒

throttledFunction就是一个具有节流功能的函数。你可以调用它来代替原始的myFunction函数。

const throttle = (func, delay) => {
  let timer;
  return function () {
    if (!timer) {
      func.apply(this, arguments);
      timer = setTimeout(() => {
        timer = null;
      }, delay);
    }
  };
};

function test(name){
  this.name = name;
  console.log(`name is ${name}`);
}

let newfunc = throttle(test,5000)

newfunc('xiaoming') //只会运行1个
newfunc('xiaoming')

手写call

函数科里化的实现

前置：reduce方法：arr.reduce((accumulator, currentValue, currentIndex, array)=>{},初始值)

实现add函数：

function add(...args){
  const sum = args.reduce((total,num)=>total+num,0);

  //用curry判断还有没有剩余参数
  function curry(...nextArgs){
    //闭包，递归的终止条件
    //如果没有剩余参数，输出结果
    if(nextArgs.length===0){return sum;}
    //如果有，则继续加
    return add(sum,...nextArgs);
  }

  return curry;
}

console.log(add(1)(2)(3)()); // 输出: 6
console.log(add(1, 2, 3)(4)()); // 输出: 10
console.log(add(1)(2)(3)(4)(5)()); // 输出: 15

promise.all

要点：

• promise里面不需要return，而是需要resolve和reject
• 如果在Promise.all中的Promise数组中有一个或多个Promise被拒绝（即失败），Promise.all返回的新的Promise会立即被拒绝，并且会传递第一个被拒绝的Promise的错误原因。

思路：for循环遍历所有的promises数组，所有的都成功则resolve，有一个失败则立即reject

function myPromiseAll(promises) {
  return new Promise((resolve, reject) => {
    if (!Array.isArray(promises)) {
      reject(new TypeError("参数必须是一个数组"));
    }
    let results = [];
    if (promises.length === 0) {
      resolve(results);
    }
    for (let promise of promises) {
      promise
        .then((res) => {
          results[results.length] = res;
          if (results.length === promises.length) {
            return resolve(results);
          }
        })
        .catch((error) => {
          reject(error);
        });
    }
  });
}

Promise.race

要点：
如果在 Promise.race 中的第一个 Promise 对象被拒绝（rejected），则整个 Promise.race 会立即拒绝（reject）并返回该拒绝的原因。后续的 Promise 对象不会再被执行。

function myPromiseRace(promises) {
  return new Promise((resolve, reject) => {
    if (!Array.isArray(promises)) {
      reject(new TypeError("argus must be a array"));
    }

    for (let promise of promises) {
      promise
        .then((result) => {
          resolve(result);
        })
        .catch((error) => {
          reject(error);
        });
    }
  });
}

数组扁平化

方法1：展开数组，层层剥开【推荐】

let arr = [1, [2, [3, 4, 5]]]

function flatten2(arr){
  while(arr.some((item)=>Array.isArray(item))){
    arr = [].concat(...arr)
  }
  return arr;
}

console.log(flatten2(arr));

方法2：判断当前项是否为数组 如果是数组递归调用 不是就push到新数组

function flatten(arr) {
  let newArr=[];

  for(let item of arr){
    if(Array.isArray(item)){
      newArr = newArr.concat(flatten(item))
    }else{
      newArr.push(item)
    }
  }
  return newArr;
}

数组去重

两种方法

function only1(arr){
  return arr.filter((value,index)=>{return arr.indexOf(value)===index})
}

其中，indexOf 方法会返回指定元素在数组中第一次出现的索引

function only(arr){
  return [...new Set(arr)]
}

实现reduce

array.reduce(callbackfn: (previousValue，currentValue, currentIndex， array), initialValue )

Array.prototype.myReduce = function(callback, initialValue){
  //判断参数是否正确
  if(typeof callback !=='function'){return new TypeError("callback must be a function")}
  let accumulator;

  //检查有没有设置初始值
  if(!initialValue){
    if(this.length===0){return new TypeError("can't reduce a empty array")}
    accumulator = this[0]
  }else{
    accumulator = initialValue
  }

  //循环调用callback
  for(let i = initialValue?0:1;i<this.length;i++){
    accumulator = callback(accumulator,this[i],i,this)
  }
  //返回结果值
  return accumulator;
}
console.log([1,2,3].myReduce((pre,cur)=>{return pre+cur},0));

实现push

Array.prototype.myPush = function(){
  for(let i=0;i<arguments.length;i++){
    this[this.length]=arguments[i]
  }
  return this.length;
}

数组转树

测试数据：