好傷心,面試官結(jié)束時(shí)候評(píng)價(jià)是整體還行,等視頻掛了5分鐘內(nèi)收到感謝信這前后反差,我只好安慰面試官尊重自己,但是誰(shuí)來(lái)安慰我呀面試上來(lái)開(kāi)始問(wèn)八股1,說(shuō)說(shuō) url到瀏覽器頁(yè)面顯示整個(gè)過(guò)程2,http 緩存3,流式輸出,你知道哪些可以實(shí)現(xiàn)的方式?AI生成到前端你覺(jué)得采用那種方式?3,css 設(shè)置的元素要不斷旋轉(zhuǎn),怎么寫(不到一分鐘面試官問(wèn)我是否會(huì),不會(huì)可以換一題,那我還行想到用什么,那換一題吧)keyfram 里面設(shè)transform;animation 里面應(yīng)用設(shè)定的spin;代碼如下:(linear 勻速轉(zhuǎn),infinite 無(wú)限循環(huán))@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}.spinner { animation: spin 2s linear infinite; /*持續(xù)2秒 轉(zhuǎn)一圈*/}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> )}會(huì)輸出打印什么?h1位置 count 顯示什么那當(dāng)然每隔1s 打印出0,頁(yè)面顯示也是05,好的,你分析他原來(lái)想要實(shí)現(xiàn)什么效果,然后現(xiàn)在這段代碼怎么改能實(shí)現(xiàn)預(yù)期效果,你有幾種方式?【用useRef 、手寫update函數(shù),設(shè)定count 動(dòng)態(tài)依賴項(xiàng),使用setTimeout 遞歸(但是容易爆棧)】我當(dāng)時(shí)有點(diǎn)懵,當(dāng)然是沒(méi)考慮到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) // 遞歸調(diào)用, 會(huì)導(dǎo)致棧溢出 } update(); // 初始調(diào)用 }) useEffect(() => { const interval = setInterval(() => { console.log('useEffect') setCount(count + 1) }, 1000) }, [count]) // 動(dòng)態(tài)依賴,但是頻繁定時(shí)器創(chuàng)建和銷毀 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更新后,相當(dāng)瀏覽器刷新渲染了,立即同步執(zhí)行)、promise (微任務(wù),在同步執(zhí)行完清空微任務(wù)隊(duì)列)useEffect(異步執(zhí)行,事件循環(huán)后執(zhí)行)期間問(wèn)了useLayoutEffect 和 useEffect 區(qū)別8,看下面輸出什么?(弱弱心想:不能出點(diǎn)其他的嗎?)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輸出,但是解釋起來(lái)費(fèi)勁呀,解釋不斷問(wèn)我:變量提升到哪,函數(shù)提升到哪,可以修改一下代碼看看提升到的位置,new 關(guān)鍵字分析一下,作為普通函數(shù)調(diào)用還是.... (問(wèn)下牛友,這種題目去那找能復(fù)習(xí)到呀)9,寫個(gè)sum函數(shù)實(shí)現(xiàn)下面輸出: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#面試問(wèn)題記錄##面試吐槽bot##面試經(jīng)驗(yàn)談##聽(tīng)到哪句話就代表面試穩(wěn)了or掛了?#