面试题手撕篇

Stupid小池2024-03-16 22:03

参考博客

开始之前，理解递归

手写 浅拷贝

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

手写深拷贝

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

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

完整写法

js 复制代码 
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 关键字在构造函数内部访问和设置属性。


js 复制代码 
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

js 复制代码 
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 上的属性和方法。

js 复制代码 
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后触发。

js 复制代码 
    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);
            }
        };
    }

如果你想传参：

js 复制代码 
    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即可。

即节流第一次触发就要执行。

js 复制代码 
    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);
        }
      };
    };

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

主要思路：判断上次触发的时间和这次的时间

使用方法是这样的：

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

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

js 复制代码 
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函数：

js 复制代码 
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

js 复制代码 
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 对象不会再被执行。

js 复制代码 
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：展开数组，层层剥开【推荐】

js 复制代码 
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到新数组

js 复制代码 
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;
}

数组去重

两种方法

js 复制代码 
function only1(arr){
  return arr.filter((value,index)=>{return arr.indexOf(value)===index})
}

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

js 复制代码 
function only(arr){
  return [...new Set(arr)]
}

实现reduce

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

js 复制代码 
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

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

数组转树

测试数据：

js 复制代码 
let source = [
  {
    id: 1,
    pid: 0,
    name: 'body',
  },
  {
    id: 2,
    pid: 1,
    name: 'title',
  },
  {
    id: 3,
    pid: 2,
    name: 'div',
  },
  {
    id: 4,
    pid: 0,
    name: 'html',
  },
  {
    id: 5,
    pid: 4,
    name: 'div',
  },
  {
    id: 6,
    pid: 5,
    name: 'span',
  },
  {
    id: 7,
    pid: 5,
    name: 'img',
  },
][
  // 转为
  ({
    id: 1,
    pid: 0,
    name: 'body',
    children: [
      {
        id: 2,
        pid: 1,
        name: 'title',
        children: [{ id: 3, pid: 2, name: 'div' }],
      },
    ],
  },
  {
    id: 4,
    pid: 0,
    name: 'html',
    children: [
      {
        id: 5,
        pid: 4,
        name: 'div',
        children: [{ id: 7, pid: 5, name: 'img' }],
      },
    ],
  })
]

普通版本：

js 复制代码 
    function buildTree(arr, parentId) {
      let result = [];
      for (const item of arr) {
        if (item.pid === parentId) {
          item.children = buildTree(arr, item.id);
          result.push(item);
        }
      }
      return result;
    }

可以防止循环引用的版本：

js 复制代码 
    function buildTree(arr, pid = 0) {
      const nodeMap = new Map();
      const result = [];

      arr.forEach((item) => nodeMap.set(item.id, { ...item, children: [] }));

      for (const item of arr) {
        if (item.pid === pid) {
          const children = buildTree(arr, item.id);
          nodeMap.get(item.id).children = children;
          result.push(nodeMap.get(item.id));
        }
      }

      return result;
    }

树转数组

js 复制代码 
function TreeToArray(arr){
    let result = []
    for(let item of arr){
        if(item.children){
            result = result.concat(TreeToArray(item.children))
            delete item.children
            result.push(item)
        }else{
            result.push(item)
        }              
    }
    return result;
}

斐波那契数列的迭代和递归实现

js 复制代码 
    function fiber(n) {
      if (n >= 0) {
        if (n == 0) return 0;
        if (n == 1) return 1;
        return fiber(n - 1) + fiber(n - 2);
      }
    }
    function fiber2(n){
        let F=[]
        F[0]=0;
        F[1]=1;
        for(let i=2;i<=n;i++){
            F[i]=F[i-1]+F[i-2]
        }
        console.log(F);
        return F[n]
    }

实现每隔一秒打印 1,2,3,4

注意那个时间一定要写对！！1000*i

js 复制代码 
    for(let i=1;i<5;i++){
        setTimeout(()=>{
            console.log(i)
        },1000*i)
    }

使用 setTimeout 实现 setInterval

视频bilibili

这个问题的背景：
setInterval有时会失效，比如下面这个例子：

这样的话，每次调用这个回调之间的间隔就会超过1s，因为后面一个回调需要等待前面一个回调完成。

运行：

正常情况下：

不正常情况下：

//基础版

js 复制代码 
    function newInterval(fn, delay) {
        function inside(){
            fn()
            setTimeout(inside,delay);
        }
        inside();
    }

上面的代码有个缺点就是第一个 inside();执行的fn不会被放入任务队列，而是放入了执行栈，这与setinerval的行为不符，为了更加模拟，可以这样修改：

js 复制代码 
function newInterval(func, delay){
	function inside(){
		func()
		setTimeout(inside,delay)
	}
	setTimeout(inside,delay);
}

完整版：加上取消定时器的功能：

js 复制代码 
function newInterval(func,delay){
let timer;
	function inside(){
		func();
		timer = setTimeout(inside,delay)
	}
	timer = setTimeout(inside,delay)
	
	return{
		cancel:function(){
			clearTimeout(timer);	
		}
	}
}
相关推荐
morning_judger1 天前
【设计模式系列】原型模式（十一）
java·设计模式·原型模式
飞升不如收破烂~3 天前
在Spring框架中，容器管理的bean可以有不同的作用域（scope），其中最常用的两种是单例（singleton）和原型（prototype）。
spring·单例模式·原型模式
安泽13143 天前
【修订中】js 中apply call bind 用法
原型模式
Komorebi_99994 天前
JavaScript 判断数据类型有哪些方法？
开发语言·javascript·原型模式
无敌岩雀4 天前
C++设计模式创建型模式———原型模式
c++·设计模式·原型模式
一条晒干的咸魚4 天前
【Web前端】JavaScript 对象原型与继承机制
开发语言·前端·javascript·原型模式·web前端
shinelord明4 天前
【再谈设计模式】原型模式~复制的魔法师
开发语言·设计模式·原型模式
wrx繁星点点6 天前
解释器模式：有效处理语言的设计模式
java·开发语言·spring·servlet·设计模式·解释器模式·原型模式
wrx繁星点点8 天前
原型模式：高效的对象克隆解决方案
数据结构·spring·spring cloud·java-ee·maven·intellij-idea·原型模式
csdn小瓯9 天前
前端八股文第一篇
前端·原型模式
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解