前端经验:快速解决前端代码面试题(三)

开课吧开课吧科科2021-02-22 10:59

作为一名前端工程师,总是少不了面试找工作。很多人为面试头疼,曾经的我也是。在准备面试的过程中,我开始整理出了一些有用的笔记,这篇就是其中之一。既然已经写好了,不妨就放在这里分享给大家,希望大家都能顺利找到理想的工作。

我说一下我的建议,首先在面试中的写代码的过程,一定不能紧张,要沉住气慢慢来。只要不是系统自动检查结果,只要是面试官看着你写,就有很大的表现的机会,哪怕最后做不出来。

Web前端常见面试题

作为一个专业的程序员,除了工作中的编码,额外的无实际产出的练习(反复练习解决一个问题,反复默写同一段代码),也是必不可少的。

下文中几乎每一段代码,都是我反复优化后的结果,希望可以带给读者新的启发。我把代码大致分成了几个专题,一共包含了大致30个问题的解决方案,我今天来分享的是前端工作中经常遇到的功能函数实现、防抖节流、数据结构、设计模式。上一章分享的是字符串及排序和查找,感兴趣的可以点击“前端经验:快速解决前端代码面试题(二)”查阅。

功能函数实现

功能函数实现-setTimeout实现setInterval

function myInterval(fn,interval,...args) {

 let context=this

 setTimeout(()=>{

  fn.apply(context,args)

  myInterval(fn,interval,...args)//别忘了为它传入参数

 },interval)

}

myInterval((num)=>console.log(num),500,10)

功能函数实现-函数柯里化

function sum(...args1){

    return function (...args2) {

        return [...args1,...args2].reduce((p,n)=>p+n)

    }

}

console.log(sum(1, 2, 2)(7))

防抖 节流

实现了两个加工方法,返回一个加工后的防抖/节流函数

防抖

function debounce(fn,delay) {

 let timer=null

 return function (){

  if (timer) clearTimeout(timer)

  timer=setTimeout(()=>fn.call(...arguments),delay)//别忘了为它传入参数

 }

}

节流

function throttle(fn,delay) {

 let flag=true

 return function() {

  if (!flag) return

  flag=false

  setTimeout(()=>{

   fn(...arguments)//别忘了为它传入参数

   flag=true

  },delay)

 }

}

数据结构-单链表

function Node(element) {//结点类

 [this.element,this.next]=[element,null]

}

 

class LinkList {//链表类

 constructor() {

  this.length=0

  this.head=new Node()

  this.tail=new Node()

  this.head.next=this.tail

 }

 get_all() {

  let result=[]

  let now=this.head

  while (now.next!==this.tail) {

   now=now.next

   result.push(now.element)

  }

  return result

 }

 unshift(element) {//开头添加

  let node=new Node(element)

  node.next=this.head.next

  this.head.next=node

 }

 shift(){//开头删除

  let node=this.head.next

  this.head.next=this.head.next.next

  return node.element

 }

}

let list=new LinkList()

list.unshift(15)

list.unshift(16)

list.unshift(17)

console.log(list.shift())//17

console.log(list.get_all())//[ 16, 15 ]

设计模式-发布订阅模式

class Observer {

 constructor() {

  this.events={}//事件中心

 }

 publish(eventName,...args) {//发布=>调用事件中心中对应的函数

  if (this.events[eventName])

   this.events[eventName].forEach(cb=>cb.apply(this,args))

 }

 subscribe(eventName,callback) {//订阅=>向事件中心中添加事件

  if (this.events[eventName]) {

   this.events[eventName].push(callback)

  } else {

   this.events[eventName]=[callback]

  }

 }

 unSubscribe(eventName,callback) {//取消订阅

  if (events[eventName])

   events[eventName]=events[eventName].filter(cb=>cb!==callback)

 }

}

以上内容就是开课吧广场小编今天分享的“前端经验:快速解决前端代码面试题(三)”一文,希望为准备面试的朋友提供参考,顺利通过面试,找到理想工作。更多前端经验分享及前端面试题尽在开课吧广场Web前端面试题频道!

 

本文内容由开课吧前端团队提供。

上一篇: 精选web前端开发面试题下一篇:前端经验:快速解决前端代码面试题(二)

最新文章

文章图0

前端面试题:列举IE与finefox的不同之处

1)IE支持currentStyle;Firefox使用getComputStyle。 (2)IE使用innerText;Firefox使用textContent。 (3)在透明度滤镜方面,IE使用filter:alpha(opacity=num);Firefox使用-moz-o

2021-02-25 18:07:34

文章图1

前端面试题:null和undefined的区别是什么?

null是一个表示“无”的对象,转为数值时为0;undefined是一个表示“无”的原始值,转为数值时为NaN。

2021-02-24 17:44:25

文章图2

前端经验:快速解决前端代码面试题(五)

作为一名前端工程师,总是少不了面试找工作。很多人为前端面试头疼,曾经的我也是。在准备面试的过程中,我开始整理出了一些有用的笔记,这篇就是其中之一。

2021-02-23 10:36:20

文章图3

前端经验:快速解决前端代码面试题(四)

作为一名前端工程师,总是少不了面试找工作。很多人为前端面试头疼,曾经的我也是。在准备面试的过程中,我开始整理出了一些有用的笔记,这篇就是其中之一。

2021-02-23 10:20:44

文章图4

精选web前端开发面试题

1)通过以下代码创建新节点。 createDocumentFragment()//创建一个DOM片段 createElement()//创建一个具体的元素 createTextNode()//创建一个文本节点

2021-02-22 17:55:32