纷享销客前端实习一面
自我介绍
学校+专业+姓名+什么时候开学前端+前端经验+实习公司+项目
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 ) |
上手难度 | 上手快 | 更灵活但学习曲线稍陡 |