JS 手撕-经典面试题

卡尔 等级 390 1 1

引言

首先出这篇文章,一方面是为了记录巩固我所学的知识,明白面试的高频考点。不鼓励大家背题的,初衷是希望总结的一些面试题能帮助你查漏补缺,温故知新。这些题并不是全部,如果你还想看得更多,可以访问GitHub仓库,目前已经有552道大厂真题了,涵盖各类前端的真题,欢迎加入我们一起来讨论~

函数

call

  • 语法:fn.call(obj,...args)
  • 功能:执行fn,使this为obj,并将后面的n个参数传给fn
Function.prototype.myCall = function (obj, ...args) {
  if (obj == undefined || obj == null) {
    obj = globalThis
  }
  obj.fn = this
  let res = obj.fn(...args)
  delete obj.fn
  return res
}
value = 2

let foo = {
  value: 1,
}

let bar = function (name, age) {
  console.log(name, age, this.value)
}

bar.myCall(foo, 'HearLing', 18) //HearLing 18 1
bar.myCall(null, 'HearLing', 18) //HearLing 18 2 

apply

  • 语法:fn.apply(obj,arr)
  • 功能:执行fn,使this为obj,并arr数组中元素传给fn
Function.prototype.myAplly = function (obj, arr) {
  if (obj == undefined || obj == null) {
    obj = globalThis
  }
  obj.fn = this
  let res = obj.fn(...arr)
  delete obj.fn
  return res
}
value = 2

let foo = {
  value: 1,
}

let bar = function (name, age) {
  console.log(name, age, this.value)
}

bar.myAplly(foo, ['HearLing', 18]) //HearLing 18 1
bar.myAplly(null, ['HearLing', 18]) //HearLing 18 2 

bind

  • 语法:fn.bind(obj,...args)
  • 功能:返回一个新函数,给fn绑定this为obj,并制定参数为后面的n个参数
Function.prototype.myBind = function (obj, ...args) {
  let that = this
  let fn = function () {
    if (this instanceof fn) {
      return new that(...args)
    } else {
      return that.call(obj, ...args)
    }
  }
  return fn
}

value = 2

let foo = {
  value: 1,
}

let bar = function (name, age) {
  console.log(name, age, this.value)
}
let fn = bar.myBind(foo, 'HearLing', 18)
//fn() //HearLing 18 1
let a = new fn() //HearLing 18 undefined
console.log(a.__proto__)//bar {} 

区别call()/apply()/bind()

call(obj)/apply(obj)::调用函数, 指定函数中的this为第一个参数的值 bind(obj): 返回一个新的函数, 新函数内部会调用原来的函数, 且this为bind()指定的第一参数的值

节流

  • 理解:在函数多次频繁触发时,函数执行一次后,只有大于设定的执行周期后才会执行第二次
  • 场景:页面滚动(scroll)、DOM 元素的拖拽(mousemove)、抢购点击(click)、播放事件算进度信息
  • 功能:节流函数在设置的delay毫秒内最多执行一次(简单点说就是,我上个锁,不管你点了多少下,时间到了我才解锁)
function throttle(fn, delay) {
  let flag = true
  return (...args) => {
    if (!flag) return
    flag = false
    setTimeout(() => {
      fn.apply(this, args)
      flag = true
    }, delay)
  }
} 

防抖

  • 理解:在函数频繁触发是,在规定之间以内,只让最后一次生效
  • 场景:搜索框实时联想(keyup/input)、按钮点击太快,多次请求(登录、发短信)、窗口调整(resize)
  • 功能:防抖函数在被调用后,延迟delay毫秒后调用,没到delay时间,你又点了,清空计时器重新计时,直到真的等了delay这么多秒。
function debounce(fn, delay) {
  let timer = null
  return (...args) => {
    clearTimeout(timer)
    timer = setTimeout(() => {
      fn.apply(this, args)
    }, delay)
  }
} 

节流与防抖的区别

首先概念上的不同,解释一下什么是防抖节流;然后就是使用场景的不同; 经典区分图: JS 手撕-经典面试题

curry

function mycurry(fn, beforeRoundArg = []) {
  return function () {
    let args = [...beforeRoundArg, ...arguments]
    if (args.length < fn.length) {
      return mycurry.call(this, fn, args)
    } else {
      return fn.apply(this, args)
    }
  }
}

function sum(a, b, c) {
  return a + b + c
}

let sumFn = mycurry(sum)
console.log(sumFn(1)(2)(3))//6 

数组

数组去重

function unique(arr) {
  const res = []
  const obj = {}
  arr.foreach((item) => {
    if (obj[item] === undefined) {
      obj[item] = true
      res.push(item)
    }
  })
  return res
}
//其他方法
//Array.from(new Set(array))
//[...new Set(array)] 

数组扁平化

// 递归展开
function flattern1(arr) {
  let res = []
  arr.foreach((item) => {
    if (Array.isArray(item)) {
      res.push(...flattern1(item))
    } else {
      res.push(item)
    }
  })
  return res
} 

对象

new

function newInstance (Fn, ...args) {
  const obj = {}
  obj.__proto__ = Fn.prototype
  const result = Fn.call(obj, ...args)
  // 如果Fn返回的是一个对象类型, 那返回的就不再是obj, 而是Fn返回的对象否则返回obj
  return result instanceof Object ? result : obj
} 

instanceof

function instance_of(left, right) {
  let prototype = right.prototype
  while (true) {
    if (left === null) {
      return false
    } else if (left.__proto__ === prototype) {
      return true
    }
    left = left.__proto__
  }
}
let a = {}
console.log(instance_of(a, Object))//true 

对象数组拷贝

浅拷贝

// 浅拷贝的方法
//Object.assign(target,...arr)
// [...arr]
// Array.prototype.slice()
// Array.prototype.concate()

function cloneShallow(origin) {
  let target = {}
  for (let key in origin) {
    if (origin.hasOwnProperty(key)) {
      target[key] = origin[key]
    }
  }
  return target
}
let obj = {
  name: 'lala',
  skill: {
    js: 1,
    css: 2,
  },
}
let newobj = cloneShallow(obj)
newobj.name = 'zhl'
newobj.skill.js = 99
console.log(obj)//{ name: 'lala', skill: { js: 99, css: 2 } }
console.log(newobj)//{ name: 'zhl', skill: { js: 99, css: 2 } } 

深拷贝

// 浅拷贝的方法
//JSON.parse(JSON.stringify(obj))
function deepClone(source, hashMap = new WeakMap()) {
  let target = new source.constructor()
  if (source == undefined || typeof source !== 'object') return source
  if (source instanceof Date) return source(Date)
  if (source instanceof RegExp) return source(RegExp)
  hashMap.set(target, source)//解决循环引用
  for (let key in source) {
    if (source.hasOwnProperty(key)) {
      target[key] = deepClone(source[key], hashMap)
    }
  }
  return target
}

let obj = {//应该考虑更复杂的数据
  name: 'lala',
  skill: {
    js: 1,
    css: 2,
  },
}

let newobj = deepClone(obj)
newobj.skill.js = 100
console.log(obj)//{ name: 'lala', skill: { js: 1, css: 2 } }
console.log(newobj)//{ name: 'lala', skill: { js: 99, css: 2 } } 

最后的话

🚀🚀 更多基础知识总结可以⭐️关注我,后续会持续更新面试题总结~

⭐️⭐️ 最后祝各位正在准备秋招补招和春招的小伙伴面试顺利,收割offer,我们一起加油吧🤝!还有就是快春节了,提前祝你新年快乐❤ ❤

本文转自 https://juejin.cn/post/6925599792814882829,如有侵权,请联系删除。

收藏
评论区

相关推荐

web性能优化的15条实用技巧
javascript在浏览器中运行的性能,可以认为是开发者所面临的最严重的可用性问题。这个问题因为javascript的阻塞性而变得复杂,事实上,多数浏览器使用单一进程来处理用户界面和js脚本执行,所以同一时刻只能做一件事。js执行过程耗时越久,浏览器等待响应的时间越长。 加载和执行 1.提高加载性能 1.IE8,FF,3.5,Safari 4和
每天学点 JS 编码规范(2):Objects
(给前端大全加星标,提升前端技能) 英文:AirBnB,翻译:Kakaka Hou 为什么要在前端大全推送这个系列? 前段时间有读者通过我的个人微信,提议能不能推送一些编程规范的文章。我们以前关注过 Airbnb 在 GitHub 上开源的 JS 编程规范(现在有10万 star,可见受欢迎程度),但因为篇幅太长,一直没有推送过。现在化整为零,设立这
面试之手撕 JS 继承
提到JS继承,你首先想到的什么? 面试 继承方式 优缺点...,js继承作为曾经的苦主,我看了忘,忘了看,看了又忘,OMG,都0212年了面试官还不放过我。 ok
js 惰性载入函数( 能力检测 )
今天在做项目时,需要对地址栏参数做处理,于是便作了如下处理 javascript getUrlParam() { let params {}; const url window.location.href.replace(/\//g,'').replace(/\?/g,'&'); url.replace(/?&(^&)
几个常用js库,别再重复造轮子了
年底了,总结下今年用到的一些有意思的《js轮子》(只是大概列出些比较有意思的库,每个标题都是超链接,可点击自行查阅) 希望能对您有用! 如有意思的 轮子 可以在评论列出一起讨论下 color(https://links.jianshu.com/go?tohttps%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fco
JS 手撕-经典面试题
引言首先出这篇文章,一方面是为了记录巩固我所学的知识,明白面试的高频考点。不鼓励大家背题的,初衷是希望总结的一些面试题能帮助你查漏补缺,温故知新。这些题并不是全部,如果你还想看得更多,可以访问,目前已经有552道大厂真题了,涵盖各类前端的真题,欢迎加入我们一起来讨论~函数 call 语法:fn.call(obj,...args) 功
前端面试题自检 JS CSS 部分
JS类型 JavaScript的简单数据类型Number , String , Boolean , Undefined , Null , Symbol typeof 操作符的返回值 number string boolean undefined object function
js异步的5种样式
js异步的5种样式 1.定时器 2.AJAX 3.Promise 4.Generator 5.asyns和awite  1.定时器     setTimeout() : 延时器        可以传入三个分别是            1)code:必
js-Answers一
JavaScript的组成 JavaScript 由以下三部分组成: 1. ECMAScript(核心):JavaScript 语言基础 2. DOM(文档对象模型):规定了访问HTML和XML的接口 3. BOM(浏览器对象模型):提供了浏览器窗口之间进行交互的对象和方法 JS的基本数据类型和引用数据类型
「组件」返回顶部按钮
样式如图1:在components文件夹下新建BackTop.vue js<template <div class"backTopBtn" <a href"javascript:;" <div vif"btnFlag" class"btn" @click"backTop"TOP</div
js去除字符串
js去除字符串js<DOCTYPE html<html<head <title</title</head<body</body<script type"text/javascript" function delHtmlTag(str){   return str.replace(/<^/g,""); } var s
js删除表格中的某一行
点击表格中的内容,删除某一行正文js代码如下 function removeTd(obj) { obj.parentNode.parentNode.remove();}
只听说过CSS in JS,怎么还有JS in CSS?
CSS in JS是一种解决css问题想法的集合,而不是一个指定的库。从CSS in JS的字面意思可以看出,它是将css样式写在JavaScript文件中,而不需要独立出.css、.less之类的文件。将css放在js中使我们更方便的使用js的变量、模块化、treeshaking。还解决了css中的一些问题,譬如:更方便解决基于状态的样式,更容易追溯依赖关
React - Fiber原理
浏览器渲染 屏幕刷新率(FPS) 浏览器的正常绘制频率是60次/秒,小于这个值时,用户会感觉到卡顿 绘制一次的称为一帧,平均每帧16.6ms 帧 每个帧的开头包括样式计算、布局和绘制 js的执行是单线程,js引擎和页面渲染引擎都占用主线程,GUI渲染和Javascript执行两者是互斥的 如果某个js任务执行时间过长,浏览器会推迟渲染,每
从 生成器 到 promise+async
本文主要讲解js中关于生成器的相关概念和作用,以及到后面结合 promise 实现 es7中的 async 原理,你将学习到js中异步流程控制相关知识 1、认识生成器思考如下代码:javascript let x 1 function foo() x++ bar() console.log(x) // 3 function bar(