2022 前端一场面试及答案整理

简介: 2022 前端一场面试及答案整理

开头热场问题

1. 说一下工作中解决过比较困难的问题 或 说一下自己项目中比较有亮点的地方

考察目的:面试官主要看一下我们解决问题的能力


  解答:这个问题 主要是靠大家的工作积累,平时工作过程中可以养成一个良好的习惯,无论做什么需求的时候,都花点时间去记录一下,这样积累无论是一年,还是两年,或者五年都会积累很多也无需求,然后自己梳理一下,在面试的时候反馈给面试官,让面试官虎躯一震,offer马上到手~~~

2. 你了解浏览器的事件循环吗?

考察目的:以此问题作为一个突破口,深度挖掘你对整个概念的了解

2.1 为什么 js 在浏览器中有事件循环的机制?

解答

              ① JS 是单线程的

              ② event loop

2.2 你了解事件循环当中的两种任务吗?

解答

               ① 宏任务:整体代码块、setTimeOut、setInterval、I/O操作

               ② 微任务:new Promise().then()、mutationObserver(前端的回溯)

2.3 为什么要引入微任务的概念,只有宏任务可以吗?

解答

       宏任务:先进先出的原则

在 JS 的执行过程中 或者说在页面的渲染过程中,宏任务是按照先进先出的原则执行,我们并不能准确的控制 这些任务被推进任务队列里,但是我们这个时候如果出来一个非常高优先级的任务,这个时候该怎么办?如果我们只有宏任务,再往任务队列里面推一个,秉承着先进先出的原则,那么它肯定是最后一个执行的,所以要引入微任务;


了解到宏任务与微任务过后,我们来学习宏任务与微任务的执行顺序。        


代码开始执行,创建一个全局调用栈,script作为宏任务执行

执行过程过同步任务立即执行,异步任务根据异步任务类型分别注册到微任务队列和宏任务队列

同步任务执行完毕,查看任务队列

若存在微任务,将微任务队列全部执行(包括执行微任务过程中产生的新微任务)

若无微任务,查看宏任务队列,执行第一个宏任务,宏任务执行完毕,查看微任务队列,重复上述操作,直至宏任务队列为空

2.4 你了解 Node.js 的事件循环吗?Node中的事件循环和浏览器的事件循环有什么区别?

 解答:


           Node宏任务的执行顺序:


               ① timers定时器:执行已经安排过的,setTimeout 和 setInterval 的回调函数;


               ②pending callback 待定回调:执行延迟到下一个循环迭代的I/O回调;


               ③idle,prepare:仅系统内部使用;


               ④poll:检索新的I/O事件,执行与I/O相关的回调


               ⑤check:执行setImmediate() 回调函数


               ⑥close callback:socket.on('close', (  )=>{  })


         微任务和宏任务在node的执行顺序:


       首先大家要明白,Node中微任务和宏任务的执行顺序是和 node 的版本有关系的

       Node V10 之前:

                ① 执行完上述一个阶段中的所有任务

                ② 执行 nextTick 队列里面的内容

                ③ 执行完微任务队列的内容

       Node V10 之后:

               和浏览器的行为统一了

2.5 这个时候理论问了这么多了,开始实践1

async function async1() {
  console.log("async1 start");
  await async2();
  console.log("async1 end");
}
async function async2() {
  console.log("async2");
}
console.log("script start");
setTimeout(() => {
  console.log("setTimeout");
}, 0);
async1();
new Promise((resolve) => {
  console.log("promise1");
  resolve();
}).then(() => {
  console.log("promise2");
});
console.log("script end");
// 1. script start
// 2. async1 start
// 3. async2
// 4. promise1
// 5. script end
// 6. async1 end
// 7. promise2
// 8. setTimeout

2.6 实践2

这个就比较有难度了,如果真的不会,千万不要张嘴就来一句:“我不会”,这个时候我作为面试官的时候心里就在想:“我屮艸芔茻,这好尴尬”!娱乐一下开个玩笑,这个时候要尝试着说出自己的思路,即使是错的,你也要让面试官看到你的 进取、钻研精神!

console.log("start");
setTimeout(() => {
  console.log("children2");
  Promise.resolve().then(() => {
    console.log("children3");
  });
}, 0);
new Promise((resolve, reject) => {
  console.log("children4");
  setTimeout(() => {
    console.log("children5");
    resolve("children6"); // 此处大坑
  }, 0);
}).then((res) => {
  console.log("children7");
  setTimeout(() => {
    console.log(res);
  }, 0);
});
// 1. start
// 2. children4
/** 第一轮宏任务执行结束,尝试清空微任务队列,发现没有微任务,尝试执行下一轮宏任务   */
// 3. children2
/** 第二轮宏任务执行结束,尝试清空微任务队列,   */
// 4. children3
// 5. children5
/** 第三轮宏任务执行结束,尝试清空微任务队列,   */
// 6. children7
// 7. children6

2.7 实践3

到这一步,大家心里是不是在想:“面试官怎么抓着 事件循环不放了”,最后一道题

const p = () => {
  return new Promise((resolve, reject) => {
    const p1 = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(1); // 这里 不会再输出了,因为 resolve(2) 已经把结果输出
      }, 0);
      resolve(2);
    });
    p1.then((res) => {
      console.log(res);
    });
    console.log(3);
    resolve(4);
  });
};
p().then((res) => {
  console.log(res);
});
console.log("end");
// 1. 3
// 2. end
// 3. 2
// 4. 4

 到此为止,事件循环结束!

3. 事件的捕获和冒泡机制你了解多少?

3.1 基本概念

以HTML为例:↓

 捕获:从window →  parent  →  child  →  son 到目标元素以后,转为冒泡

 冒泡:目标元素 son  →  child  →  parent  → window

3.2  window.addEventListener 监听的是什么阶段的事件?        

// 冒泡阶段
window.addEventListener("click", () => {
}); // 第三个参数默认为 false,为false 时,监听的为冒泡阶段
// 捕获阶段
window.addEventListener("click", () => {
}, true);

3.3 平常有哪些场景用到了这些机制?

3.3.1. 事件委托

    <ul id="ul">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
    </ul>
    const ul = document.querySelector("ul");
    ul.addEventListener("click", (e) => {
      const target = e.target;
      if (target.tagName.toLowerCase() === "li") {
        const liList = document.querySelectorAll("li");
        //  这里之所以会这么写,是因为 liList 并非是一个真正的 Array
        // 此时返回的是一个 nodeList,如果想使用 数组的 方法,需要改变this
        const index = Array.prototype.indexOf.call(liList, target);
        console.log(`内容:${target.innerHTML},索引:${index}`);
      }
    });

3.3.2  场景设计题

 一个历史页面,上面有若干按钮的点击逻辑,每个按钮都有自己的 click 事件

       新需求来了:给每一个访问的用户添加了一个属性,如果 banned = true,此用户点击页面上的任何按钮或元素,都不可响应原来的函数。而是直接 alert 提示,你被封禁了。

       实现:采用 事件捕获 机制完成(当然实现的思路有三种,甚至更多,这里只说事件捕获)      

/**
    * 场景设计题
    一个历史页面,上面有若干按钮的点击逻辑,每个按钮都有自己的 click 事件
     新需求来了:给每一个访问的用户添加了一个属性,如果 banned = true,此用户点击页面上的任何按钮或元素,
    都不可响应原来的函数。而是直接 alert 提示,你被封禁了。
*/
window.addEventListener(
  "click",
  (e) => {
    if (banned) {
      e.stopPropagation();
    }
  },
  true
);

4.  你工作中用过防抖和节流吗?

4.1 基本概念

 防抖:持续触发事件的时候,一定时间段内,没有再触发事件,时间处理函数才会执行一次

 节流:持续触发事件的时候,保证一段时间内只调用一次事件处理函数(固定时间)

4.2 分别适合用在什么场景?

防抖:input输入(巨量引擎)

节流:resize(屏幕大小改变)、 scroll(滚动时)   ---> 一定要执行的,给一个固定间隔

4.3  手写节流函数

时间戳写法,第一次立即执行

// 时间戳写法,第一次立即执行
const throttle = (fn, interval) => {
  let last = 0;
  return () => {
    let now = Date.now();
    if (now - last >= interval) {
      fn.apply(this, arguments);
    }
  };
};
const handle = () => {
  console.log(Math.random());
};
const throttleHandle = throttle(handle, 3000);
throttleHandle();
throttleHandle();

定时器写法,第一次也需要延时 具体 时间以后再执行

// 定时器写法,第一次也会延时 具体的时间执行
const throttle = (fn, interval) => {
  let timer = null;
  return function () {
    let context = this;
    let args = arguments;
    if (!timer) {
      timer = setTimeout(() => {
        fn.apply(context, args);
        timer = null;
      }, interval);
    }
  };
};
const handle = () => {
  console.log(Math.random());
};
const throttleHandle = throttle(handle, 1000);
throttleHandle();
throttleHandle();

精确的实现一个节流函数,无论是第一次之后还是最后一次(避免最后一次执行还会再等具体时间之后再执行)

// 精确的实现一个节流函数,无论是第一次之后还是最后一次(避免最后一次执行还会再等具体时间之后再执行)
const throttle = (fn, delay) => {
  let timer = null;
  let startTime = Date.now();
  return function () {
    let curTime = null;
    let remainning = delay - (curTime - startTime);
    let context = this;
    let args = arguments;
    clearTimeout(timer);
    if (remainning <= 0) {
      fn.apply(context, args);
      startTime = Date.now();
    } else {
      timer = setTimeout(fn, remainning);
    }
  };
};

5. 你了解 Promise 吗?平时用的多吗?

5.1 Promise.all( ) 你知道有什么特性吗?

解答Promise.all( ) 会接受一个 Promise 数组,数组里面可以是 Promise 也可以是一个常量或者其他;执行情况为:Promise 里面的所有 Promise 执行完成以后才会返回结果;

5.2 如果其中一个 Promise 报错了怎么办?

 解答:如果有一个报错了,那么整个 Promise.all(  ),就会返回一个 catch

5.3 如果有一个 Promise 报错了,那么其他的 Promise 还会执行吗?

解答:会的,因为 Promise 是在创建之初(实例化) 的时候已经执行了

5.4 手写一个 Promise.all(  )

面试官:“给你 三个 如下的 Promise ,调用你的Promise.all( )以后,看是否会在三秒以内返回对应的结果”  

// 测试
const pro1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("1");
  }, 1000);
});
const pro2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("3");
  }, 2000);
});
const pro3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("3");
  }, 3000);
});
// 测试题
const PromiseAll = (promiseArray) => {};

 如何实现?

       考点1:Promise.all(  ) 里面的参数有可能不是一个 Promise,如何处理?

       考点2:Promise.all(  ) 返回值的顺序,是你传入的 Promise 顺序,如何处理?

// 测试题
const PromiseAll = (promiseArray) => {
  return new Promise((resolve, reject) => {
    if (!Array.isArray(promiseArray)) {
      return reject(new Error("Type can only be array"));
    }
    const result = []; // promise 执行的结果集
    const promiseNums = promiseArray.length; // 当前循环次数
    let counter = 0; // 记录当前 promise 执行顺序,需要按照 传入的 promise 顺序返回
    for (let i = 0; i < promiseNums; i++) {
      Promise.resolve(promiseArray[i])
        .then((value) => {
          counter++;
          result.push(value);
          if (counter === promiseNums) {
            resolve(result);
          }
        })
        .catch((e) => reject(e));
    }
  });
};
console.log(
  PromiseAll([pro1, pro2, pro3])
    .then((res) => {
      console.log(res);
    })
    .catch((e) => {
      console.log(e);
    })
);

5.5 Promise 在初始化的时候已经执行了,那么利用这个特性我们可以做点什么(扩展性问题)?

解答:可以利用 promise 的这个特性做缓存;

 利用 装饰器 + Map结构,实现一个 Promise 的缓存

const cacheMap = new Map();
const enableCache = (target, name, descriptor) => {
  const val = descriptor.value;
  descriptor.value = async (...args) => {
    const cacheKey = name + JSON.stringify(args);
    if (!cacheMap.get(cacheKey)) {
      const cacheValue = Promise.resolve(val.apply(this, args)).catch((_) => {
        cacheMap.set(cacheKey, null);
      });
      cacheMap.set(cacheKey, cacheValue);
    }
    return cacheMap.get(cacheKey);
  };
  return descriptor;
};
class PromiseClass {
  @enableCache
  static async getInfo() {}
}
PromiseClass.getInfo(); // 第一次发送请求
PromiseClass.getInfo(); // 第二次以后就是缓存
PromiseClass.getInfo();
PromiseClass.getInfo();

6. 字节经典算法题---- 接雨水

20210527153548522.png

题干:


       给定 n 个非负整数表示每个宽度为 1 的柱子的高度图,计算按此排列的柱子,下雨之后能接多少雨水。


       示例1:


       输入 height = [0,1,0,2,1,0,1,3,2,1,2,1]


       输出:6


       解释:上面是由数组  [0,1,0,2,1,0,1,3,2,1,2,1] 表示的高度图,在这种情况下,可以接 6 单位的雨水(如上图,蓝色部分表示雨水)


       示例2:


       输入 height = [4,2,0,3,2,5]


       输出:9


相关文章
|
4月前
|
缓存 前端开发 中间件
[go 面试] 前端请求到后端API的中间件流程解析
[go 面试] 前端请求到后端API的中间件流程解析
|
1月前
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
66 1
|
3月前
|
Web App开发 前端开发 Linux
「offer来了」浅谈前端面试中开发环境常考知识点
该文章归纳了前端开发环境中常见的面试知识点,特别是围绕Git的使用进行了详细介绍,包括Git的基本概念、常用命令以及在团队协作中的最佳实践,同时还涉及了Chrome调试工具和Linux命令行的基础操作。
「offer来了」浅谈前端面试中开发环境常考知识点
|
4月前
|
存储 XML 移动开发
前端大厂面试真题
前端大厂面试真题
|
2月前
|
Web App开发 JavaScript 前端开发
前端Node.js面试题
前端Node.js面试题
|
4月前
|
存储 前端开发 JavaScript
44 个 React 前端面试问题
【8月更文挑战第18天】
58 2
|
4月前
|
存储 JavaScript 前端开发
2022年前端js面试题
2022年前端js面试题
46 0
|
4月前
|
存储 前端开发 JavaScript
44 个 React 前端面试问题
44 个 React 前端面试问题
|
4月前
|
存储 JavaScript 前端开发
|
4月前
|
Web App开发 存储 缓存