牛客網這個前端筆試題庫，能夠說這60道是最基礎的了，也是考察的東西比較雜，有時間4天差很少就能夠刷完，鞏固基礎仍是有些用的。作完題回顧一上午就能夠過完一遍。如今我結合個人答案和參考的其餘人的答案，在這裏作一個總結，也是本身知識的整理結果。數組

31. 正確的函數定義

題目描述
請修復給定的 js 代碼中，函數定義存在的問題輸入：true
輸出：amarkdown

function functions(flag) {
    if (flag) {
      function getValue() { return 'a'; }
    } else {
      function getValue() { return 'b'; }
    }
    return getValue();
}
複製代碼

// 方法一：使用函數表達式
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();
}
複製代碼

相關知識點：閉包

函數的定義方式

函數聲明式：函數聲明在函數沒有執行以前就已經在做用域中會提高，同名的聲明會進行覆蓋，如下面的爲準，那麼程序執行的時候一直輸出的就是b。app

函數表達式：使用函數表達式，仍是會進行變量的提高，只不過此次提高的是變量getValue，在執行的時候，纔會根據if語句的流程控制執行不一樣的函數。ide

32. 正確的使用 parseInt

題目描述
修改 js 代碼中 parseInt 的調用方式，使之經過所有測試用例
輸入：'12' 輸出：12
輸入： '12px' 輸出：12
輸入： '0x12' 輸出：0函數

// 方法，肯定是10進制
function parse2Int(num) {
    return parseInt(num,10);
}
複製代碼

相關知識點：oop

parseInt

parseInt常常用於強制類型轉換中顯式轉換成數字，接收兩個參數，返回數值或者NaNpost

parseInt(string, radix)
第一個參數是字符串，必須傳的。
第二個參數是數字的基數，2-36，若是不傳或者傳0都是以10位基數來計算，若是小於2(不等於0)或者大於36一概返回NaN，若是'0x'開頭爲16進制，'0'開頭不包括0是8進制。測試

parseInt強制類型轉化的時候，若是第一位不是數字就會返回NaN，若是第一位是數字，那麼會把後面是數字的返回，不是數字的過濾掉。若是是小數的話，會向下取整成整數。

33. 徹底等同

題目描述
判斷 val1 和 val2 是否徹底等同

function identity(val1, val2) {
     return val1 === val2
}
複製代碼

相關知識點：

等同

== 和 === 的區別，簡單來講在於，== 只判斷值相同，遇到問題，=== 還要判斷類型是否相同。這裏其實我以爲還須要考慮NaN的問題，NaN !== NaN

34. 正確的函數定義

題目描述
實現一個打點計時器，要求

從 start 到 end（包含 start 和 end），每隔 100 毫秒 console.log 一個數字，每次數字增幅爲 1

返回的對象中須要包含一個 cancel 方法，用於中止定時操做

第一個數須要當即輸出

function count(start, end) {
    // 第一個當即輸出
    console.log(start++)
    let time = setInterval(function () {
        if(start >= end) clearInterval(time)
        console.log(start++)
    },100)
    return {
        // 返回的方法是一個函數
        cancel: function () {
            clearInterval(time)
        }
    }
}
複製代碼

相關知識點：

setInterval

計時器，若是第一個要當即輸出，那麼須要手動寫一次。
定義的時候接收兩個參數，第一個是每次執行的函數，第二個是執行時間間隔。
返回值接收計時器名稱，能夠用於清空計時器用。

閉包

35. 流程控制

題目描述
實現 fizzBuzz 函數，參數 num 與返回值的關係以下：
一、若是 num 能同時被 3 和 5 整除，返回字符串 fizzbuzz
二、若是 num 能被 3 整除，返回字符串 fizz
三、若是 num 能被 5 整除，返回字符串 buzz
四、若是參數爲空或者不是 Number 類型，返回 false
五、其他狀況，返回參數 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
    }
}
複製代碼

相關知識點：

流程控制：if-else
isNaN

isNaN()，遇到不是Number類型的判斷都用這個函數，若是參數不是數字就返回true，其餘的判斷我以爲都不是這個題要考的。ES6以後新增了方法Number.isNaN() 判斷是不是NaN

取餘 %

36. 函數傳參

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

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

// 方法二：若是用call就須要使用擴展符打散
function argsAsArray(fn, arr) {
    return fn.call(this,...arr)
}

// 方法三：若是bind處理
function argsAsArray(fn, arr) {
    return fn.bind(this,...arr)()
}
複製代碼

相關知識點：

apply/call/bind (詳情見一的第一題)
fn傳參問題

37. 函數的上下文

題目描述
將函數 fn 的執行上下文改成 obj 對象輸入：
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)()
}
複製代碼

相關知識點：

this指向

apply/call/bind 均可以修改執行上下文，若是直接調用fn，this指的是window，若是用 apply/call/bind 能夠將this改爲對象obj

38. 返回函數

題目描述
實現函數 functionFunction，調用以後知足以下條件：
一、返回值爲一個函數 f
二、調用返回的函數 f，返回值爲按照調用順序的參數拼接，拼接字符爲英文逗號加一個空格，即 ', '
三、全部函數的參數數量爲 1，且均爲 String 類型
輸入：
functionFunction('Hello')('world')
輸出： Hello, world

function functionFunction(str) {
    return function f(...arg) {
        // 記得逗號以後要加一個空格，才能過oj
        return str + ', '+arg
    }
}
複製代碼

相關知識點：

閉包 + 柯里化

閉包是一個函數能夠訪問另外一個函數做用域的變量。

39. 使用閉包

題目描述
實現函數 makeClosures，調用以後知足以下條件：
一、返回一個函數數組 result，長度與 arr 相同
二、運行 result 中第 i 個函數，即 result[i]()，結果與 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
}
複製代碼

相關知識點：

閉包

上面的題，若是不用閉包，那麼for循環的嘶吼，最後調用函數的時候，i都是arr.length,若是使用閉包，能夠是當時循環的i值。

40. 二次封裝函數

題目描述
已知函數 fn 執行須要 3 個參數。請實現函數 partial，調用以後知足以下條件：
一、返回一個函數 result，該函數接受一個參數
二、執行 result(str3) ，返回的結果與 fn(str1, str2, str3) 一致
輸入：
var sayIt = function(greeting, name, punctuation) { return greeting + ', ' + name + (punctuation || '!'); }; partial(sayIt, 'Hello', 'Ellie')('!!!');

輸出：Hello, Ellie!!!

// 方法一：直接調用，由於沒有涉及到this，這裏直接用arguments來獲取，由於arguments是類數組
function partial(fn, str1, str2) {
    return function result() {
        return fn(str1,str2,arguments[0])
    }
}

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

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

相關知識點：

閉包
獲取函數參數arguments

arguments 類數組，
獲取長度arguments.length
獲取元素用數組下標arguments[0]
獲取當前執行的函數 arguments.callee (ES5嚴格模式下禁用)

後面的東西可能會上一些小難度~~~

前端刷題 —— 牛客網前端題庫60道詳解(四)

目錄

引言

31. 正確的函數定義

32. 正確的使用 parseInt

33. 徹底等同

34. 正確的函數定義

35. 流程控制

36. 函數傳參

37. 函數的上下文

38. 返回函數

39. 使用閉包

40. 二次封裝函數