做网站优化的网站开发项目教程答案

自我介绍

学校+专业+姓名+什么时候开学前端+前端经验+实习公司+项目

1. 前端是怎么学的？

我一开始是通过 B 站、掘金、官网文档等资源自学 HTML、CSS 和 JavaScript，后面通过做一些小项目巩固知识，比如实现简易的 todoList、天气查询、图形拖拽等。后来我系统性地学习了 Vue 和 React，掌握了组件化开发、路由、状态管理、前端工程化等内容，并在实习中参与真实项目，不断积累实践经验。

---

2. 为什么对前端感兴趣？

我喜欢前端是因为它“看得见”，可以快速地将代码变成界面和交互体验，并且它紧跟技术潮流、新东西不断出现，很有挑战和成就感。同时，我也喜欢把复杂的逻辑通过交互变得简单直观，提升用户体验。

---

3. 和别人相比，你觉得自己有什么优势？

• 学习能力强：我能快速掌握新框架新技术。
• 实践动手能力强：不仅看理论，也会动手做项目实践。
• 注重细节和用户体验：对 UI 和交互的细节比较敏感。
• 团队协作意识强：在实习和合作项目中习惯使用 git 协作，能主动沟通推进任务。

---

4. 城市地铁规划使用了什么算法？有用到遍历吗？

地铁规划本质是图论问题，地铁站是节点、线路是边，常用算法包括：

• 最短路径算法：如 Dijkstra（用于求最短行驶路线）
• 最小生成树算法：如 Prim、Kruskal（构建最优成本线路）
• 遍历算法：如 DFS/BFS（查找所有路径或最少换乘路径）
• A*：启发式最优路径（更智能）
• 网络流算法：分析高峰期站点流量瓶颈

所以遍历是必须要用的，尤其是在路径搜索、换乘优化等场景中。

---

5. 举一个时间复杂度的例子

function printPairs(arr) {for (let i = 0; i < arr.length; i++) {for (let j = 0; j < arr.length; j++) {console.log(arr[i], arr[j]);}}
}

• 时间复杂度是 O(n^2)
• 因为有两个嵌套循环，每个都跑 n 次。

6. Promise实例？ promise.all 第一个执行后面的还会执行吗？为什么？

1. 创建普通 Promise 实例

const p = new Promise((resolve, reject) => {setTimeout(() => {resolve("成功");// 或 reject("失败");}, 1000);
});

---

2. Promise.resolve()

快速创建一个成功的 Promise

const p = Promise.resolve("立即成功");
p.then(console.log); // 立即成功

---

3. Promise.reject()

快速创建一个失败的 Promise

const p = Promise.reject("立即失败");
p.catch(console.error); // 立即失败

---

4. Promise.all()

等待所有 Promise 成功，否则立刻失败

Promise.all([Promise.resolve(1),Promise.resolve(2)
]).then(res => console.log(res)); // [1, 2]

---

5. Promise.race()

谁先完成（成功或失败），就返回谁的结果

Promise.race([new Promise(r => setTimeout(() => r("A"), 500)),new Promise(r => setTimeout(() => r("B"), 1000))
]).then(console.log); // A

---

6. Promise.allSettled()

等待所有完成（不管成功或失败），返回每个的状态

Promise.allSettled([Promise.resolve("yes"),Promise.reject("no")
]).then(console.log);/*
[{ status: 'fulfilled', value: 'yes' },{ status: 'rejected', reason: 'no' }
]
*/

---

7. Promise.any()（ES2021）

只要有一个成功就返回结果；全部失败才报错

Promise.any([Promise.reject("fail"),Promise.resolve("success")
]).then(console.log); // success

---

8. async/await 与 Promise

async function fetchData() {const data = await Promise.resolve("结果");console.log(data); // 结果
}

---

二、promise.then 返回什么？

1. 返回一个新的 Promise

const p = Promise.resolve(1);const p2 = p.then(val => {return val + 1;
});p2.then(console.log); // 2

• then() 返回的是一个新的 Promise 实例
• 可以链式调用，不会影响原 Promise

---

2. 返回值分类

返回内容	结果
普通值（如字符串、数字）	包装成一个成功的 Promise
Promise 对象	等待它的状态
抛出异常 / 返回 throw	返回失败的 Promise

---

3. 示例：then 返回普通值

Promise.resolve("a").then(val => val + "b") // 返回的是 "ab".then(console.log); // ab

---

4. 示例：then 返回一个 Promise

Promise.resolve("a").then(val => Promise.resolve(val + "b")).then(console.log); // ab

---

5. 示例：then 抛异常

Promise.resolve("x").then(val => {throw new Error("出错了");}).catch(err => console.error(err.message)); // 出错了

---

const p1 = new Promise(resolve => setTimeout(() => resolve('A'), 1000));
const p2 = new Promise(resolve => setTimeout(() => resolve('B'), 2000));Promise.all([p1, p2]).then(res => {console.log(res); // ['A', 'B']
});

• 是的，后面的会继续执行。
• Promise.all 会等所有 Promise 都成功，才返回结果。
• 即使第一个已经执行完，后面的也会照常执行，不会提前停止。
• 如果其中有一个失败（reject），Promise.all 会立刻 reject，后续结果不会返回。

---

7. reduce 是什么？使用示例？

reduce 是数组的一个高阶函数，用于累计处理数组值。

const arr = [1, 2, 3, 4];
const sum = arr.reduce((acc, cur) => acc + cur, 0); // 10

也可以将数组转对象：

const people = [{ id: 1, name: 'Tom' }, { id: 2, name: 'Jerry' }];
const map = people.reduce((acc, cur) => {acc[cur.id] = cur.name;return acc;
}, {});

---

8. nextTick 是什么？

• 在 Vue 中，nextTick 用于等待 DOM 更新完成后再执行某个逻辑。
• 在 Node.js 中，process.nextTick 是一种微任务，比 setTimeout 还早执行。

Vue.nextTick(() => {console.log('DOM updated!');
});

---

9. 数组扁平化有几种方式？

方法一：flat()（ES2019+）

[1, [2, [3]]].flat(Infinity) // [1, 2, 3]

方法二：递归

function flatten(arr) {return arr.reduce((acc, cur) =>Array.isArray(cur) ? acc.concat(flatten(cur)) : acc.concat(cur), []);
}

方法三：栈（迭代模拟递归）

function flatten(arr) {const stack = [...arr];const result = [];while (stack.length) {const val = stack.pop();if (Array.isArray(val)) {stack.push(...val);} else {result.unshift(val);}}return result;
}

---

10. 在项目中，Vue 和 React 有什么区别？

对比项	Vue	React
编程范式	更接近模板 + 配置式	更偏函数式、JSX 写法
数据绑定	响应式系统（双向绑定）	单向数据流，需要自己用 state 和 props 控制
组件写法	options API / composition API	函数组件 / class 组件（已弃用）
状态管理	Vuex / Pinia	Redux / Zustand / Context
生命周期命名	比较直观（如 mounted）	更底层（如 useEffect）
上手难度	上手快	更灵活但学习曲线稍陡

---