[譯]JavaScript中的頭等函數

NO IMAGE

簡介

JavaScript 具有頭等函數(first-class functions)。這意味著函數可以像其他值一樣被處理,這對於 JavaScript 開發人員來說是非常重要。頭等函數具有以下三點特徵:

  • 將函數賦值給變量
  • 函數作為函數參數
  • 函數作為函數返回值

將函數賦值給變量

我們來創建一個返回 "Hello" 文本的函數,並將其賦值給變量 sayHello

const sayHello = () => {
return 'Hello';
};
console.log(sayHello());
// "Hello"

非常基礎!我們繼續。

函數作為函數參數

我們使用前面的 sayHello 函數並將其作為參數傳遞給另一個函數。這個函數會向某人打個招呼。

const sayHelloToPerson = (greeter, person) => {
return greeter() + ' ' + person;
};
console.log(sayHelloToPerson(sayHello, 'John'));
// Hello John

當我們將 sayHello 函數傳遞給 sayHelloToPerson 函數時會發生什麼:sayHelloToPerson 裡的變量指向了內存中的 sayHello 函數。當調用 greeter() ,會執行函數。

函數作為函數返回值

也許我們不想總說 "Hello",而是希望可以選擇不同類型的問候語。這時我們可以創建更多的功能。

const greeterMaker = greeting => {
return person => {
return greeting + ' ' + person;
};
};
const sayHelloToPerson = greeterMaker('Hello');
const sayHowdyToPerson = greeterMaker('Howdy');
console.log(sayHelloToPerson('Joanne'));
// "Hello Joanne"
console.log(sayHowdyToPerson('Joanne'));
// "Howdy Joanne"

greeterMaker 是一個創建函數的函數。

實際應用舉粟

以上我們瞭解了頭等函數的基本知識,下面我們來看一下實際應用吧!

對象驗證

一個對象(如:新用戶信息)需要通過你的一套標準驗證才能認為是「有效的」。這時我們可以創建一個函數來驗證是否與標準一致。

const usernameLongEnough = obj => {
return obj.username.length >= 5;
};
const passwordsMatch = obj => {
return obj.password === obj.confirmPassword;
};
const objectIsValid = (obj, ...funcs) => {
for (let i = 0; i < funcs.length; i++) {
if (funcs[i](obj) === false) {
return false;
}
}
return true;
};
const obj1 = {
username: 'abc123',
password: 'foobar',
confirmPassword: 'foobar',
};
const obj1Valid = objectIsValid(obj1, usernameLongEnough, passwordsMatch);
console.log(obj1Valid);
// true
const obj2 = {
username: 'joe555',
password: 'foobar',
confirmPassword: 'oops',
};
const obj2Valid = objectIsValid(obj2, usernameLongEnough, passwordsMatch);
console.log(obj2Valid);
// false

API 密鑰關閉

也許我們有這樣的情況,需要通過 API 密鑰訪問 API。我們可以在每個請求上添加此密鑰,或者,我們可以創建一個函數,該函數以 API 密鑰做為參數並返回包含每個 API 密鑰請求的函數。

重要提示:不要將 API 密鑰放在前端代碼中。假設以下代碼位於節點的後端。

const apiConnect = apiKey => {
const getData = route => {
return axios.get(`${route}?key=${apiKey}`);
};
const postData = (route, params) => {
return axios.post(route, {
body: JSON.stringify(params),
headers: {
Authorization: `Bearer ${apiKey}`,
},
});
};
return { getData, postData };
};
const api = apiConnect('my-secret-key');
// No need to include the apiKey anymore
api.getData('http://www.example.com/get-endpoint');
api.postData('http://www.example.com/post-endpoint', { name: 'Joe' });

總結

好了,你已經看到 JavaScript 中函數是頭等函數了,以及在開發中的重要性。我建議在你的代碼中多多練習使用。

參考:Fundebug 掘金

譯者:Mark Wong

原文:nick.scialli.me/first…

相關文章

[ts基礎]如何編寫一個ts聲明文件(xxx.d.ts)

JavaScript優雅寫法及騷操作記錄

Vue實現剪貼板複製功能

Vue+Element二次封裝axios為插件使用