滴滴前端-日常实习-一面

## 2025.3.31 16点 科大讯飞(OC)1. 自我介绍2. 项目：pdf和word，ai对简历中经历项目的扩展与美化3. 请求封装拦截4. 重复请求的实现5. css预编译语言6. `less变量如何定义：@7. echarts(二次封装)两个id是如何处理这两个8. 路由及方法9. filter,compute，method里面有没有参数10. echart中非响应式如何变化（setOption)11. 节流和防抖区别12. es6新特性：13. 项目中map的使用14. promise15. class16. 数组的方法17. websocket基本api18. 处理网络中断十分钟后之间发offer

一面 35min经典自我介绍。长达25min的项目问题。（我PDF简历上贴了演示链接，但是面试官说打不开？？？）一个向量绕一个点怎么旋转？（这里我说我不会图形学，所以跳过了）那你了解点积和叉积吗，简单说说看看？应用场景？了解协程吗？协程是异步还是同步？项目里面有用到协程吗？你项目里面用到了接口吗？一个逻辑题：斗地主中的“飞机”怎么判断？你怎么设计数据结构来解决这个问题？那假设现在是有“癞子”的情况呢？（然后我BalaBala讲了一堆，看面试官最后的说法，大概说对了）。反问环节。请问贵公司对于鱼苗夏令营是一个怎么样的安排，参加夏令营的同学们会学习到什么知识？听说贵公司不止在研保卫萝卜，请问还有哪...

好伤心，面试官结束时候评价是整体还行，等视频挂了5分钟内收到感谢信这前后反差，我只好安慰面试官尊重自己，但是谁来安慰我呀面试上来开始问八股1，说说 url到浏览器页面显示整个过程2，http 缓存3，流式输出，你知道哪些可以实现的方式？AI生成到前端你觉得采用那种方式？3，css 设置的元素要不断旋转，怎么写（不到一分钟面试官问我是否会，不会可以换一题，那我还行想到用什么，那换一题吧）keyfram 里面设transform；animation 里面应用设定的spin；代码如下：（linear 匀速转，infinite 无限循环）@keyframes spin {    from {        transform: rotate(0deg);    }    to {        transform: rotate(360deg);    }}.spinner {    animation: spin 2s linear infinite; /*持续2秒 转一圈*/}4，输出解释题：function app() {    const [count, setCount] = useState(0)    useEffect(() => {        const interval = setInterval(() => {            console.log('useEffect')            setCount(count + 1)        }, 1000)    }, [])     return (        <div>            <h1>{count}</h1>        </div>     )}会输出打印什么？h1位置 count 显示什么那当然每隔1s 打印出0，页面显示也是05，好的，你分析他原来想要实现什么效果，然后现在这段代码怎么改能实现预期效果，你有几种方式？【用useRef 、手写update函数，设定count 动态依赖项，使用setTimeout 递归（但是容易爆栈）】我当时有点懵，当然是没考虑到function app() {    const [count, setCount] = useState(0)    const countRef = useRef(count);    useEffect(() => {        setInterval(() => {            console.log('count', count);            // setCount(count + 1)            setCount(countRef.current + 1)        }, 1000)    },[])    useEffect(() => {       const update = () => {        console.log('update')        setCount(count + 1)         setTimeout(update, 1000) // 递归调用, 会导致栈溢出       }        update(); // 初始调用    })    useEffect(() => {        const interval = setInterval(() => {            console.log('useEffect')            setCount(count + 1)        }, 1000)    }, [count]) // 动态依赖，但是频繁定时器创建和销毁    return (        <div>            <h1>{count}</h1>        </div>     )}7，输出顺序是什么？function app() {        promise.resolve().then(() => {        console.log('promise')    })    useEffect(() => {        console.log('useEffect')    }, [count])    useLayoutEffect(() => {        console.log('useLayoutEffect')    }, [count])    return (        <div>            <h1>{count}</h1>        </div>     )}输出：useLayoutEffect promiseuseEffectuseLayoutEffect（dom更新后，相当浏览器刷新渲染了，立即同步执行）、promise (微任务，在同步执行完清空微任务队列）useEffect（异步执行，事件循环后执行）期间问了useLayoutEffect 和 useEffect 区别8，看下面输出什么？（弱弱心想：不能出点其他的吗？）function Foo() {    getName = function () {        alert(1);    }    return this;}Foo.getName = function () {    alert(2);}Foo.prototype.getName = function () {    alert(3);}var getName = function () {    alert(4);}function getName() { alert(5); }Foo.getName(); // 2getName(); // 4Foo().getName(); // 1getName(); // 1new Foo.getName(); // 2new Foo().getName(); // 3new new Foo().getName(); // 3看这是金典js输出，但是解释起来费劲呀，解释不断问我：变量提升到哪，函数提升到哪，可以修改一下代码看看提升到的位置，new 关键字分析一下，作为普通函数调用还是.... （问下牛友，这种题目去那找能复习到呀）9，写个sum函数实现下面输出：console.log(sum(1,2,3).sumOf()); // 6console.log(sum(1,4)(2).sumOf()); // 7console.log(sum(1)(2)(3)(4).sumOf()); // 10function sum(...args) {    let total = args.reduce((acc,cur) => acc + cur,0);    function innerSum(...newArgs) {        total += newArgs.reduce((acc,cur) => acc + cur,0);        return innerSum;    }    innerSum.sumOf = () => total;    return innerSum;}console.log(sum(1,2,3).sumOf()); // 6console.log(sum(1,4)(2).sumOf()); // 7console.log(sum(1)(2)(3)(4).sumOf()); // 10

美团内推码：SBH55RV 即刻投递叭！！ 记得附上内推码哈 美团，实现你的职业梦想！我们提供有竞争力的薪资福利和广阔的职业发展空间！  以下是面经分享： 第一轮技术面  自我介绍 强缓存与协商缓存机制实现原理 HTTP/1、HTTP/2、HTTP/3的核心区别 Set与WeakSet的区别及弱引用特性 闭包与V8垃圾回收机制 React Hooks的设计动机及函数组件与类组件的差异 React Fiber架构解决的问题及实现思路 手写发布订阅模式 实现Promise.resolve及手写Promise核心逻辑 字符串处理题（去重、查找重复字符、提取重复子串） Vue/React状态管理工具的...