回调函数

2018-10-23  本文已影响6人  陶菇凉

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

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、总结

其实回调函数,并没有我们想象的那么难,只要分析到位,逻辑思路清晰,就能写出实现想要效果的回调函数。

上一篇 下一篇

猜你喜欢

热点阅读