2024年前端最全10个常见的前端手写功能，你全都会吗？(2)，前端开发应该如何准备面试

❤️ 谢谢支持

喜欢的话别忘了 关注、点赞哦~。

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

const now = Date.now()

if (now - last > delay) {

last = now

fn.apply(this, args)

}

}

}

// 测试

function task() {

console.log(‘run task’)

}

const throttleTask = throttle(task, 1000)

window.addEventListener(‘scroll’, throttleTask)

3、深拷贝

function deepClone(obj, cache = new WeakMap()) {

if (typeof obj !== ‘object’) return obj // 普通类型，直接返回

if (obj === null) return obj

if (cache.get(obj)) return cache.get(obj) // 防止循环引用，程序进入死循环

if (obj instanceof Date) return new Date(obj)

if (obj instanceof RegExp) return new RegExp(obj)

// 找到所属原型上的constructor，所属原型上的constructor指向当前对象的构造函数

let cloneObj = new obj.constructor()

cache.set(obj, cloneObj) // 缓存拷贝的对象，用于处理循环引用的情况

for (let key in obj) {

if (obj.hasOwnProperty(key)) {

cloneObj[key] = deepClone(obj[key], cache) // 递归拷贝

}

}

return cloneObj

}

// 测试

const obj = { name: ‘Jack’, address: { x: 100, y: 200 } }

obj.a = obj // 循环引用

const newObj = deepClone(obj)

console.log(newObj.address === obj.address) // false

4、实现 Promise

class MyPromise {

constructor(executor) { // executor执行器

this.status = ‘pending’ // 等待状态

this.value = null // 成功或失败的参数

this.fulfilledCallbacks = [] // 成功的函数队列

this.rejectedCallbacks = [] // 失败的函数队列

const that = this

function resolve(value) { // 成功的方法

if (that.status === ‘pending’) {

that.status = ‘resolved’

that.value = value

that.fulfilledCallbacks.forEach(myFn => myFn(that.value)) //执行回调方法

}

}

function reject(value) { //失败的方法

if (that.status === ‘pending’) {

that.status = ‘rejected’

that.value = value

that.rejectedCallbacks.forEach(myFn => myFn(that.value)) //执行回调方法

}

}

try {

executor(resolve, reject)

} catch (err) {

reject(err)

}

}

then(onFulfilled, onRejected) {

if (this.status === ‘pending’) {

// 等待状态，添加回调函数到成功的函数队列

this.fulfilledCallbacks.push(() => {

onFulfilled(this.value)

})

// 等待状态，添加回调函数到失败的函数队列

this.rejectedCallbacks.push(() => {

onRejected(this.value)

})

}

if (this.status === ‘resolved’) { // 支持同步调用

console.log(‘this’, this)

onFulfilled(this.value)

}

if (this.status === ‘rejected’) { // 支持同步调用

onRejected(this.value)

}

}

}

// 测试

function fn() {

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

setTimeout(() => {

if(Math.random() > 0.6) {

resolve(1)

} else {

reject(2)

}

}, 1000)

})

}

fn().then(

res => {

console.log(‘res’, res) // res 1

},

err => {

console.log(‘err’, err) // err 2

})

5、异步控制并发数

function limitRequest(urls = [], limit = 5) {

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

const len = urls.length

let count = 0 // 当前进行到第几个任务

const start = async () => {

const url = urls.shift() // 从数组中拿取第一个任务

if (url) {

try {

await axios.post(url)

if (count == len - 1) {

// 最后一个任务

resolve()

} else {

count++

// 成功，启动下一个任务

start()

}

} catch (e) {

count++

// 失败，也启动下一个任务

start()

}

}

}

// 启动limit个任务

while (limit > 0) {

start()

limit -= 1

}

})

}

// 测试

limitRequest([‘http://xxa’, ‘http://xxb’, ‘http://xxc’, ‘http://xxd’, ‘http://xxe’])

6、ES5继承（寄生组合继承）

function Parent(name) {

this.name = name

}

Parent.prototype.eat = function () {

console.log(this.name + ’ is eating’)

}

function Child(name, age) {

Parent.call(this, name)

this.age = age

}

Child.prototype = Object.create(Parent.prototype)

Child.prototype.contructor = Child

Child.prototype.study = function () {

console.log(this.name + ’ is studying’)

}

// 测试

let child = new Child(‘xiaoming’, 16)

console.log(child.name) // xiaoming

child.eat() // xiaoming is eating

child.study() // xiaoming is studying

7、数组排序

sort 排序

// 对数字进行排序，简写

const arr = [3, 2, 4, 1, 5]

arr.sort((a, b) => a - b)

console.log(arr) // [1, 2, 3, 4, 5]

// 对字母进行排序，简写

const arr = [‘b’, ‘c’, ‘a’, ‘e’, ‘d’]

arr.sort()

console.log(arr) // [‘a’, ‘b’, ‘c’, ‘d’, ‘e’]

冒泡排序

function bubbleSort(arr) {

let len = arr.length

for (let i = 0; i < len - 1; i++) {

// 从第一个元素开始，比较相邻的两个元素，前者大就交换位置

for (let j = 0; j < len - 1 - i; j++) {

if (arr[j] > arr[j + 1]) {

let num = arr[j]

arr[j] = arr[j + 1]

arr[j + 1] = num

}

}

// 每次遍历结束，都能找到一个最大值，放在数组最后

}

return arr

}

//测试

console.log(bubbleSort([2, 3, 1, 5, 4])) // [1, 2, 3, 4, 5]

8、数组去重

最后

小编综合了阿里的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析

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

虽只说了一个公司的面试，但我们可以知道大厂关注的东西并举一反三，通过一个知识点延伸到另一个知识点，这是我们要掌握的学习方法，小伙伴们在这篇有学到的请评论点赞转发告诉小编哦，谢谢大家的支持！

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

虽只说了一个公司的面试，但我们可以知道大厂关注的东西并举一反三，通过一个知识点延伸到另一个知识点，这是我们要掌握的学习方法，小伙伴们在这篇有学到的请评论点赞转发告诉小编哦，谢谢大家的支持！