[JavaScript] Les nouveaux principes find () et findIndex () dans l'API asynchrone ES6 encapsulent

Préface

Dans des circonstances normales, si nous voulons récupérer le résultat dans la fonction, nous utiliserons la fonction de rappel pour l'obtenir. La même fonction de rappel peut également obtenir le résultat de l'opération asynchrone à l'intérieur de la fonction.

Wrap API asynchrone

Dans des circonstances normales, la fonction en tant que paramètre consiste à obtenir le résultat de l'opération asynchrone à l'intérieur de la fonction

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

Le même package ajax est:

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 ajoute de nombreuses nouvelles méthodes. Ces fonctions doivent passer une fonction en paramètre. Ce paramètre permet d'exécuter les méthodes à l'intérieur de la fonction encapsulée, telles que les méthodes find et findIndex.

trouver
findIndex

find () et 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;
        }
    }
}

test:

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