社招前端必会面试题（附答案）

最新推荐文章于 2024-05-01 05:36:34 发布

loveX001

最新推荐文章于 2024-05-01 05:36:34 发布

阅读量745

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/loveX001/article/details/127507820

版权

本文详细介绍了前端面试中常见的箭头函数的this指向、数组去重、事件传播机制、IE兼容性问题、Promise处理、代码执行顺序等知识点，并通过实例解析了相关代码，帮助面试者深入理解前端开发的关键概念和技术应用。

摘要由CSDN通过智能技术生成

箭头函数的this指向哪⾥？

箭头函数不同于传统JavaScript中的函数，箭头函数并没有属于⾃⼰的this，它所谓的this是捕获其所在上下⽂的 this 值，作为⾃⼰的 this 值，并且由于没有属于⾃⼰的this，所以是不会被new调⽤的，这个所谓的this也不会被改变。

可以⽤Babel理解⼀下箭头函数:

// ES6 
const obj = {
    
  getArrow() {
    
    return () => {
    
      console.log(this === obj); 
    }; 
  } 
}

转化后：

// ES5，由 Babel 转译
var obj = {
    
   getArrow: function getArrow() {
    
     var _this = this; 
     return function () {
    
        console.log(_this === obj); 
     }; 
   } 
};

数组去重

ES5 实现：

function unique(arr) {
   
    var res = arr.filter(function(item, index, array) {
   
        return array.indexOf(item) === index
    })
    return res
}

ES6 实现：

var unique = arr => [...new Set(arr)]

事件传播机制（事件流）

冒泡和捕获

IE 兼容

attchEvent(‘on’ + type, handler)
detachEvent(‘on’ + type, handler)

代码输出结果

async function async1() {
   
  console.log("async1 start");
  await async2();
  console.log("async1 end");
}
async function async2() {
   
  console.log("async2");
}
async1();
console.log('start')

输出结果如下：

async1 start
async2
start
async1 end

代码的执行过程如下：

首先执行函数中的同步代码async1 start，之后遇到了await，它会阻塞async1后面代码的执行，因此会先去执行async2中的同步代码async2，然后跳出async1；
跳出async1函数后，执行同步代码start；
在一轮宏任务全部执行完之后，再来执行await后面的内容async1 end。

这里可以理解为await后面的语句相当于放到了new Promise中，下一行及之后的语句相当于放在Promise.then中。

代码输出结果

async function async1 () {
   
  console.log('async1 start');
  await new Promise(resolve => {
   
    console.log('promise1')
  })
  console.log('async1 success');
  return 'async1 end'
}
console.log('srcipt start')
async1().then(res => console.log(res))
console.log('srcipt end')

输出结果如下：

script start
async1 start
promise1
script end

这里需要注意的是在async1中await后面的Promise是没有返回值的，也就是它的状态始终是pending状态，所以在await之后的内容是不会执行的，包括async1后面的 .then。

代码输出结果

function runAsync(x) {
   
  const p = new Promise(r =>
    setTimeout(() => r(x, console.log(x)), 1000)
  );
  return p;
}
function runReject(x) {
   
  const p = new Promise((res, rej) =>
    setTimeout(() => rej(`Error: ${
     x}`, console.log(x)), 1000 * x)
  );
  return p;
}
Promise.race([runReject(0), runAsync(1)