前端面试高频笔试题，前端面试要做到提前准备提前练习，刷一定的面试题笔试题量，面试才能事半功倍一路畅通。
1. 实现快速排序
var arr = [9, 4, 3, 1, 6, 3, 8, 7]
/**
* 快速排序
* @param {array} arr 需要排序的数组
* @returns {array}
*/
function quickSort (arr) {
if (arr.length <= 1) return arr
var arr1 = [], arr2 = []
for (var i = 1; i < arr.length; i++) {
if (arr[i] < arr[0]) {
arr1.push(arr[i])
} else {
arr2.push(arr[i])
}
}
arr1 = quickSort(arr1)
arr2 = quickSort(arr2)
arr1.push(arr[0])
return arr1.concat(arr2)
}
console.log(quickSort(arr)) // [1, 3, 3, 4, 6, 7, 8, 9]
步骤分析：
- 首先设定一个分界值，通过该分界值将数组分成左右两部分。
- 将大于或等于分界值的数据集中到数组右边，小于分界值的数据集中到数组的左边。此时，左边部分中各元素都小于分界值，而右边部分中各元素都大于或等于分界值。
- 然后，左边和右边的数据可以独立排序。对于左侧的数组数据，又可以取一个分界值，将该部分数据分成左右两部分，同样在左边放置较小值，右边放置较大值。右侧的数组数据也可以做类似处理。
- 重复上述过程，可以看出，这是一个递归定义。通过递归将左侧部分排好序后，再递归排好右侧部分的顺序。当左、右两个部分各数据排序完成后，整个数组的排序也就完成了。
2. 实现 add(1)(2,3)(4,5,6) 的调用方式
function add(...args) {
var f = add.bind(null, ...args)
f.sum = () => {
return args.reduce((a, b) => a + b, 0)
}
return f
}
console.log(add(1)(2,3)(4,5,6).sum()) // 21
步骤分析：
- 使用 bind 返回新函数以保证满足柯里化保留参数的特性
- 通过 reduce 进行值累加
3. 深拷贝
function clone (obj) {
if (obj === null || typeof obj !== 'object') return obj
// 处理数组和对象
if (obj instanceof Array || obj instanceof Object) {
var copy = obj instanceof Array ? [] : {}
for (let item in obj) {
copy[item] = clone(obj[item])
}
return copy
}
}
var data = {
a: 1,
b: [ 2, 3, 4 ],
c: {
d: 5
e: [ 6 ]
}
}
console.log(clone(data))
步骤分析：
- 判断 obj 是否是值类型，如何是值类型直接返回
- 如果 obj 是数组或者对象，新建空对象
- 通过循环获取到 obj 的值进行递归，结果赋给新建的空对象
- 该实现方式只实现了对象、值类型的拷贝，时间、方法等等可自行新增 if 进行创建赋值
4. 写出这段程序的输出内容
async function async1 () {
console.log('async1 start')
await async2()
console.log('async1 end')
}
async function async2 () {
console.log('async2')
}
console.log('script start')
setTimeout(function () {
console.log('setTimeout')
})
async1()
new Promise(function (resolve) {
console.log('promise1')
resolve()
}).then(function () {
console.log('promsise2')
})
console.log('script end')
输出结果：
script start
async1 start
async2
promise1
script end
async1 end
promsise2
setTimeout
步骤分析：
- 首先，事件循环从宏任务（macrostack）队列开始，这个时候，宏任务 (整体 script、setTimeout、setInterval) 队列中，只有一个 script (整体代码)任务 ()。
- 首先执行 console.log('script start')，输出 'script start'
- 遇到 setTimeout 把 console.log('setTimeout') 放到 macrotask 队列中
- 执行 aync1() 输出 'async1 start' 和 'async2' ,把 console.log('async1 end') 放到 micro 队列中
- 执行到 promise ，输出 'promise1' ，把 console.log('promise2') 放到 micro 队列中
- 执行 console.log('script end')，输出 'script end'
- macrotask 执行完成会执行 microtask ，把 microtask quene 里面的 microtask 全部拿出来一次性执行完，所以会输出 'async1 end' 和 'promise2'
- 开始新一轮的事件循环，去除执行一个 macrotask 执行，所以会输出 'setTimeout'