简介
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