前言

一般情况下,想要再次得到函数内部的结果,我们会采用回调函数的方式来获取,同样的回调函数也可以获取函数内部的异步操作的结果。

封装异步API

一般情况下,将函数作为参数就是为了获取函数内部的异步操作的结果

function fn(callback){
	// var callback = function(data) { console.log(data)}
	setTimeout(function(){
		var data = 'hello';
		callback(data);
	},1000)
}
// 如果需要获取一个函数中异步操作的结果,则必须通过回调函数来获取
fn(function(data){
	console.log(data);
})

同样ajax的封装也是:

function get(url, callback){
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.status === 200 && xmlhttp.readyState == 4) {
            callback(xmlhttp.responseText);
        }
    }
}

get('a.js', function(data){
    console.log(data);
})

EcmaScript 6 新增了很多新的方法,这些函数都需要传入一个函数作为参数,这个参数就是为了执行封装函数内部的方法,比如find和findIndex方法。

find
findIndex

find() 和 findIndex()


// find  和 findIndex 接收一个方法作为参数,方法内部返回一个条件
// find  和 findIndex 会遍历所有的元素,执行给定的带有条件返回的函数
// 符合该条件的元素就会作为 find 和 findIndex 方法的返回值

Array.prototype.myFind = function(conditionFunc){
    // 只要调用myFinde函数,就会遍历对象 users 的每一项
    for(var i = 0 ; i < this.length; i++){
    	// 在判断的时候,都会调用 conditionFunc 这个参数作为的函数
        if(conditionFunc(this[i])){
            return this[i];
        }
    }
}

Array.prototype.myFindIndex = function(conditionFunc){
	// 只要调用 myFindIndex 函数,就会遍历对象 users 的每一项
    for(var i = 0; i < this.length; i++){
        if(conditionFunc(this[i])){
            return i;
        }
    }
}

测试:

var users = [
    {id: 0, name: '小明'},
    {id: 1, name: '小明'},
    {id: 2, name: '小明'},
    {id: 3, name: '小红'}
]

// 查找符合id为2的对象
var retFind = users.myFind(function(item){
    return item.id === 2;
})
// 查找符合name为小红的对象所在的索引
var retFindIndex = users.myFindIndex(function(item){
    return item.name === '小红';
})

console.log(retFind);  // { id: 2, name: '小明' }
console.log(retFindIndex); // 3
Logo

CSDN联合极客时间,共同打造面向开发者的精品内容学习社区,助力成长!

更多推荐