目錄

• 引言

  31. 正確的函數(shù)定義 (簡(jiǎn)單)
  32. 正確的使用 parseInt (入門(mén))
  33. 完全等同 (入門(mén))
  34. 計(jì)時(shí)器 (中等)
  35. 流程控制 (中等)
  36. 函數(shù)傳參 (入門(mén))
  37. 函數(shù)的上下文 (入門(mén))
  38. 返回函數(shù) (簡(jiǎn)單)
  39. 使用閉包 (中等)
  40. 二次封裝函數(shù) (入門(mén))

引言

呕舯龋客網(wǎng)這個(gè)前端筆試題庫(kù)，可以說(shuō)這60道是最基礎(chǔ)的了狸驳，也是考察的東西比較雜，有時(shí)間4天差不多就可以刷完，鞏固基礎(chǔ)還是有些用的畔裕。做完題回顧一上午就可以過(guò)完一遍∫虑耍現(xiàn)在我結(jié)合我的答案和參考的其他人的答案，在這里做一個(gè)總結(jié)扮饶，也是自己知識(shí)的整理結(jié)果淮韭。

• 前端刷題 —— 牛客網(wǎng)前端題庫(kù)60道詳解(一)
• 前端刷題 —— 盘欤客網(wǎng)前端題庫(kù)60道詳解(二)
• 前端刷題 —— 趴糠啵客網(wǎng)前端題庫(kù)60道詳解(三)
• 前端刷題 —— 牛客網(wǎng)前端題庫(kù)60道詳解(四)
• 前端刷題 —— 藕硫荆客網(wǎng)前端題庫(kù)60道詳解(五)
• 前端刷題 —— 耪技客網(wǎng)前端題庫(kù)60道詳解(六)

31. 正確的函數(shù)定義

題目描述
請(qǐng)修復(fù)給定的 js 代碼中，函數(shù)定義存在的問(wèn)題
輸入：true
輸出：a

function functions(flag) {
    if (flag) {
      function getValue() { return 'a'; }
    } else {
      function getValue() { return 'b'; }
    }
    return getValue();
}

// 方法一：使用函數(shù)表達(dá)式
function functions(flag) {
    if (flag) {
      var getValue = ()  => { return 'a'; }
    } else {
      var getValue = () => { return 'b'; }
    }
 
    return getValue();
}

// 上面的等同于下面的元潘，變量提升
function functions(flag) {
    var getValue
    if (flag) {
      getValue = () => { return 'a'; }
    } else {
      getValue = () => { return 'b'; }
    }

    return getValue();
}

相關(guān)知識(shí)點(diǎn)：

• 函數(shù)的定義方式

函數(shù)聲明式：函數(shù)聲明在函數(shù)沒(méi)有執(zhí)行之前就已經(jīng)在作用域中會(huì)提升畔乙，同名的聲明會(huì)進(jìn)行覆蓋，以下面的為準(zhǔn)翩概，那么程序執(zhí)行的時(shí)候一直輸出的就是b牲距。

函數(shù)表達(dá)式：使用函數(shù)表達(dá)式，還是會(huì)進(jìn)行變量的提升钥庇，只不過(guò)這次提升的是變量getValue牍鞠，在執(zhí)行的時(shí)候，才會(huì)根據(jù)if語(yǔ)句的流程控制執(zhí)行不同的函數(shù)评姨。

31. 正確的使用 parseInt

題目描述
修改 js 代碼中 parseInt 的調(diào)用方式难述，使之通過(guò)全部測(cè)試用例
輸入：'12' 輸出：12
輸入： '12px' 輸出：12
輸入： '0x12' 輸出：0

// 方法，確定是10進(jìn)制
function parse2Int(num) {
    return parseInt(num,10);
}

相關(guān)知識(shí)點(diǎn)：

• parseInt

parseInt經(jīng)常用于強(qiáng)制類(lèi)型轉(zhuǎn)換中顯式轉(zhuǎn)換成數(shù)字吐句，接收兩個(gè)參數(shù)胁后，返回?cái)?shù)值或者NaN

parseInt(string, radix)
第一個(gè)參數(shù)是字符串，必須傳的嗦枢。
第二個(gè)參數(shù)是數(shù)字的基數(shù)攀芯，2-36，如果不傳或者傳0都是以10位基數(shù)來(lái)計(jì)算文虏，如果小于2(不等于0)或者大于36一律返回NaN侣诺，如果'0x'開(kāi)頭為16進(jìn)制，'0'開(kāi)頭不包括0是8進(jìn)制择葡。

parseInt強(qiáng)制類(lèi)型轉(zhuǎn)化的時(shí)候紧武，如果第一位不是數(shù)字就會(huì)返回NaN，如果第一位是數(shù)字敏储，那么會(huì)把后面是數(shù)字的返回阻星，不是數(shù)字的過(guò)濾掉。如果是小數(shù)的話，會(huì)向下取整成整數(shù)妥箕。

33. 完全等同

題目描述
判斷 val1 和 val2 是否完全等同

function identity(val1, val2) {
     return val1 === val2
}

相關(guān)知識(shí)點(diǎn)：

• 等同

== 和 === 的區(qū)別滥酥，簡(jiǎn)單來(lái)說(shuō)在于，== 只判斷值相同畦幢，遇到問(wèn)題坎吻，=== 還要判斷類(lèi)型是否相同。
這里其實(shí)我覺(jué)得還需要考慮NaN的問(wèn)題宇葱，NaN !== NaN

31. 正確的函數(shù)定義

題目描述
實(shí)現(xiàn)一個(gè)打點(diǎn)計(jì)時(shí)器瘦真，要求

1. 從 start 到 end（包含 start 和 end），每隔 100 毫秒 console.log 一個(gè)數(shù)字黍瞧，每次數(shù)字增幅為 1
2. 返回的對(duì)象中需要包含一個(gè) cancel 方法诸尽，用于停止定時(shí)操作
3. 第一個(gè)數(shù)需要立即輸出

function count(start, end) {
    // 第一個(gè)立即輸出
    console.log(start++)
    let time = setInterval(function () {
        if(start >= end) clearInterval(time)
        console.log(start++)
    },100)
    return {
        // 返回的方法是一個(gè)函數(shù)
        cancel: function () {
            clearInterval(time)
        }
    }
}

相關(guān)知識(shí)點(diǎn)：

• setInterval

計(jì)時(shí)器，如果第一個(gè)要立即輸出印颤，那么需要手動(dòng)寫(xiě)一次您机。
定義的時(shí)候接收兩個(gè)參數(shù)，第一個(gè)是每次執(zhí)行的函數(shù)年局，第二個(gè)是執(zhí)行時(shí)間間隔际看。
返回值接收計(jì)時(shí)器名稱(chēng)，可以用于清空計(jì)時(shí)器用矢否。

• 閉包

31. 流程控制

題目描述
實(shí)現(xiàn) fizzBuzz 函數(shù)仲闽，參數(shù) num 與返回值的關(guān)系如下：
1、如果 num 能同時(shí)被 3 和 5 整除兴喂，返回字符串 fizzbuzz
2蔼囊、如果 num 能被 3 整除，返回字符串 fizz
3衣迷、如果 num 能被 5 整除，返回字符串 buzz
4酱酬、如果參數(shù)為空或者不是 Number 類(lèi)型壶谒，返回 false
5、其余情況膳沽，返回參數(shù) num
輸入： 15 ; 輸出： fizzbuzz

function fizzBuzz(num) {
    // 如果num為空或者不傳汗菜，isNaN都為true
    if(isNaN(num)) return false
    if(num % 3 === 0 && num % 5 === 0) {
        return 'fizzbuzz'
    } else if (num % 3 === 0) {
        return 'fizz'
    } else if (num % 5 === 0) {
        return 'buzz'
    } else {
        return num
    }
}

相關(guān)知識(shí)點(diǎn)：

• 流程控制：if-else
• isNaN

isNaN()，遇到不是Number類(lèi)型的判斷都用這個(gè)函數(shù)挑社，如果參數(shù)不是數(shù)字就返回true陨界，其他的判斷我覺(jué)得都不是這個(gè)題要考的。ES6之后新增了方法Number.isNaN() 判斷是否是NaN

• 取余 %

36. 函數(shù)傳參

題目描述
將數(shù)組 arr 中的元素作為調(diào)用函數(shù) fn 的參數(shù)
輸入：
function (greeting, name, punctuation) {return greeting + ', ' + name + (punctuation || '!');}, ['Hello', 'Ellie', '!']
輸出：
Hello, Ellie!

// 方法一：量身定做痛阻，傳的是數(shù)組
function argsAsArray(fn, arr) {
    return fn.apply(this,arr)
}

// 方法二：如果用call就需要使用擴(kuò)展符打散
function argsAsArray(fn, arr) {
    return fn.call(this,...arr)
}

// 方法三：如果bind處理
function argsAsArray(fn, arr) {
    return fn.bind(this,...arr)()
}

相關(guān)知識(shí)點(diǎn)：

• apply/call/bind (詳情見(jiàn)一的第一題)
• fn傳參問(wèn)題

37. 函數(shù)的上下文

題目描述
將函數(shù) fn 的執(zhí)行上下文改為 obj 對(duì)象
輸入：
function () {return this.greeting + ', ' + this.name + '!!!';}, {greeting: 'Hello', name: 'Rebecca'}
輸出：Hello, Rebecca!!!

// 方法一：apply
function speak(fn, obj) {
    return fn.apply(obj)
}

// 方法一：call
function speak(fn, obj) {
    return fn.call(obj)
}

// 方法一：bind
function speak(fn, obj) {
    return fn.bind(obj)()
}

相關(guān)知識(shí)點(diǎn)：

• this指向

apply/call/bind 都可以修改執(zhí)行上下文菌瘪，如果直接調(diào)用fn，this指的是window，如果用 apply/call/bind 可以將this改成對(duì)象obj

38. 返回函數(shù)

題目描述
實(shí)現(xiàn)函數(shù) functionFunction俏扩，調(diào)用之后滿足如下條件：
1糜工、返回值為一個(gè)函數(shù) f
2、調(diào)用返回的函數(shù) f录淡，返回值為按照調(diào)用順序的參數(shù)拼接捌木，拼接字符為英文逗號(hào)加一個(gè)空格，即 ', '
3嫉戚、所有函數(shù)的參數(shù)數(shù)量為 1刨裆，且均為 String 類(lèi)型
輸入：
functionFunction('Hello')('world')
輸出： Hello, world

function functionFunction(str) {
    return function f(...arg) {
        // 記得逗號(hào)之后要加一個(gè)空格，才能過(guò)oj
        return str + ', '+arg
    }
}

相關(guān)知識(shí)點(diǎn)：

• 閉包 + 柯里化

閉包的作用是一個(gè)函數(shù)可以訪問(wèn)另一個(gè)函數(shù)作用域的變量彬檀。

39. 使用閉包

題目描述
實(shí)現(xiàn)函數(shù) makeClosures帆啃，調(diào)用之后滿足如下條件：
1、返回一個(gè)函數(shù)數(shù)組 result凤覆，長(zhǎng)度與 arr 相同
2链瓦、運(yùn)行 result 中第 i 個(gè)函數(shù)，即 result[i]()盯桦，結(jié)果與 fn(arr[i]) 相同
輸入：

[1, 2, 3], function (x) { 
  return x * x; 
}

輸出：4

// 閉包
function makeClosures(arr, fn) {
    let result = []
    for(let i = 0; i < arr.length; i++) {
        result.push(function(){
          return fn(arr[i])  
        })
    }
    return result
}

相關(guān)知識(shí)點(diǎn)：

• 閉包

上面的題慈俯，如果不用閉包，那么for循環(huán)的嘶吼拥峦，最后調(diào)用函數(shù)的時(shí)候贴膘，i都是arr.length,如果使用閉包，可以是當(dāng)時(shí)循環(huán)的i值略号。

40. 二次封裝函數(shù)

題目描述
已知函數(shù) fn 執(zhí)行需要 3 個(gè)參數(shù)刑峡。請(qǐng)實(shí)現(xiàn)函數(shù) partial，調(diào)用之后滿足如下條件：
1玄柠、返回一個(gè)函數(shù) result突梦，該函數(shù)接受一個(gè)參數(shù)
2、執(zhí)行 result(str3) 羽利，返回的結(jié)果與 fn(str1, str2, str3) 一致
輸入：
var sayIt = function(greeting, name, punctuation) { return greeting + ', ' + name + (punctuation || '!'); }; partial(sayIt, 'Hello', 'Ellie')('!!!');

輸出：Hello, Ellie!!!

// 方法一：直接調(diào)用宫患，因?yàn)闆](méi)有涉及到this，這里直接用arguments來(lái)獲取这弧，因?yàn)閍rguments是類(lèi)數(shù)組
function partial(fn, str1, str2) {
    return function result() {
        return fn(str1,str2,arguments[0])
    }
}

// 方法二：用擴(kuò)展運(yùn)算符拿到參數(shù)傳入娃闲，更加的通用
function partial(fn, str1, str2) {
    return function result(...arg) {
        return fn(str1,str2,arg)
    }
}

// 方法二：ES6箭頭函數(shù)，this指的是undefined
const partial = (fn, str1, str2) => str3 => fn(str1, str2, str3)

相關(guān)知識(shí)點(diǎn)：

• 閉包
• 獲取函數(shù)參數(shù)arguments

arguments 類(lèi)數(shù)組匾浪，
獲取長(zhǎng)度arguments.length
獲取元素用數(shù)組下標(biāo)arguments[0]
獲取當(dāng)前執(zhí)行的函數(shù) arguments.callee (ES5嚴(yán)格模式下禁用)

后面的東西可能會(huì)上一些小難度~~~