JavaScript五個常用功能是什么

這篇文章主要介紹“JavaScript五個常用功能是什么”，在日常操作中，相信很多人在JavaScript五個常用功能是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”JavaScript五個常用功能是什么”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

一、計時器

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

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

2、返回的對象中需要包含一個 cancel 方法，用于停止定時操作

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

function count(start, end) {
    console.log(start++); 
    let timer = setInterval(() => {
        if (start  {
            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五個常用功能是什么”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！