前端面试题2020及答案 知乎（前端面试笔试题-高频）

前端面试高频笔试题，前端面试要做到提前准备提前练习，刷一定的面试题笔试题量，面试才能事半功倍一路畅通。

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 微信交流群：前端攻城狮 3 群