前端面试笔试题-高频

  • 前端面试笔试题-高频已关闭评论
  • 109 次浏览
  • A+
所属分类:Web前端
摘要

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

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

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 群