回调函数

一、回调函数-callback

回调函数就是一个被作为参数传递的函数。

// 把函数 b 当作参数传递到 函数 a 中
// 在函数 a 中以行参的方式进行调用
function a(cb) {
  cb()
}

function b() {
  console.log('我是函数 b')
}

a(b)

之前我们接触过很多类似的形式

例如：数组的方法 forEach() 、filter() 、map() 等方法都是传入一个函数作为参数，这其实就是回调函数

分析 forEach() 的实现

forEach() 使用

var arr = [34,71,85];
arr.forEach(function(v,i,a){
    console.log(v,i,a); // 34 0 [34, 71, 85]
						// 71 1 [34, 71, 85]
						// 85 2 [34, 71, 85]
});

其实底层还是把数组循环了一遍，并且在回调函数中传递每个数组的值和索引和数组本身

普通方法仿写froEach()

// 封装
function forEach(arr,fn){
    for(let i=0;i<arr.length;i++){
        fn(arr[i],i,arr);
    }

}

// 调用
forEach(arr,function(v,i,a){
    console.log(v,i,a); // 34 0 [34, 71, 85]
						// 71 1 [34, 71, 85]
						// 85 2 [34, 71, 85]
});

这里个和上面用forEach()的输出完全一致

只不过在调用方法和上面的不一样，

在Array的原型里仿写forEac()

// 原型方法中的this指向实例对象
// 调用
Array.prototype._forEach = function(fn){
	for(let i=0;i<this.length;i++){
		fn(this[i],i,this);
	}
}

// 调用
arr._forEach(function(v,i,a){
	console.log(v,i,a); // 34 0 [34, 71, 85]
						// 71 1 [34, 71, 85]
						// 85 2 [34, 71, 85]
});

仿写filter()

let arr = [1, 2, 3, 4]
Array.prototype._filter = function (cb) {
    let newArr = []
    let flag = null
    for (let i = 0; i < this.length; i++) {
        flag = cb(this[i], i, this)
        if (flag) {
            newArr.push(this[i])
        }
    }
    return newArr
}

let arr2 = arr._filter((item, index, arr) => {
    return item > 2
})
console.log(arr2);      //[3,4]

仿写map()

let arr1 = [1,2,3,4,5];

Array.prototype._map=function(cb){
    let newArr=[]
    let flag=null
    for(let i=0;i<this.length;i++){
        flag = cb(this[i],i,this)
        if(flag){
            newArr.push(flag)
        }
    }
    return newArr
}

let arr3 = arr1._map(function (value, index, arr) {
    //参数1：数组的值；参数2：值的下标；参数3：数组本身
    return value*2;
});
console.log(arr3); // [2，4，6，8，10]

二、ajax封装

/**
         * 封装 ajax请求
         * @date 2022-09-13
         * @param {请求方式get或post} method
         * @param {请求接口地址} url
         * @param {同步异步} any
         * @param {object参数} data
         * @param {回调函数} callback
         * @returns {没有返回值undefined}
         */
function $ajax(method, url, any, data, callback) {
    let queryMsg = '?'
    for (let i in data) {
        queryMsg += i + '=' + data[i] + '&'
    }
    queryMsg = queryMsg.substr(0, queryMsg.length - 1)
    let xhr = new XMLHttpRequest()
    //get方法，有参和无参
    if (method === 'get') {
        xhr.open('get', url + queryMsg, any)
    } else {
        xhr.open('post', url, any) 
    }
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                let res = JSON.parse(xhr.responseText)
                callback(res)
            }
        }
    }
    if (method === 'get') {
        xhr.send(null)
    } else {
        xhr.setRequestHeader('content-type', 'application/json');
        xhr.send(JSON.stringify(data));
    }

}