本文已经过原作者 dmitripavlutin 授权翻译，今天小编就来聊一聊关于回调函数是什么javascript?接下来我们就一起去研究一下吧!
回调函数是什么javascript
本文已经过原作者 dmitripavlutin 授权翻译！
回调函数是每个 JS 开发人员都应该知道的概念之一。回调用于数组，计时器函数，promise，事件处理程序等中。
在本文中，会解释回调函数的概念。另外，还会帮助智米们区分两种回调：同步和异步。
1.回调函数我们编写一个问候的函数，首先创建一个函数greet(name)，该函数返回欢迎消息：
functiongreet(name){
return`Hello,${name}!`;
}
greet('小智');//=>'Hello,小智!'
如果要向一些人问候怎么做？这里，我们可以使用 array.map() 方法：
constpersons=['小智','王大冶']
constmessages=persons.map(greet)
messages//["Hello,小智!","Hello,王大冶!"]
persons.map(greet)接受person数组的每一项，并使用每一项作为调用参数来调用函数greet()：greet('小智')，greet('王大冶')。
有趣的是persons.map(greet)方法接受greet()函数作为参数。这样做会使reet()成为回调函数。
persons.map(greet)是一个接受另一个函数作为参数的函数，因此将其命名为高阶函数。
高阶函数承担调用回调函数的全部责任，并为其提供正确的参数。
在前面的示例中，高阶函数persons.map(greet)负责调用greet()回调函数，并将数组的每个项目作为参数：'小智'和'王大冶'。
我们可以可以自己编写使用回调的高阶函数。例如，这里有一个等价的array.map()方法
functionmap(array,callback){
constmappedArray=[];
for(constitemofarray){
mappedArray.push(
callback(item)
);
}
returnmappedArray;
}
functiongreet(name){
return`Hello,${name}!`;
}
constpersons=['小智','王大冶']
constmessages=map(persons,greet);
messages//["Hello,小智!","Hello,王大冶!"]
map(array, callback)是一个高阶函数，因为它接受回调函数作为参数，然后在它的函数体内部调用回调函数:callback(item)。
2.同步回调回调的调用方式有两种：同步和异步回调。
同步回调是在使用回调的高阶函数执行期间执行的。
换句话说，同步回调处于阻塞状态：高阶函数要等到回调完成执行后才能完成其执行。
functionmap(array,callback){ console.log('map()开始'); constmappedArray=[]; for(constitemofarray){mappedArray.push(callback(item))} console.log('map()完成'); returnmappedArray; } functiongreet(name){ console.log('greet()被调用'); return`Hello,${name}!`; } constpersons=['小智']; map(persons,greet); //map()开始 //greet()被调用 //map()完成greet()是一个同步回调函数，因为它与高阶函数map()同时执行。
2.1 同步回调的例子很多原生 JavaScript 类型的方法都使用同步回调。
最常用的是数组方法，例如array.map(callback)，array.forEach(callback)，array.find(callback)，array.filter(callback)，array.reduce(callback, init)：
3.异步回调
//数组上的同步回调的示例 constpersons=['小智','前端小智'] persons.forEach( functioncallback(name){ console.log(name); } ); //小智 //前端小智 constnameStartingA=persons.find( functioncallback(name){ returnname[0].toLowerCase()==='小'; } ) //nameStartingA//小智 constcountStartingA=persons.reduce( functioncallback(count,name){ conststartsA=name[0].toLowerCase()==='小'; returnstartsA?count 1:count; }, 0 ); countStartingA//1异步回调在执行高阶函数之后执行。
简而言之，异步回调是非阻塞的：高阶函数无需等待回调即可完成其执行，高阶函数可确保稍后在特定事件上执行回调。
在下面的示例中，later()函数的执行延迟为2秒
3.1 异步回调的示例
console.log('setTimeout()开始') setTimeout(functionlater(){ console.log('later()被调用') },2000) console.log('setTimeout()完成') //setTimeout()开始 //setTimeout()完成 //later()被调用(2秒后)计时器函数的异步回调：
setTimeout(functionlater(){ console.log('2秒过去了!'); },2000); setInterval(functionrepeat(){ console.log('每2秒'); },2000);DOM 事件监听器也是异步调用事件处理函数(回调函数的一种子类型)
4. 异步回调函数 vs 异步函数
constmyButton=document.getElementById('myButton'); myButton.addEventListener('click',functionhandler(){ console.log('我被点击啦!'); }) //点击按钮时，才会打印'我被点击啦!'放在函数定义之前的特殊关键字async创建一个异步函数：
asyncfunctionfetchUserNames(){ constresp=awaitfetch('https://api.github.com/users?per_page=5'); constusers=awaitresp.json(); constnames=users.map(({login})=>login); console.log(names); }fetchUserNames()是异步的，因为它的前缀是async。该函数await fetch('https://api.github.com/users?per_page=5')从 GitHub 前5个用户。然后从响应对象中提取 JSON 数据：await resp.json()。
async函数是 Promise 的语法糖。当遇到表达式await <promise>时（注意，调用fetch()将返回一个 promise），异步函数将暂停执行直到该promise得以解决。
异步回调函数和异步函数是不同的术语。
异步回调函数由高阶函数以非阻塞方式执行。但是异步函数在等待promise（await <promise>）解析时暂停其执行。
但是，我们可以将异步函数用作异步回调！
我们异步函数fetchUserNames()设为单击按钮时调用的异步回调：
总结
constbutton=document.getElementById('fetchUsersButton'); button.addEventListener('click',fetchUserNames);回调是一个可以作为参数接受并由另一个函数（高阶函数）执行的函数.
有两种回调函数:同步和异步。
同步回调函数与使用回调函数的高阶函数同时执行，同步回调是阻塞的。另一方面，异步回调的执行时间比高阶函数的执行时间晚，异步回调是非阻塞的。
完~，感谢大家的观看，我是小智，我去刷碗啦！
作者：Shadeed 译者：前端小智 来源：dmitripavlutin 原文：https://dmitripavlutin.com/javascript-variables-practices/
,
