JavaScript五個常用功能範例（總結分享）

前端（vue）入門到精通課程：進入學習
API 檔案、設計、偵錯、自動化測試一體化共同作業工具：

【相關推薦：、】

一、計時器

實現一個打點計時器，要求：

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

2、返回的物件中需要包含一個 cancel 方法，用於停止定時操作

3、第一個數需要立即輸出

function count(start, end) {
    console.log(start++); 
    let timer = setInterval(() => {
        if (start <= end) {
            console.log(start++);
        }
    }, 100);
    return {
        cancel: () => {
            clearInterval(timer);
        },
    };}

第一個數立即輸出，console.log(start++) 中start++是先輸出再自加1。

之後使用setInterval定時器，count函數return出cancel，cancel內是一個清除定時器的操作（參照了timer這個在count函數中宣告的變數），這裡用到了閉包的知識。

cancel是一個閉包函數，它能存取count函數中的變數timer，這時這個timer不會被JS垃圾回收機制清除（會永駐記憶體，即使count函數被銷燬），這就是可以在外部呼叫cancel清除timer這個定時器的原因。

閉包是指有權存取另外一個函數作用域中的區域性變數的函數。宣告在一個函數中的函數，叫做閉包函數。而且內部函數總是可以存取其所在的外部函數中宣告的引數和變數，即使在其外部函數被返回（壽命終結）了之後。

二、流程控制

實現 fizzBuzz 函數，引數 num 與返回值的關係如下：
1、如果 num 能同時被 3 和 5 整除，返回字串 fizzbuzz
2、如果 num 能被 3 整除，返回字串 fizz
3、如果 num 能被 5 整除，返回字串 buzz
4、如果引數為空或者不是 Number 型別，返回 false
5、其餘情況，返回引數 num

範例：

輸入：15輸出：fizzbuzz

這就是簡單的分支判斷：

function fizzBuzz(num) {
    if (!num || typeof num !== "number") return false;
    
    if (num % 3 === 0 && num % 5 === 0) return "fizzbuzz";

    if (num % 3 === 0) return "fizz";

    if (num % 5 === 0) return "buzz";

    return num;}

三、閉包應用

實現函數 makeClosures，呼叫之後滿足如下條件：
1、返回一個函數陣列 result，長度與 arr 相同
2、執行 result 中第 i 個函數，即 result[i]()，結果與 fn(arr[i]) 相同

範例：

var arr = [1, 2, 3];var fn = function (x) {
    return x * x;};var result = makeClosures(arr, fn);result[1]() === fn(arr[1]) ? console.log("yes") === 4 : console.log("no"); // yes

解：

function makeClosures(arr, fn) {
    const result = []
    arr.forEach(item=>{
        result.push(function(){
            return fn(item)
        })
    })
    return result}

這題一眼看上去感覺是比較繞，但你從上到下去梳理就很容易找到解決的方法：

• makeClosures返回一個陣列
• 陣列中每個元素都是一個函數
• 並且這些函數執行的結果要與使用arr中對應元素作為引數呼叫fn的結果一致

四、arguments剩餘引數

函數 useArguments 可以接收 1 個及以上的引數。請實現函數 useArguments，返回所有呼叫引數相加後的結果。本題的測試引數全部為 Number 型別，不需考慮引數轉換。

輸入：1, 2, 3, 4輸出：10

解：

function useArguments() {
    return [...arguments].reduce((a, b) => a + b);}

函數中能直接存取arguments變數，這個變數是一個含有該函數接收的所有引數的偽陣列（不具有陣列的全部方法）。

所以我是先使用...解構來將arguments轉換成一個真正的陣列，之後呼叫陣列的reduce求和方法進行求和即可。

reduce() 方法對陣列中的每個元素按序執行一個由您提供的 reducer 函數，每一次執行 reducer 會將先前元素的計算結果作為引數傳入，最後將其結果彙總為單個返回值。

Array.prototype.reduce(callbackFn, initialValue)

引數：

• callbackFn
  一個 「reducer」 函數，包含四個引數：

  • previousValue：上一次呼叫 callbackFn 時的返回值。在第一次呼叫時，若指定了初始值 initialValue，其值則為 initialValue，否則為陣列索引為 0 的元素 array[0]。
  • currentValue：陣列中正在處理的元素。在第一次呼叫時，若指定了初始值 initialValue，其值則為陣列索引為 0 的元素 array[0]，否則為 array[1]。
  • currentIndex：陣列中正在處理的元素的索引。若指定了初始值
  • initialValue，則起始索引號為 0，否則從索引 1 起始。
  • array：用於遍歷的陣列。

• initialValue 可選
  作為第一次呼叫 callback 函數時引數 previousValue 的值。若指定了初始值 initialValue，則 currentValue 則將使用陣列第一個元素；否則 previousValue 將使用陣列第一個元素，而 currentValue 將使用陣列第二個元素。

五、二次封裝函數

實現函數 partialUsingArguments，呼叫之後滿足如下條件：
1、返回一個函數 result
2、呼叫 result 之後，返回的結果與呼叫函數 fn 的結果一致
3、fn 的呼叫引數為 partialUsingArguments 的第一個引數之後的全部引數以及 result 的呼叫引數

解：

function partialUsingArguments(fn) {
  const arr = [].slice.call(arguments,1)
  return function (...arr2) { // ...arr2表示用arr2接收所有引數，arr2是一個陣列
      return fn(...arr,...arr2)
  }}

第一個arr陣列表示的是partialUsingArguments接收的第一個引數之後的全部引數陣列。

因為arguments是偽陣列，不具有slice方法，所以這裡通過隨便一個陣列（我選的是空陣列[]）來呼叫slice，然後通過call修改呼叫的這個slice的this指向，使其指向到arguments，這樣就相當於是在arguments上使用slice方法。

call修改函數this指向並立即呼叫該函數，call第一個參數列示需要修改的this指向，之後的所有引數都會作為原函數的引數傳遞到原函數中。

slice(begin,end) 方法能切割陣列，返回一個新的陣列物件，這一物件是一個由 begin 和 end 決定的原陣列的淺拷貝（包括 begin，不包括end）。原始陣列不會被改變。
不加end參數列示從 begin一直切割到最後。

【相關推薦：、】

以上就是JavaScript五個常用功能範例（總結分享）的詳細內容，更多請關注TW511.COM其它相關文章！