[译]JavaScript 中的头等函数

1,605 阅读2分钟

简介

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