开头热场问题
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. 字节经典算法题---- 接雨水
题干：
给定 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
