JavaScript,难点难点回调函数!!!

紧接上文,先说说数组

数组的迭代方法

  • sort() ASCII升序
    sort(function(a,b){return a - b}) 升序
    sort(function(a,b){return b - a}) 降序
  • forEach(function(v,i,arr){}) 遍历数组
  • map(function(v,i,arr){}) 改变数组中的值,返回一个新的数组 必须return
  • filter(function(v,i,arr){}) 过滤器,找到满足条件的值,返回一个新的数组(经常用)
  • every(function(v,i){}) 判断数组中是不是每一个值都满足条件
  • some(function(v,i){}) 判断数组中有没有满足条件的值

在这里给大家封装一个filter方法

    //封装filter方法,参数cb为函数
        function filter(cb) {
            //遍历数组
            for (var i = 0, arr1 = []; i < arr.length; i++) {
                if (cb(arr[i])) { //判断中调用函数cb,arr[i]为实参,返回arr[i]<7
                    arr1.push(arr[i])
                }
            }
            console.log(arr1)
        }
        filter(function(v) {
            return v < 7
        })
复制代码

里面出现了简单的回调函数。下面说说什么是回调函数。

回调函数

定义:callback:回调函数,把一个函数当做另一个函数的参数。
注意注意要分清实参与形参
形参:在定义函数时,函数名后面的参数,没有实际意义
实参:在函数调用时,函数后面的参数\

例如拿个通俗易懂的例子来说,

function buyCar(car) {  
        console.log('买一个' + car);
         }
    buyCar('跑车')  
复制代码

这里是个简简单单的函数调用,结果在控制台打印 跑车

看下面这个,car在函数buycar里面是什么,是不是一个函数,作为形参的函数
但是看下面的函数buycar调用的时候,里面的参数不是值,而是有作为实参的函数
接着将作为实参的函数传递到函数buycar里面,下一步就到了函数buycar内部,car()开始调用,然后就执行console.log('兰博基尼');

function buyCar(car) {
            car()
        }
        buyCar(function() {
            console.log('兰博基尼');
        })
复制代码

这里也是个简简单单的会回调函数,测试结果为在控制台打印兰博基尼。

可能还是懵懵懂懂,不过不要紧,但是要懂得运用上面的数组的迭代方法,好好记住!!!自然而然就理解回调函数了。

接下来举个难点的例子。

分析下面这个程序,函数map的形参cb(callback的简称)是一个函数。
调用函数map的时候,里面的实参是不是一个函数,并且我们可以看到这个实参是有参数V的,这里的v可是形参。
传递到函数map之后,在函数内部出现cb(),又继续调用cb函数,返回v+1也就是,在这里arr[i]是形参哈。传参后,也就是返回arr[i]+1

function map(cb) {
            //遍历数组
            for (var i = 0; i < arr.length; i++) {
                arr[i] = cb(arr[i]) //调用cb函数,arr[i]为实参,返回arr[i]+1
            }
            console.log(arr);
        }
        map(function(v) { //这里v为形参
            return v + 1;
        })
复制代码

这也就是封装数组的迭代方法中的map方法。改变数组中的值,返回一个新的数组 必须return

猜你喜欢

转载自juejin.im/post/7042966505297805349
今日推荐