本篇文章為大家帶來了關於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函數被銷毀），這就是可以在外部呼叫cancel清除timer這個定時器的原因。
閉包是指有權存取另一個函數作用域中的局部變數的函數。宣告在一個函數中的函數，叫做閉包函數。而且內部函數總是可以存取其所在的外部函數中聲明的參數和變量，即使在其外部函數被返回（壽命終結）了之後。
二、流程控制
實作
fizzBuzz 函數，參數num 與傳回值的關係如下： 1、如果
num 能同時被3 和5 整除，回傳字串fizzbuzz
num 能被3 整除，回傳字串fizz
num 能被5 整除，回傳字串buzz
Number 類型，返回false
num
#範例：
這就是簡單的分支判斷：
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 型，不需考慮參數轉換。
解：
function useArguments() {
return [...arguments].reduce((a, b) => a + b);}登入後複製
函數中能直接存取
arguments變量，這個變數是一個含有該函數接收的所有參數的偽數組 （不具有數組的全部方法）。
所以我是先使用
...解構來將arguments轉換成一個真正的數組，之後調用數組的reduce求和方法進行求和即可。
reduce() 方法對陣列中的每個元素依序執行一個由您提供的reducer 函數，每次執行reducer會將先前元素的計算結果作為參數傳入，最後將其結果匯總為單一回傳值。
Array.prototype.reduce(callbackFn, initialValue)
登入後複製
參數：
五、二次封装函数
实现函数 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中文網其他相關文章！
