2024秋招大厂前端算法手撕101道

最新推荐文章于 2024-05-14 16:27:26 发布
VIP文章 最新推荐文章于 2024-05-14 16:27:26 发布
阅读量865 收藏 21
点赞数 18
分类专栏： 前端 文章标签： 前端 算法 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45210011/article/details/135070108
版权

2024秋招大厂前端算法手撕101道

1.手写Object.create

function myCreate(obj){
   
    function F(){
   }
    F.prototype=obj
    return new F()
}
var obj={
   x:10}
var newObj=myCreate(obj)
console.log(newObj.__proto__)

2.手写instanceof方法

function myInstanceof(left,right){
   
    if(typeof right!=='function'||!right.prototype)throw new Error('type error')
    if(Object(left)!==left)return false
    let proto=Object.getPrototypeOf(left)
    let prototype=right.prototype
    while(true){
   
        if(!proto)return false
        if(proto==prototype)return true
        proto=Object.getPrototypeOf(proto)
    }
}
console.log(myInstanceof({
   x:10},Object))

3.手写new操作符

function myNew(constructor,...args){
   
    let obj={
   }
    obj=Object.create(constructor.prototype)
    let res=constructor.apply(obj,args)
    return (typeof res=='object'||typeof res=='function')?res:obj
}
function Cat(name){
   
    this.name=name
}
Cat.prototype.call=function () {
    
    console.log(this.name+'call')
 }
var cat=myNew(Cat,'ljw')
cat.call()

4.手写防抖函数

function debounce(fn,delay){
   
    let timer=null
    let that=this
    let flag=true
    return function(...args){
   
        if(flag){
   
          fn.apply(that,args)
          flag=false
        }
        clearTimeout(timer)
        timer=setTimeout(()=>{
   
            fn.apply(that,args)
        },delay)
    }
}
function fn(i){
   
    console.log(i)
}
var f=debounce(fn,2000)
f(1)
f(2)
setTimeout(()=>{
   f(3)},2001)
f(4)

5.手写节流函数

function throttle(fn,delay){
   
    let pre=new Date()
    let that=this
    let flag=true
    return function(...args){
   
      if(flag){
   
        fn.apply(that,args)
        flag=false
      }
      let now=new Date()
      if(now-pre>=delay){
   
          fn.apply(that,args)
          pre=now
      }
    }
}
function fn(i){
   
    console.log(i)
}
var f=throttle(fn,2000)
f(1)
f(2)
setTimeout(()=>{
   f(3)},2000)
setTimeout(()=>{
   f(4)},5002)

6.手写类型判断函数

function mytype(target){
   
    target=Object.prototype.toString.call(target)
    return target.slice(8,-1)
}
console.log(mytype(8))

7.手写call 函数

Function.prototype.mycall=function(context,...args){
   
    let res=null
    context.fn=this
    res=context.fn(...args)
    delete context.fn
    return res
}
function f(a,b){
   
    let x=a+b
    console.log(this.x)
}
var obj={
   x:10}
f.mycall(obj,1,2)

8.手写apply函数

Function.prototype.myapply=function(context,args){
   
    let res=null
    context.fn=this
    context.fn(...args)
    delete context.fn
    return res
}
function f(a,b){
   
    let x=a+b
    console.log(this.x)
}
var obj={
   x:10}
f.myapply(obj,[1,2])

9.手写 bind函数

Function.prototype.mybind=function(context,...args){
   
    let fn=this
    return function F(...inArgs){
   
        if(this instanceof F){
   
            return fn.apply(this,args.concat(inArgs))
        }else{
   
            return fn.apply(context,args.concat(inArgs))
        }
    }
}
function f(a,b){
   
    this.c=a+b
    console.log(this)
}
var obj={
   x:10}
var newObj=f.mybind(obj,1)
new newObj(2)

10.继承

寄生组合

function Animal(name){
   
    this.name=name
}
Animal.prototype.eat=function(){
   
    console.log(this.name+'eat')
}
function Cat(name,age){
   
    Animal.call(this,name)
    this.age=age
}
Cat.prototype=Object.create(Animal.prototype)
Cat.prototype.constructor=Cat
var cat=new Cat('ljw',19)
cat.eat()

ES6 class

class Animal{
   
    constructor(name){
   
        this.name=name
    }
    eat(){
   
        console.log(this.name+'eat')
    }
}
class Cat extends Animal{
   
    constructor(name,age){
   
        super(name)
        this.age=age
    }
    eat(){
   
        super.eat()
        console.log('hh')
    }
}
var cat=new Cat('ljw',19)
cat.eat()

11.实现浅拷贝

function shallowCopy(target){
   
    let res=Array.isArray(target)?[]:{
   }
    for(let key in target){
   
        if(target.hasOwnProperty(key)){
   
            res[key]=target[key]
        }
    }
    return res
}
function shallowCopy(target){
   
    return {
   ...target}
}
function shallowCopy(target){
   
    return Object.assign({
   },target)
}
function shallowCopy(target){
   
    return [...target]
}
function shallowCopy(target){
   
    return target.slice()
}
function shallowCopy(target){
   
    return target.concat()
}
var target=[1,2,[2,3]]
var newTarget=shallowCopy(target)
newTarget[1]=1
newTarget[2][0]=1
console.log(target)
console.log(newTarget)

12.实现深拷贝

let map=new WeakMap()
function deepCopy(target){
   
    let res={
   }
    let tmp=map.get(target)
    if(tmp){
   
        return tmp
    }else{
   
        map.set(target,res)
    }
    for(let key in target){
   
        if(target.hasOwnProperty(key)){
   
            res[key]=typeof target[key]=='object'?deepCopy(target[key]):target[key]
        }
    }
    return res
}
function deepCopy(target){
   
    return JSON.parse(JSON.stringify(target))
}
var target={
   
    x:10,
    y:{
   
        z:2
    }
}
var newTarget=deepCopy(target)
newTarget.x=1
newTarget.y.z=1
console.log(target)
console.log(newTarget)
lodash
_.cloneDeep(target)

13.实现数组元素求和

function sum(arr){
   
    return arr.reduce((pre,cur)=>{
   return pre+cur})
}
var arr=[1,2,3,4,5]
console.log(sum(arr))

14.实现数组的扁平化

let arr=[1,2,[3,[4,5]]]
function flatten(arr){
   
    return arr.flat(Infinity)
}
function flatten(arr){
   
    return arr.toString().split(',').map(item=>Number(item))
}
function flatten(arr){
   
    let res=[]
    arr.map(item=>{
   
        if(Array.isArray(item)){
   
            res=res.concat(flatten(item))
        }
        res.push(item)
    })
    return res
}
function flatten(arr){
   
    while(arr.some(item=>Array.isArray(item))){
   
        arr=[].concat(...arr)
    }
    return arr
}
console.log(flatten(arr))

15.实现数组去重

var arr=[1,2,3,4,2,3,4,5]
function demany(arr){
   
    return [...new Set(arr)]
}
function demany(arr){
   
    let map={
   }
    let res=[]
    arr.map(item=>{
   
        if(!map[item]){
   
            map[item]=true
            res.push(item)
        }
    })
    return res
}
console.log(demany(arr))

16.promise实现方法

class MyPromise{
   
    constructor(fn){
   
        this.state='pending'
        this.res=undefined
        this.err=undefined
        this.onfullfilled=[]
        this.onrejected=[]
        let resolve=(res)=>{
   
            if(this.state=='pending'){
   
                this.state='fullfilled'
                this.res=res
                this.onfullfilled.map(item=>{
   
                    item(res)
                })
            }
        }
        let reject=(err)=>{
   
            if(this.state=='pending'){
   
                this.state='rejected'
                this.err=err
                this.onrejected.map(item=>{
   
                    item(err)
                })
            }
        }
        try{
   
            fn(resolve,reject)
        }catch(err){
   
            reject(err)
        }
    }
    then(fn1,fn2){
   
        if(this.state=='pending'){
   
            this.onfullfilled.push(fn1)
            this.onrejected.push(fn2)
        }
        if(this.state=='fullfilled'){
   
            fn1(this.res)
        }
        if(this.state=='rejected'){
   
            fn2(this.err)
        }
    }
}
fn=function(){
   
    setTimeout(()=>{
   
        return 1
    })
}
p1=new MyPromise((resolve,reject)=>{
   
    setTimeout(()=>{
   
        reject(1)
    })
})
p1.then((res)=>{
   
    console.log(res)
},(err)=>{
   
  console.error(err)
})

17.手写Promise.all

Promise.myall=function(data){
   
    return new Promise((resolve,reject)=>{
   
        if(!Array.isArray(data))throw new Error('type error')
        let result=[]
        let len=data.length
        let count=0
        for(let i=0;i<len;i++){
   
            Promise.resolve(data[i]).then((res)=>{
   
                result[i]=res
                count++
                if(count==len){
   
                    return resolve(result)
                }
            },(err)=>{
   
                return reject(err)
            })
        }
    })
}
p1=new Promise((resolve,reject)=>{
   
    setTimeout(()=>{
   
        resolve(1)
    },2000)
})
p2=new Promise((resolve,reject)=>{
   
    setTimeout(()=>{
   
        reject(2)
    })
})
p3=new Promise((resolve,reject)=>{
   
    setTimeout(()=>{
   
        resolve(3)
    },1000)
})
Promise.myall([p1,p3,4,p2])
.then((res)=>{
   
    console.log(res)
},(err)=>{
   
    console.error(err)
})

18.手写Promise.race

Promise.myrace=function(data){
   
    return new Promise((resolve,reject)=>{
   
        if(!Array.isArray(data))throw new Error('type error')
        let len=data.length
        for(let i=0;i<len;i++){
   
            Promise.resolve(data[i]).then((res)=>{
   
                resolve(res)
            },(err)=>{
   
                reject(err)
            })
        }
    })
}
p1=new Promise((resolve,reject)=>{
   
    setTimeout(()=>{
   
        resolve(1)
    },2000)
})
p2=new Promise((resolve,reject)=>{
   
    setTimeout(()=>{
   
        reject(2)
    })
})
p3=new Promise((resolve,reject)=>{
   
    setTimeout(()=>{
   
        resolve(3)
    },1000)
})
Promise.myrace([p1,p3])
.then((res)=>{
   
    console.log(res)
},(err)=>{
   
    console.error(err)
})
//处理请求超时
p1=new Promise((resolve,reject)=>{
   
    setTimeout(()=>{
   
        resolve(1)
    },2000)
})
p1=new Promise((resolve,reject)=>{
   
    setTimeout(()=>{
   
        reject('请求超时')
    },1000)
})
Promise.race([p1,p2])
.then((res)=>{
   
    console.log(res)
},(err)=>{
   
    console.error(err)
})

19.Promise.resolve

Promise.myresolve=function(res){
   
    return new Promise((resolve)=>{
   
        resolve(res)
    })
}
Promise.myresolve(1).then((res)=>{
   
    console.log(res)
})

20.Promise的顺序执行方法

function a(i){
   
    return i+1
}
function b(i){
   
    return i*2
}
function c(i){
   
    return i*3
}
//回调
function fn(str,cb){
   
    cb(str)
}
fn(a(1),(str)=>{
   
    fn(b(str),(str)=>{
   
        console.log(c(str))
    })
})
//promise
function queue(arr,init){
   
    let p=Promise.resolve(init)
    arr.map(item=>{
   
        p=p.then(item)
    })
    p.then((res)=>{
   
        console.log(res)
    })
}
queue([a,b,c],1)
//async await
async function helper(arr,init){
   
    let res=await arr[0](init)
    for(let i=1;i<arr.length;i++){
   
        res=await arr[i](res)
    }
    console.log(res)
  }
helper([a,b,c],1)

21.Promise实现并发限制

function control(stack,max,cb){
   
    if(stack.length==
最低0.47元/天 解锁文章
沐孜晴峥w.
关注
  • 18
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2023大厂前端面试精选-算法题（高频）
10-08
大厂精选
我是如何准备秋招互联网大厂后端学习的？
或左的博客
11-22 2152
写在前面 上周给师弟师妹们分享了我的秋招经验，总结了秋招中的一些问题，于是现在也把这些东西给发在博客上分享出来，毕竟之前也参考了很多其他人的经验，是时候回馈了。 本人末流双9硕，电子信息工程专业，java后端开发，非科班纯靠自学，秋招时刷题300+，基本无竞赛经历，无国奖，纯靠面评。秋招阶段拿了阿里、百度、字节的一些sp和ssp，还有一些其他的offer，就不赘述。整个秋招因为准备充分，基本非常顺利，结束的也非常早。 下面的内容是我从 为分享会做的ppt上复制过来的，为了省事，就不做过多的排版了。本文主观性
2024用友秋招岗位多免笔试早就是优势 #2024秋招
2301_79125642的博客
09-20 1795
民办二本，大数据专业，没有啥实习经历，也没啥能力，学到的东西还没有八卦知道的多，本来是要写简历明天要去校招碰碰的，结果不知道从何写起，一瞬间就迷茫了，当初只是听。腾讯，荣耀，华为，字节，百度，阿里国际，灵犀互娱，OPPO，vivo，中兴，深信服，cvte，4399，富途，科大讯飞 ，微众银行，唯品会，虎牙还有其他厂么？我简历上写了我会吗？在家呆了暑假，现在焦头烂额出来找工作，自知画的特别不行，但也非常想进漫画行业发展哪怕是从助手做起也行，但发过去了一些私下接单作品，HR看了一下都被拒绝了，真的现。
大厂技术面试中的手撕代码应该如何准备？
weixin_48157259的博客
10-07 2421
不管是秋招还是社招，互联网大厂的技术面试中的手撕代码这一部分总是绕不过去的一关。不只是后端开发和算法岗，现在就连前端、运维、测试、数据等岗位也要考手撕代码了。
2024年Web前端最新Vue中computed和watch的区别_watch computed，手撕面试官
2401_84617533的博客
05-05 279
秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】高级前端工程师必备资料包1、支持缓存。
前端面试资料2024年大厂进阶秘诀
04-22
前端面试资料2024年，大厂进阶秘诀，面试通过秘诀，这个年纪你怎么敢偷懒的？？快背起来！ 1.JavaScript面试真题-210页 2.CSS面试真题-127页 3.ES6面试真题-84页 4.Vue面试真题-237页 5.Vue3面试真题-44页 6.React...
238道大厂前端高频面试题.pdf
03-24
238道大厂前端高频面试题
华为OD、大厂笔试算法题
05-17
华为OD、大厂笔试算法题； 一共87题，每一题附答案（java语言），笔试时频繁出现的原题，想进大厂的小伙伴，欢迎下载； eg: 1、5键键盘的输出 有一个特殊的5键键盘，上面有a，ctrl-c，ctrl-x，ctrl-v，ctrl-a五个键...
picoCTF-Web Exploitation-Web Gauntlet
huckers的博客
05-12 463
按照提示，需要用admin登录，查看filter.php，这应该是一个SQL注入题，提示我们可以使用无痕浏览器来以便cookie可以不用每次清除。中展示了sql过滤逻辑，可以回味一下，尝试用不同的关键字来注入。提示sql过滤or，我们使用。
前端Vue架构
weixin_45678402的博客
05-12 294
defineProperty：监听范围比较窄，只能通过属性描述符去监听已有属性的读取和赋值；兼容性较差，只能兼容支持ES6 的浏览器（要求监听数据是对象）这样写的话，依赖收集只能收集到属性c；如果访问的属性值还是一个对象，对属性值再次进行代理；创建视图的函数（render）和数据之间的关联；当数据发生变化的时候，希望render重新执行；下面的用法，只能收集到c，收集不到c1。依赖收集：a color: #f00。依赖收集：a color: #f00。如何知晓数据对应的函数；监听数据的读取和修改；
前端面试题日常练-day05 【面试题】
qq_44640575的博客
05-11 386
解释：在CSS中，使用`.`作为类选择器，可以选择所有具有指定class名称的元素。例如，如果想选择所有class为"my-class"的元素，可以使用`.my-class`选择器来实现。这样的选择器可以为元素添加特定的样式或者在JavaScript中进行处理。
Unable to start ServletWebServerApplicationContext due to missing ServletWeb
s_sos0的博客
05-14 364
Unable to start ServletWebServerApplicationContext due to missing ServletWeb
根据地址栏url上key获取值
wwf1225的博客
05-10 264
/ 根据url上key获取值，key为参数名字，例如token。
前端页面 贴边拖拽 盒子
m0_46512929的博客
05-13 218
vue 悬浮球(带自动吸附功能)_vue悬浮球-CSDN博客
Java Web开篇
2403_82385265的博客
05-13 169
这是前端和后端组成的系统的框架结构。
JavaScript基础(六)
2401_82863547的博客
05-11 508
console.log('对折了'+i+'次，高度达到了'+paper+'超过了珠峰');当你不知道循环执行多少次，可以写个死循环，然后在循环体内判断，满足条件后break终止即可。依次输入三个弹窗，第一个输入数字，第二个输入运算符，第三个输入数字，然后给出结果。score = prompt('请输入第'+i+'局的成绩')var num2 = prompt('请输入运算符+-*/');但是，这种写法不好，用变量接收输出的写法是最好的，更好维护。或满足一边就行，用ΙΙ对不对，那同时满足用&&，复习一下。
vue3 el-date-picker设置禁用日期,只能选今天或者今天之后的日期
最新发布
Dnn01的博客
05-14 263
vue3 el-date-picker设置禁用日期,只能选今天或者今天之后的日期
【UniApp踩坑记录】在subNvue页面中使用Map，添加marker后不显示
Alan_Walker688的博客
05-11 1104
uniapp subNvue页面中使用 map 后发现 marker 不显示的问题及解决
2023年大厂前端面试题
08-25
很抱歉，我无法提供具体的2023年大厂前端面试题，因为我是一个在2021年开发的AI助手，并没有未来的信息。但是，我可以向您介绍一些常见的前端面试题，供您参考： 1. 介绍一下盒模型和盒模型的属性。 2. 如何实现...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值