函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
1、函数简单介绍
函数就是包裹在花括号中的代码块，前面使用了关键词 function：
function functionname()
{
这里是要执行的代码
}
当调用该函数时，会执行函数内的代码。
可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。
调用带参数的函数
在调用函数时，您可以向其传递值，这些值被称为参数。
这些参数可以在函数中使用。
您可以发送任意多的参数，由逗号 (,) 分隔：
myFunction(argument1,argument2)
当您声明函数时，请把参数作为变量来声明：
function myFunction(var1,var2)
{
这里是要执行的代码
}
变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推。
带有返回值的函数
有时，我们会希望函数将值返回调用它的地方。
通过使用 return 语句就可以实现。
在使用 return 语句时，函数会停止执行，并返回指定的值。
语法
function myFunction()
{
var x=5;
return x;
}
上面的函数会返回值 5。
注释：整个 JavaScript 并不会停止执行，仅仅是函数。JavaScript 将继续执行代码，从调用函数的地方。
函数调用将被返回值取代：
var myVar=myFunction();
myVar 变量的值是 5，也就是函数 "myFunction()" 所返回的值。
即使不把它保存为变量，您也可以使用返回值：
document.getElementById("demo").innerHTML=myFunction();
"demo" 元素的 innerHTML 将成为 5，也就是函数 "myFunction()" 所返回的值。
您可以使返回值基于传递到函数中的参数：
实例
计算两个数字的乘积，并返回结果：
function myFunction(a,b)
{
return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);
"demo" 元素的 innerHTML 将是：12
2、回调函数小练习
var arr = [10,33,44,55,88,20,32]
第一层回调函数 在不不修改本身情况下 每个val 加10
第二层回调函数 在不不修改本身情况下 每个val * 10
第三层回调函数 过滤掉所以 ⼩小于400 的值
第四层回调 求平均数
3、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
var arr = [10,33,44,55,88,20,32];
// map();结束要加分号
// 回调函数
function m(Arr){
let arr=Arr;
// 第一层
(function(A){
// console.log(A);
let B= A.map((val)=>{
return val+10;
});
// 第二层
(function(A){
let B= A.map((val)=>{
return val*10;
});
// 第三层
(function(A){
let B= A.filter((val )=>{
return val<400;
});
console.log(B);
})(B)
console.log(B);
})(B)
console.log(B);
})(arr)
console.log(arr);
}
m(arr);
</script>
</body>
</html>
array.map();方法：映射。
arra.filter();方法：过滤。
4、总结
其实回调函数，并没有我们想象的那么难，只要分析到位，逻辑思路清晰，就能写出实现想要效果的回调函数。
网友评论