記一次小米前端面試題

這兩天參加了一次小米的面試,面試方式比較隨意,直接用微信聊的。感覺(jué)面試題有些意思,所以想記下來(lái),也使我學(xué)到了不少東西。

Q:

定義這樣一個(gè)函數(shù)

function doRepeat(func, times, wait) {

}

參數(shù)分別是需要 repeat的函數(shù), repeat的次數(shù),每次repeat的間隔

使用方式如下:

調(diào)用這個(gè)函數(shù)能返回一個(gè)新函數(shù),比如傳入的是alert,這個(gè)函數(shù)的調(diào)用就是
var repeatedFun = doRepeat(alert, 10, 5000);

調(diào)用返回的這個(gè)新函數(shù),如: repeatFun("hellworld");

會(huì)依次alert十次 helloworld,每次間隔5秒

這個(gè)題目很簡(jiǎn)單,單從要求來(lái)看考驗(yàn)的是閉包函數(shù),所以我們只需要使用延時(shí)函數(shù)再return一個(gè)函數(shù)就能達(dá)到要求,答案網(wǎng)上也能查到。我使用setInterval函數(shù)實(shí)現(xiàn)的,這里只給出部分關(guān)鍵性代碼。

function doRepeat(func, times, wait) {
    // 檢查參數(shù)是否存在
    if (!func || !times || !wait) {
        return function () { };
    }
    // 檢查參數(shù)類型
    if (!checkType(func, ['function']) && !checkType(times, ['Number', 'String']) && !checkType(wait, ['Number', 'String'])) {
        return function () { };
    }
    // 進(jìn)行不規(guī)則類型的類型轉(zhuǎn)換
    times = exchange(times, 'Number');
    wait = exchange(wait, 'Number');
    let i = 0;
    return function repeat() {
        const _args = arguments;

        const handler = setInterval(function () {
            if (i == times) {
                clearInterval(handler);
                return;
            }
            func(_args[0]);
            i++;
        }, wait)
    }
}

這個(gè)函數(shù)非常簡(jiǎn)單,請(qǐng)?jiān)谑昼妰?nèi)完成就好。但是這里想說(shuō)一下幾個(gè)要點(diǎn):

  • 一個(gè)是程序的可用性:即程序是否可以正常運(yùn)行,這個(gè)是最基本的條件,如果不能達(dá)到請(qǐng)自覺(jué)面壁30秒。

  • 另外一個(gè)是程序的健壯性:是否檢查傳參的完整性?是否檢查參數(shù)類型?我想強(qiáng)調(diào)這一點(diǎn),因?yàn)閖avascript是自動(dòng)類型的語(yǔ)言,在運(yùn)行過(guò)程中進(jìn)行類型的檢測(cè)是十分重要的問(wèn)題。

  • 另外一個(gè)是程序的可讀性:這個(gè)也是最基本的問(wèn)題之一,代碼風(fēng)格良好的程序應(yīng)該可讀性強(qiáng),并且僅添加必要的注釋。

  • 程序的和諧性:即在程序出錯(cuò)的情況下是否依然可以返回標(biāo)準(zhǔn)的數(shù)據(jù)格式?可以看到我在檢查參數(shù)出錯(cuò)以后返回

return function() {}

這么做可以避免因?yàn)榇撕瘮?shù)出錯(cuò)而影響其他的功能性函數(shù)。

  • 程序的包容性:可以看到我在函數(shù)中進(jìn)行了類型轉(zhuǎn)換。這也是我在工作中遇到的問(wèn)題,當(dāng)我們參與工作的協(xié)作之時(shí),我們往往需要調(diào)用同事或者其他人的函數(shù),而javascript的自動(dòng)類型也可能導(dǎo)致傳過(guò)來(lái)的參數(shù)類型并不標(biāo)準(zhǔn),如果我們能在代碼中給予這些“小問(wèn)題”適當(dāng)?shù)闹С?,那么我們的函?shù)將會(huì)友好很多。這里我將并不標(biāo)準(zhǔn)的字符串類型轉(zhuǎn)換為了Number類型。

這些特點(diǎn)實(shí)際上是我在某篇文章上面看到的,但是實(shí)際應(yīng)用以后發(fā)現(xiàn)受益良多,我會(huì)在找到這篇文章以后把鏈接發(fā)上來(lái)。我堅(jiān)信良好的代碼風(fēng)格可以幫助我們避免很多坑,并且嚴(yán)格遵守這一點(diǎn)。

但是實(shí)際上我寫的這個(gè)函數(shù)并不完善,這一點(diǎn)也將在后面的面試題中考到。

Q:
請(qǐng)?jiān)儆胹etTimeout實(shí)現(xiàn)一下

果然考到了這一點(diǎn),setTimeout在實(shí)際運(yùn)用的過(guò)程中會(huì)有很多的坑,最明顯的問(wèn)題就是異步問(wèn)題,這也是我一開始使用setInterval來(lái)實(shí)現(xiàn)的原因。下面給出代碼:

function doRepeat(func, times, wait) {
    // 檢查參數(shù)是否存在
    if (!func || !times || !wait) {
        return function () { };
    }
    // 檢查參數(shù)類型
    if (!checkType(func, ['function']) && !checkType(times, ['Number', 'String']) && !checkType(wait, ['Number', 'String'])) {
        return function () { };
    }
    // 進(jìn)行不規(guī)則類型的類型轉(zhuǎn)換
    times = exchange(times, 'Number');
    wait = exchange(wait, 'Number');

    return function repeat() {
        const _args = arguments;
        // 如果次數(shù)大于0先執(zhí)行一遍,避免setTimeout延遲問(wèn)題
        if (times > 0) {
            func(_args[0]);
        }
        for (let i = 1; i < times; i++) {
            (window.setTimeout)(func(_args[0]), wait);
        }
    }

}

這是我一開始寫的代碼,但是實(shí)際上這段代碼是錯(cuò)誤的。我在setTimeout一行中使用了立即執(zhí)行函數(shù),但是立即執(zhí)行函數(shù)并不會(huì)阻塞函數(shù)的運(yùn)行,所以這段代碼還是會(huì)在N秒過(guò)后一下子把所有的函數(shù)全部執(zhí)行一遍。

請(qǐng)注意,這里又一個(gè)小坑,使用setTimeout是延遲執(zhí)行函數(shù),如果直接使用第一次傳入的函數(shù)不會(huì)立即執(zhí)行,所以需要先做一次判斷。

Q:
能不能不要一下子就設(shè)定好所有的setTimeout
在完成一個(gè)setTimeout后再去遞歸一下

這次考的是遞歸,沒(méi)有什么難度。

function doRepeat(func, times, wait) {
    // 檢查參數(shù)是否存在
    if (!func || !times || !wait) {
        return function () { };
    }
    // 檢查參數(shù)類型
    if (!checkType(func, ['function']) && !checkType(times, ['Number', 'String']) && !checkType(wait, ['Number', 'String'])) {
        return function () { };
    }
    // 進(jìn)行不規(guī)則類型的類型轉(zhuǎn)換
    times = exchange(times, 'Number');
    wait = exchange(wait, 'Number');
    let i = 0;

    // 返回函數(shù)主體
    function repeat() {
        // 如果次數(shù)達(dá)到則退出
        if (times === i) {
            return;
        }
        const _args = arguments;
        
        func(_args[0]);
        i++;

        // 尾遞歸
        return setTimeout(repeat.bind(this, _args[0]), wait);
    }

    return repeat;
}

寫到這里,突然覺(jué)得這個(gè)函數(shù)其實(shí)還是不夠健壯。我們來(lái)分析一下參數(shù),func參數(shù),默認(rèn)是一個(gè)函數(shù)。times參數(shù),默認(rèn)是一個(gè)非負(fù)數(shù)。wait也默認(rèn)是一個(gè)非負(fù)數(shù)。

如果傳入的參數(shù)times是一個(gè)負(fù)數(shù),那么這個(gè)函數(shù)將會(huì)陷入死循環(huán)。這里做檢測(cè)是否存在過(guò)度優(yōu)化的問(wèn)題?我還是抱有疑慮。

Q: 這里如果有多個(gè)參數(shù)怎么辦?比如傳入的函數(shù)叫console.log,可以接受多個(gè)參數(shù)
A:方法比較多,比如可以規(guī)定傳參的格式,用數(shù)組將參數(shù)包裹起來(lái),或者使用arguments
Q: show me the code

這里實(shí)際上有個(gè)坑,就是IE9的setTimeout只能傳入兩個(gè)參數(shù)(IE的梗已經(jīng)被玩爛了),這里可以使用bind函數(shù)來(lái)解決這個(gè)問(wèn)題。

function doRepeat(func, times, wait) {
    // 檢查參數(shù)是否存在
    if (!func || !times || !wait) {
        return function () { };
    }
    // 檢查參數(shù)類型
    if (!checkType(func, ['function']) && !checkType(times, ['Number', 'String']) && !checkType(wait, ['Number', 'String'])) {
        return function () { };
    }
    // 進(jìn)行不規(guī)則類型的類型轉(zhuǎn)換
    times = exchange(times, 'Number');
    wait = exchange(wait, 'Number');
    let i = 0;

    // 返回函數(shù)主體
    function repeat() {
        // 如果次數(shù)達(dá)到則退出
        if (times === i) {
            return;
        }
        const _args = [].slice.call(arguments);

        // 如果次數(shù)大于0并且是第一次執(zhí)行則先執(zhí)行一遍,避免setTimeout延遲問(wèn)題
        func(..._args)
        // 尾遞歸
        return setTimeout(repeat.bind(this, _args), wait);
    }

    return repeat;
}

這里同樣解釋一下這行代碼的作用

const _args = [].slice.call(arguments);

可以看到我在下面的代碼中使用了展開運(yùn)算符...,但是展開運(yùn)算符的使用需要迭代器。arguments不是數(shù)組,所以沒(méi)有迭代器。

考慮以下代碼:

(function(){
  console.log([] instanceof Array);
})() // true

(function(){
  console.log(arguments instanceof Array);
})() // false

這些大概就是全部的面試過(guò)程,不過(guò)最后俺沒(méi)去成小米,因?yàn)闀r(shí)間實(shí)在是不合適……

最后想給自己挖個(gè)坑,也出個(gè)升級(jí)版的問(wèn)題

Q: 請(qǐng)將這道題用setTimeout配合Generator函數(shù)實(shí)現(xiàn)一遍

這幾天考試,等考完試我再來(lái)填……

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容