# 富途前端面试手撕代码：三道经典题目解析最近面了富途的前端，主要业务是官网的开发和维护。面试给了三道代码题：打印执行结果、红绿灯交替、买卖股票的最佳时机。 ## 一、宏任务与微任务的执行顺序 ### 题目描述给定以下代码，预测其输出结果： ```javascript console.log('script start'); setTimeout(() => { console.log('setTimeout'); }, 0); async function async1() { console.log('async1 start'); await Promise.resolve().then(() => { console.log('promise1'); }); console.log('async1 end'); } async1(); console.log('script end'); ``` ### 思路分析这道题考察的是 JavaScript 的事件循环机制，尤其是宏任务（macrotask）和微任务（microtask）的执行顺序。JavaScript 的执行机制可以分为以下几个阶段： 1. **主线程执行**：代码从上到下依次执行。 2. **微任务队列**：`Promise` 的回调函数、`async/await` 等属于微任务，会在当前宏任务执行完后立即处理。 3. **宏任务队列**：`setTimeout`、`setInterval` 等属于宏任务，会在当前事件循环的微任务处理完后，进入下一个事件循环时处理。在代码中： - `console.log('script start')` 和 `console.log('script end')` 是主线程直接执行的代码，会立即输出。 - `setTimeout` 是宏任务，会被放入宏任务队列。 - `async1()` 是一个 `async` 函数，其内部的 `await` 会将后续代码拆分为微任务。 ### 执行顺序 1. 主线程先执行 `console.log('script start')`，输出 `script start`。 2. 遇到 `setTimeout`，将其回调函数放入宏任务队列。 3. 调用 `async1()`，执行到 `console.log('async1 start')`，输出 `async1 start`。 4. 遇到 `await`，将 `Promise.resolve().then(() => { console.log('promise1'); })` 的回调函数放入微任务队列。 5. `await` 后的 `console.log('async1 end')` 会被拆分为微任务，放入微任务队列。 6. 主线程继续执行 `console.log('script end')`，输出 `script end`。 7. 主线程执行完毕后，处理微任务队列： - 先执行 `Promise.resolve().then()` 的回调函数，输出 `promise1`。 - 然后执行 `async1` 中 `await` 后的代码，输出 `async1 end`。 8. 微任务处理完后，进入下一个事件循环，处理宏任务队列，输出 `setTimeout`。 ### 最终输出结果 ``` script start async1 start script end promise1 async1 end setTimeout ``` ### 扩展思考如果代码中有多个微任务和宏任务嵌套，如何预测输出顺序？例如： ```javascript console.log('script start'); setTimeout(() => { console.log('setTimeout1'); Promise.resolve().then(() => { console.log('promise2'); }); }, 0); async function async1() { console.log('async1 start'); await Promise.resolve().then(() => { console.log('promise1'); }); console.log('async1 end'); } async1(); console.log('script end'); ``` 输出结果为： ``` script start async1 start script end promise1 async1 end setTimeout1 promise2 ``` ## 二、用 `async` 和 `Promise` 实现红绿灯交替展示 ### 题目描述实现一个红绿灯交替展示的功能，要求红灯亮 3 秒，绿灯亮 2 秒，黄灯亮 1 秒，循环往复。使用 `async` 和 `Promise` 实现。 ### 思路分析红绿灯的交替展示可以通过 `async` 函数和 `Promise` 来实现。具体步骤如下： 1. 使用 `Promise` 和 `setTimeout` 来控制灯的切换时间。 2. 定义一个状态变量来记录当前灯的状态（红、绿、黄）。 3. 使用 `async` 函数和 `await` 来等待灯的切换。 ### 代码实现 ```javascript // 定义灯的状态 const RED = 'red'; const GREEN = 'green'; const YELLOW = 'yellow'; // 当前灯的状态 let currentState = RED; // 灯的容器 const lightContainer = document.getElementById('light-container'); // 更新灯的状态 function updateLight(state) { // 清除所有灯的亮状态 lightContainer.querySelectorAll('.light').forEach(light => { light.classList.remove('active'); }); // 根据状态点亮对应的灯 const lightElement = lightContainer.querySelector(`.${state}`); if (lightElement) { lightElement.classList.add('active'); } } // 创建一个延迟的 Promise function delay(time) { return new Promise(resolve => { setTimeout(resolve, time); }); } // 切换灯的状态 async function switchLight() { while (true) { updateLight(RED); await delay(3000); // 红灯亮 3 秒 updateLight(GREEN); await delay(2000); // 绿灯亮 2 秒 updateLight(YELLOW); await delay(1000); // 黄灯亮 1 秒 } } // 初始化 switchLight(); ``` ### HTML 和 CSS ```html

``` ### 扩展思考如何优化红绿灯的实现？可以考虑以下几点： - 使用状态机来管理灯的状态切换。 - 添加按钮控制红绿灯的暂停和继续。 - 动态调整灯的亮灭时间。 ## 三、股票最佳买卖时间 ### 题目描述给定一个数组 `prices`，其中 `prices[i]` 表示某股票第 `i` 天的价格。假设你最多可以完成两笔交易（即买入和卖出一次为一笔交易），设计一个算法来计算你能获得的最大利润。 ### 思路分析这道题可以通过动态规划来解决。我们需要记录以下四个状态： - `buy1`：第一次买入后的最大利润。 - `sell1`：第一次卖出后的最大利润。 - `buy2`：第二次买入后的最大利润。 - `sell2`：第二次卖出后的最大利润。具体步骤如下： 1. 初始化四个状态变量。 2. 遍历每一天的价格，更新四个状态变量。 3. 最后返回 `sell2`，即两次交易后的最大利润。 ### 代码实现 ```javascript function maxProfit(prices) { if (prices.length === 0) return 0; // 初始化状态变量 let buy1 = -prices[0]; let sell1 = 0; let buy2 = -prices[0]; let sell2 = 0; for (let i = 1; i < prices.length; i++) { // 更新第一次买入和卖出的状态 buy1 = Math.max(buy1, -prices[i]); sell1 = Math.max(sell1, buy1 + prices[i]); // 更新第二次买入和卖出的状态 buy2 = Math.max(buy2, sell1 - prices[i]); sell2 = Math.max(sell2, buy2 + prices[i]); } return sell2; } // 示例 console.log(maxProfit([3,3,5,1,1,3,1,4])); // 输出 5 ``` ### 扩展思考如果允许最多完成 `k` 笔交易，如何扩展算法？可以使用二维动态规划： - `dp[i][j]` 表示前 `i` 天完成 `j` 笔交易的最大利润。 - 状态转移方程： - `dp[i][j] = max(dp[i-1][j], dp[i-1][j-1] + prices[i] - prices[k])`，其中 `k` 是买入的天。 ## 总结富途前端面试中的三道代码题考的还是很全面，涉及到浏览器事件循环机制、js异步流、leetcode算法题.