[譯]JavaScript 中的頭等函數

簡介

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...