縱觀大廠的前端算法題,有難有易,下面就難度等級劃分為幾個類型供大家參考。
1. 熟練掌握語言的基本語法以及常用函數的基本用法(1星難度)
展開一個數組,數組最多二維:[[1,2],[3,4]] => [1,2,3,4]
解答:主要考察spread運算符以及數組的concat用法。
function flatten(arr) {
return [].concat(...arr);
}
2. 使用遞歸,以及其他高級應用的實現(2星難度)
例1:展開一個數組(多維): [[1,2],3,[4,[5,6,[7,8]]]] => [1,2,3,4,5,6,7,8]
解答:考察遞歸的思想,其實遞歸是一種數學思想,把問題本身轉化為能夠用遞歸的形式表示的數學公式,那麼再複雜的遞歸問題也可以迎刃而解。
function flatten(arr) {
return [].concat(
...arr.map(e => {
Array.isArray(e) ? flatten(e) : e;
}));
}
例2:寫一個節流函數,使得用户滾動滾動條的時候每60ms才觸發一次scroll事件
解答:利用“加鎖”的思想。
function throttle(func, delay = 30) {
let lock = false;
return (...args) => {
if(lock) return;
func(...args);
lock = true;
setTimeout(() => {lock = false}, delay);
}
}
document.addEventListener("scroll", throttle(console.log("scrolling")));
例3: 寫一個節流函數,使得用户輸入停止後300ms才觸發驗證
解答:每來一次事件,都重啓計數器。
function throttle(func, delay = 300, timeoutId = null) {
return (...args) => {
clearTimeout(timeoutId);
timeoutId = setTimeout((...args) => func(...args), delay)
}
}
3. 函數式編程(3星難度)
實現函數柯里化
解答:柯里化通常也稱部分求值,其含義是給函數分步傳遞參數,每次傳遞參數後部分應用參數,並返回一個更具體的函數接受剩下的參數,這中間可嵌套多層這樣的接受部分參數函數,直至返回最後結果。
const curry = (func) => {
const g = (...allArgs) => allArgs.length >= func.length ?
func(...allArgs) :
(...args) => g(...allArgs, ...args);
return g;
}