2024年Web前端最新2024 前端JavaScript高频手写面试题大全，助你查漏补缺(2)，面试总结和面试感想800字

最新推荐文章于 2024-05-14 16:48:45 发布

2401_84433570

最新推荐文章于 2024-05-14 16:48:45 发布

阅读量1k

点赞数 18

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84433570/article/details/138721184

版权

程序员专栏收录该内容

179 篇文章 0 订阅

订阅专栏

Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？
…

算法

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

冒泡排序
选择排序
快速排序
二叉树查找: 最大值、最小值、固定值
二叉树遍历
二叉树的最大深度
给予链表中的任一节点，把它删除掉
链表倒叙
如何判断一个单链表有环
给定一个有序数组，找出两个数相加为一个目标数
…

由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！有需要的程序猿（媛）可以帮忙点赞+评论666

_fn(1, _, , 4)(, 3)(2)(5); // print: 1,2,3,4,5

fn(, 2)(_, _, 4)(1)(3)(5); // print: 1,2,3,4,5

至此，我们已经完整实现了一个 curry 函数~~

7. 实现深拷贝

浅拷贝和深拷贝的区别：

浅拷贝：只拷贝一层，更深层的对象级别的只拷贝引用

深拷贝：拷贝多层，每一级别的数据都会拷贝。这样更改拷贝值就不影响另外的对象

ES6浅拷贝方法：Object.assign(target,…sources)

let obj={

id:1,

name:‘Tom’,

msg:{

age:18

}

let o={}

//实现深拷贝递归可以用于生命游戏那个题对二维数组的拷贝，

//但比较麻烦，因为已知元素都是值，直接复制就行，无需判断

function deepCopy(newObj,oldObj){

for(var k in oldObj){

let item=oldObj[k]

//判断是数组？对象？简单类型？

if(item instanceof Array){

newObj[k]=[]

deepCopy(newObj[k],item)

}else if(item instanceof Object){

newObj[k]={}

deepCopy(newObj[k],item)

}else{ //简单数据类型，直接赋值

newObj[k]=item

}

8. 手写call, apply, bind

手写call

Function.prototype.myCall=function(context=window){ // 函数的方法，所以写在Fuction原型对象上

if(typeof this !==“function”){ // 这里if其实没必要，会自动抛出错误

throw new Error(“不是函数”)

}

const obj=context||window //这里可用ES6方法，为参数添加默认值，js严格模式全局作用域this为undefined

obj.fn=this //this为调用的上下文,this此处为函数，将这个函数作为obj的方法

const arg=[…arguments].slice(1) //第一个为obj所以删除,伪数组转为数组

res=obj.fn(…arg)

delete obj.fn // 不删除会导致context属性越来越多

return res

}

//用法：f.call(obj,arg1)

function f(a,b){

console.log(a+b)

console.log(this.name)

}

let obj={

name:1

}

f.myCall(obj,1,2) //否则this指向window

obj.greet.call({name: ‘Spike’}) //打出来的是 Spike

手写apply(arguments[this, [参数1，参数2…] ])

Function.prototype.myApply=function(context){ // 箭头函数从不具有参数对象！！！！！这里不能写成箭头函数

let obj=context||window

obj.fn=this

const arg=arguments[1]||[] //若有参数，得到的是数组

let res=obj.fn(…arg)

delete obj.fn

return res

}

function f(a,b){

console.log(a,b)

console.log(this.name)

}

let obj={

name:‘张三’

}

f.myApply(obj,[1,2]) //arguments[1]

手写bind

this.value = 2

var foo = {

value: 1

};

var bar = function(name, age, school){

console.log(name) // ‘An’

console.log(age) // 22

console.log(school) // ‘家里蹲大学’

}

var result = bar.bind(foo, ‘An’) //预置了部分参数’An’

result(22, ‘家里蹲大学’) //这个参数会和预置的参数合并到一起放入bar中

简单版本

Function.prototype.bind = function(context, …outerArgs) {

var fn = this;

return function(…innerArgs) { //返回了一个函数，…rest为实际调用时传入的参数

return fn.apply(context,[…outerArgs, …innerArgs]); //返回改变了this的函数，

//参数合并

}

new失败的原因：

例：

// 声明一个上下文

let thovino = {

name: ‘thovino’

}

// 声明一个构造函数

let eat = function (food) {

this.food = food

console.log(${this.name} eat ${this.food})

}

eat.prototype.sayFuncName = function () {

console.log(‘func name : eat’)

}

// bind一下

let thovinoEat = eat.bind(thovino)

let instance = new thovinoEat(‘orange’) //实际上orange放到了thovino里面

console.log(‘instance:’, instance) // {}

生成的实例是个空对象

在new操作符执行时，我们的thovinoEat函数可以看作是这样：

function thovinoEat (…innerArgs) {

eat.call(thovino, …outerArgs, …innerArgs)

}

在new操作符进行到第三步的操作thovinoEat.call(obj, ...args)时，这里的obj是new操作符自己创建的那个简单空对象{}，但它其实并没有替换掉thovinoEat函数内部的那个上下文对象thovino。这已经超出了call的能力范围，因为这个时候要替换的已经不是thovinoEat函数内部的this指向，而应该是thovino对象。

换句话说，我们希望的是new操作符将eat内的this指向操作符自己创建的那个空对象。但是实际上指向了thovino，new操作符的第三步动作并没有成功！

可new可继承版本

Function.prototype.bind = function (context, …outerArgs) {

let that = this;

function res (…innerArgs) {

if (this instanceof res) {

// new操作符执行时

// 这里的this在new操作符第三步操作时，会指向new自身创建的那个简单空对象{}

that.call(this, …outerArgs, …innerArgs)

} else {

// 普通bind

that.call(context, …outerArgs, …innerArgs)

}

res.prototype = this.prototype //！！！

return res

}

9. 手动实现new

new的过程文字描述：

创建一个空对象 obj;
将空对象的隐式原型（proto）指向构造函数的prototype。
使用 call 改变 this 的指向
如果无返回值或者返回一个非对象值，则将 obj 返回作为新对象；如果返回值是一个新对象的话那么直接直接返回该对象。

function Person(name,age){

this.name=name

this.age=age

}

Person.prototype.sayHi=function(){

console.log(‘Hi！我是’+this.name)

}

let p1=new Person(‘张三’,18)

手动实现new

function create(){

let obj={}

//获取构造函数

let fn=[].shift.call(arguments) //将arguments对象提出来转化为数组，arguments并不是数组而是对象！！！这种方法删除了arguments数组的第一个元素，！！这里的空数组里面填不填元素都没关系，不影响arguments的结果或者let arg = [].slice.call(arguments,1)

obj.proto=fn.prototype

let res=fn.apply(obj,arguments) //改变this指向，为实例添加方法和属性

//确保返回的是一个对象(万一fn不是构造函数)

return typeof res===‘object’?res:obj

}

let p2=create(Person,‘李四’,19)

p2.sayHi()

细节：

[].shift.call(arguments) 也可写成：

let arg=[…arguments]

let fn=arg.shift() //使得arguments能调用数组方法,第一个参数为构造函数

obj.proto=fn.prototype

//改变this指向，为实例添加方法和属性

let res=fn.apply(obj,arg)

10. 手写promise(常见promise.all, promise.race)

// Promise/A+ 规范规定的三种状态

const STATUS = {

PENDING: ‘pending’,

FULFILLED: ‘fulfilled’,

REJECTED: ‘rejected’

}

class MyPromise {

// 构造函数接收一个执行回调

constructor(executor) {

this._status = STATUS.PENDING // Promise初始状态

this._value = undefined // then回调的值

this._resolveQueue = [] // resolve时触发的成功队列

this._rejectQueue = [] // reject时触发的失败队列

// 使用箭头函数固定this（resolve函数在executor中触发，不然找不到this）

const resolve = value => {

const run = () => {

// Promise/A+ 规范规定的Promise状态只能从pending触发，变成fulfilled

if (this._status === STATUS.PENDING) {

this._status = STATUS.FULFILLED // 更改状态

this._value = value // 储存当前值，用于then回调

// 执行resolve回调

while (this._resolveQueue.length) {

const callback = this._resolveQueue.shift()

callback(value)

}

//把resolve执行回调的操作封装成一个函数,放进setTimeout里,以实现promise异步调用的特性（规范上是微任务，这里是宏任务）

setTimeout(run)

}

// 同 resolve

const reject = value => {

const run = () => {

if (this._status === STATUS.PENDING) {

this._status = STATUS.REJECTED

this._value = value

while (this._rejectQueue.length) {

const callback = this._rejectQueue.shift()

callback(value)

}

setTimeout(run)

}

// new Promise()时立即执行executor,并传入resolve和reject

executor(resolve, reject)

}

// then方法,接收一个成功的回调和一个失败的回调

function then(onFulfilled, onRejected) {

// 根据规范，如果then的参数不是function，则忽略它, 让值继续往下传递，链式调用继续往下执行

typeof onFulfilled !== ‘function’ ? onFulfilled = value => value : null

typeof onRejected !== ‘function’ ? onRejected = error => error : null

// then 返回一个新的promise

return new MyPromise((resolve, reject) => {

const resolveFn = value => {

try {

const x = onFulfilled(value)

// 分类讨论返回值,如果是Promise,那么等待Promise状态变更,否则直接resolve

x instanceof MyPromise ? x.then(resolve, reject) : resolve(x)

} catch (error) {

reject(error)

}

const rejectFn = error => {

try {

const x = onRejected(error)

x instanceof MyPromise ? x.then(resolve, reject) : resolve(x)

} catch (error) {

reject(error)

}

switch (this._status) {

case STATUS.PENDING:

this._resolveQueue.push(resolveFn)

this._rejectQueue.push(rejectFn)

break;

case STATUS.FULFILLED:

resolveFn(this._value)

break;

case STATUS.REJECTED:

rejectFn(this._value)

break;

}

})

}

catch (rejectFn) {

return this.then(undefined, rejectFn)

}

// promise.finally方法

finally(callback) {

return this.then(value => MyPromise.resolve(callback()).then(() => value), error => {

MyPromise.resolve(callback()).then(() => error)

})

}

// 静态resolve方法

static resolve(value) {

return value instanceof MyPromise ? value : new MyPromise(resolve => resolve(value))

}

// 静态reject方法

static reject(error) {

return new MyPromise((resolve, reject) => reject(error))

}

// 静态all方法

static all(promiseArr) {

let count = 0

let result = []

return new MyPromise((resolve, reject) => {

if (!promiseArr.length) {

return resolve(result)

}

promiseArr.forEach((p, i) => {

MyPromise.resolve§.then(value => {

count++

result[i] = value

if (count === promiseArr.length) {

resolve(result)

}

}, error => {

reject(error)

})

}

// 静态race方法

static race(promiseArr) {

return new MyPromise((resolve, reject) => {

promiseArr.forEach(p => {

MyPromise.resolve§.then(value => {

resolve(value)

}, error => {

reject(error)

})

}

11. 手写原生AJAX

步骤

创建 XMLHttpRequest 实例
发出 HTTP 请求
服务器返回 XML 格式的字符串
JS 解析 XML，并更新局部页面不过随着历史进程的推进，XML 已经被淘汰，取而代之的是 JSON。

了解了属性和方法之后，根据 AJAX 的步骤，手写最简单的 GET 请求。

version 1.0：

myButton.addEventListener(‘click’, function () {

ajax()

})

function ajax() {

let xhr = new XMLHttpRequest() //实例化，以调用方法

xhr.open(‘get’, ‘https://www.google.com’) //参数2，url。参数三：异步

xhr.onreadystatechange = () => { //每当 readyState 属性改变时，就会调用该函数。

if (xhr.readyState === 4) { //XMLHttpRequest 代理当前所处状态。

if (xhr.status >= 200 && xhr.status < 300) { //200-300请求成功

let string = request.responseText

//JSON.parse() 方法用来解析JSON字符串，构造由字符串描述的JavaScript值或对象

let object = JSON.parse(string)

}

request.send() //用于实际发出 HTTP 请求。不带参数为GET请求

}

promise实现

function ajax(url) {

const p = new Promise((resolve, reject) => {

let xhr = new XMLHttpRequest()

xhr.open(‘get’, url)

xhr.onreadystatechange = () => {

if (xhr.readyState == 4) {

if (xhr.status >= 200 && xhr.status <= 300) {

resolve(JSON.parse(xhr.responseText))

} else {

reject(‘请求出错’)

}

xhr.send() //发送hppt请求

})

return p

}

let url = ‘/data.json’

ajax(url).then(res => console.log(res))

.catch(reason => console.log(reason))

介绍一款面试题库小程序手机刷题更方便 MST题宝库

12. 手写节流防抖函数

函数节流与函数防抖都是为了限制函数的执行频次，是一种性能优化的方案，比如应用于window对象的resize、scroll事件，拖拽时的mousemove事件，文字输入、自动完成的keyup事件。

节流：连续触发事件但是在 n 秒中只执行一次函数

例:（连续不断动都需要调用时用，设一时间间隔），像dom的拖拽，如果用消抖的话，就会出现卡顿的感觉，因为只在停止的时候执行了一次，这个时候就应该用节流，在一定时间内多次执行，会流畅很多。

防抖：指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

例:（连续不断触发时不调用，触发完后过一段时间调用），像仿百度搜索，就应该用防抖，当我连续不断输入时，不会发送请求；当我一段时间内不输入了，才会发送一次请求；如果小于这段时间继续输入的话，时间会重新计算，也不会发送请求。

防抖的实现：

function debounce(fn, delay) {

if(typeof fn!==‘function’) {

throw new TypeError(‘fn不是函数’)

}

let timer; // 维护一个 timer

return function () {

var _this = this; // 取debounce执行作用域的this(原函数挂载到的对象)

var args = arguments;

if (timer) {

clearTimeout(timer);

}

timer = setTimeout(function () {

fn.apply(_this, args); // 用apply指向调用debounce的对象，相当于_this.fn(args);

}, delay);

};

}

// 调用

input1.addEventListener(‘keyup’, debounce(() => {

console.log(input1.value)

}), 600)

节流的实现：

function throttle(fn, delay) {

let timer;

return function () {

var _this = this;

var args = arguments;

if (timer) {

return;

}

timer = setTimeout(function () {

fn.apply(_this, args); // 这里args接收的是外边返回的函数的参数，不能用arguments

// fn.apply(_this, arguments); 需要注意：Chrome 14 以及 Internet Explorer 9 仍然不接受类数组对象。如果传入类数组对象，它们会抛出异常。

timer = null; // 在delay后执行完fn之后清空timer，此时timer为假，throttle触发可以进入计时器

}, delay)

}

div1.addEventListener(‘drag’, throttle((e) => {

console.log(e.offsetX, e.offsetY)

}, 100))

13. 手写Promise加载图片

function getData(url) {

return new Promise((resolve, reject) => {

$.ajax({

url,

success(data) {

resolve(data)

error(err) {

reject(err)

}

})

}

const url1 = ‘./data1.json’

const url2 = ‘./data2.json’

const url3 = ‘./data3.json’

getData(url1).then(data1 => {

console.log(data1)

return getData(url2)

}).then(data2 => {

console.log(data2)

return getData(url3)

}).then(data3 =>

console.log(data3)

).catch(err =>

console.error(err)

)

最后

推荐一些系统学习的途径和方法。

路线图

每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

HTML 和 CSS：

html5知识

css基础知识

ener(‘drag’, throttle((e) => {

console.log(e.offsetX, e.offsetY)

}, 100))

13. 手写Promise加载图片

function getData(url) {

return new Promise((resolve, reject) => {

$.ajax({

url,

success(data) {

resolve(data)

error(err) {

reject(err)

}

})

}

const url1 = ‘./data1.json’

const url2 = ‘./data2.json’

const url3 = ‘./data3.json’

getData(url1).then(data1 => {

console.log(data1)

return getData(url2)

}).then(data2 => {

console.log(data2)

return getData(url3)

}).then(data3 =>

console.log(data3)

).catch(err =>

console.error(err)

)

最后

推荐一些系统学习的途径和方法。

路线图

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

HTML 和 CSS：

html5知识

css基础知识

2401_84433570

关注

18
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
2024年Web前端最新2024 前端JavaScript高频手写面试题大全，助你查漏补缺(2)，面试总结和面试感想800字

推荐一些系统学习的途径和方法。每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】HTML 和 CSS：}, 100))推荐一些系统学习的途径和方法。每个Web开发人员必备，很权威很齐全的Web开发文档。
复制链接

扫一扫