【javaScript】ES6中新增的 find() 和 findIndex() 原理 —— 封装异步API
文章目录前言封装异步APIfind() 和 findIndex()前言一般情况下,想要再次得到函数内部的结果,我们会采用回调函数的方式来获取,同样的回调函数也可以获取函数内部的异步操作的结果。封装异步API一般情况下,将函数作为参数就是为了获取函数内部的异步操作的结果function fn(callback){// var callback = function(data) { co...
·
前言
一般情况下,想要再次得到函数内部的结果,我们会采用回调函数的方式来获取,同样的回调函数也可以获取函数内部的异步操作的结果。
封装异步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
更多推荐
已为社区贡献1条内容
所有评论(0)