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

本篇文章為大家帶來了關於JavaScript的相關知識，其中主要介紹了五個常用功能及其範例，包括了計時器、流程控制、閉包應用、arguments剩餘參數以及二次封裝函數的相關問題，下面一起來看看，希望對大家有幫助。

【相關推薦：javascript影片教學、web前端】

##一、計時器

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

1、從

start 到end（包含 和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這個定時器的原因。

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

二、流程控制

實作

fizzBu​​zz 函數，參數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视频教程、web前端】

以上是JavaScript五個常用功能範例（總結分享）的詳細內容。更多資訊請關注PHP中文網其他相關文章！