10个常见的前端手写功能，你全都会吗？(1)

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、数组去重

Set 去重

cosnt newArr = […new Set(arr)]

Array.from 去重

const newArr = Array.from(new Set(arr))

indexOf 去重

function resetArr(arr) {

let res = []

arr.forEach(item => {

if (res.indexOf(item) === -1) {

res.push(item)

}

})

return res

}

// 测试

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

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

9、获取 url 参数

URLSearchParams 方法

// 创建一个URLSearchParams实例

const urlSearchParams = new URLSearchParams(window.location.search);

// 把键值对列表转换为一个对象

const params = Object.fromEntries(urlSearchParams.entries());

split 方法

结束

一次完整的面试流程就是这样啦，小编综合了腾讯的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析，分享给小伙伴们，有没有需要的小伙伴们都去领取！

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