blocks|key|821490|text|这是一种有效的方法(但看起来太混乱了)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|821491|let+arr+=+[1,2,3];

function+filter(num)+{
++return+new+Promise((res,+rej)+=>+{
++++setTimeout(()+=>+{
++++++if(+num+===+3+)+{
++++++++res(num);
++++++}+else+{
++++++++rej();
++++++}
++++},+1);
++});
}

async+function+check(num)+{
++try+{
++++await+filter(num);
++++return+true;
++}+catch(err)+{
++++return+false;
++}
}

(async+function()+{
++for(+let+num+of+arr+)+{
++++let+res+=+await+check(num);
++++if(!res)+{
++++++let+index+=+arr.indexOf(num);
++++++arr.splice(index,+1);
++++}
++}
})();|code-block|syntax|javascript|821492|又一次，看起来太乱了。|821493|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

A valid way to do this (but it seems too messy):

<pre><code>let arr = [1,2,3];

function filter(num) {
 return new Promise((res, rej) =&gt; {
 setTimeout(() =&gt; {
 if( num === 3 ) {
 res(num);
 } else {
 rej();
 }
 }, 1);
 });
}

async function check(num) {
 try {
 await filter(num);
 return true;
 } catch(err) {
 return false;
 }
}

(async function() {
 for( let num of arr ) {
 let res = await check(num);
 if(!res) {
 let index = arr.indexOf(num);
 arr.splice(index, 1);
 }
 }
})();
</code></pre>

Again, seems way too messy.

blocks|key|1427209|text|正如注释中提到的，Array.prototype.filter是同步的，因此不支持承诺。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|BOLD|entityRanges|data|1427210|由于您现在(理论上)可以使用ES6构建子类类型，所以您应该能够添加自己的异步方法，该方法封装了现有的过滤器函数：|1427211|注意:我已经注释掉了子类，因为Babel还不支持数组|1427212|class+AsyncArray+/*extends+Array*/+{
++constructor(arr)+{
++++this.data+=+arr;+//+In+place+of+Array+subclassing
++}

++filterAsync(predicate)+{
+++++//+Take+a+copy+of+the+array,+it+might+mutate+by+the+time+we've+finished
++++const+data+=+Array.from(this.data);
++++//+Transform+all+the+elements+into+an+array+of+promises+using+the+predicate
++++//+as+the+promise
++++return+Promise.all(data.map((element,+index)+=>+predicate(element,+index,+data)))
++++//+Use+the+result+of+the+promises+to+call+the+underlying+sync+filter+function
++++++.then(result+=>+{
++++++++return+data.filter((element,+index)+=>+{
++++++++++return+result[index];
++++++++});
++++++});
++}
}
//+Create+an+instance+of+your+subclass+instead
let+arr+=+new+AsyncArray([1,2,3,4,5]);
//+Pass+in+your+own+predicate
arr.filterAsync(async+(element)+=>+{
++return+new+Promise(res+=>+{
++++setTimeout(()+=>+{
++++++res(element+>+3);
++++},+1);
++});
}).then(result+=>+{
++console.log(result)
});|code-block|syntax|javascript|1427213|Babel+REPL+Demo|1427214|entityMap|0|LINK|mutability|MUTABLE|url|https://babeljs.io/repl/#?experimental=true&evaluate=true&loose=false&spec=false&code=class%2520AsyncArray%2520/*extends%2520Array*/%2520{%2520%2520constructor(arr)%2520{%2520%2520%2520%2520this.data%2520=%2520arr;%2520//%2520In%2520place%2520of%2520Array%2520subclassing%2520%2520}%2520%2520%2520%2520filterAsync(predicate)%2520{%2520%2520%2520%2520%2520//%2520Take%2520a%2520copy%2520of%2520the%2520array,%2520it%2520might%2520mutate%2520by%2520the%2520time%2520we've%2520finished%2520%2520%2520%2520const%2520data%2520=%2520Array.from(this.data);%2520%2520%2520%2520//%2520Transform%2520all%2520the%2520elements%2520into%2520an%2520array%2520of%2520promises%2520using%2520the%2520predicate%2520%2520%2520%2520//%2520as%2520the%2520promise%2520%2520%2520%2520return%2520Promise.all(data.map((element,%2520index)%2520=%253E%2520predicate(element,%2520index,%2520data)))%2520%2520%2520%2520//%2520Use%2520the%2520result%2520of%2520the%2520promises%2520to%2520call%2520the%2520underlying%2520sync%2520filter%2520function%2520%2520%2520%2520%2520%2520.then(result%2520=%253E%2520{%2520%2520%2520%2520%2520%2520%2520%2520return%2520data.filter((element,%2520index)%2520=%253E%2520{%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520return%2520result[index];%2520%2520%2520%2520%2520%2520%2520%2520});%2520%2520%2520%2520%2520%2520});%2520%2520}}//%2520Create%2520an%2520instance%2520of%2520your%2520subclass%2520insteadlet%2520arr%2520=%2520new%2520AsyncArray([1,2,3,4,5]);//%2520Pass%2520in%2520your%2520own%2520predicatearr.filterAsync(async%2520(element)%2520=%253E%2520{%2520%2520return%2520new%2520Promise(res%2520=%253E%2520{%2520%2520%2520%2520setTimeout(()%2520=%253E%2520{%2520%2520%2520%2520%2520%2520res(element%2520%253E%25203);%2520%2520%2520%2520},%25201);%2520%2520});}).then(result%2520=%253E%2520{%2520%2520console.log(result)});^0|9|M|W|C|0|0|1K|0|0|Q|0|0|0|F|0|F|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@$9|10|A|11|B|C]|$9|12|A|13|B|D]]|E|@]|F|$]]|$1|G|3|H|5|6|7|14|8|@$9|15|A|16|B|D]]|E|@]|F|$]]|$1|I|3|J|5|6|7|17|8|@$9|18|A|19|B|D]]|E|@]|F|$]]|$1|K|3|L|5|M|7|1A|8|@]|E|@]|F|$N|O]]|$1|P|3|Q|5|6|7|1B|8|@$9|1C|A|1D|B|D]]|E|@$9|1E|A|1F|1|1G]]|F|$]]|$1|R|3|-4|5|6|7|1H|8|@]|E|@]|F|$]]]|S|$T|$5|U|V|W|F|$X|Y]]]]

As mentioned in the comments, <code>Array.prototype.filter</code> is synchronous and therefore does not support Promises.

Since you can now (theoretically) subclass built-in types with ES6, you should be able to add your own asynchronous method which wraps the existing filter function:

Note: I've commented out the subclassing, because it's not supported by Babel just yet for Arrays

<pre class="lang-js prettyprint-override"><code>class AsyncArray /*extends Array*/ {
 constructor(arr) {
 this.data = arr; // In place of Array subclassing
 }

 filterAsync(predicate) {
 // Take a copy of the array, it might mutate by the time we've finished
 const data = Array.from(this.data);
 // Transform all the elements into an array of promises using the predicate
 // as the promise
 return Promise.all(data.map((element, index) =&gt; predicate(element, index, data)))
 // Use the result of the promises to call the underlying sync filter function
 .then(result =&gt; {
 return data.filter((element, index) =&gt; {
 return result[index];
 });
 });
 }
}
// Create an instance of your subclass instead
let arr = new AsyncArray([1,2,3,4,5]);
// Pass in your own predicate
arr.filterAsync(async (element) =&gt; {
 return new Promise(res =&gt; {
 setTimeout(() =&gt; {
 res(element &gt; 3);
 }, 1);
 });
}).then(result =&gt; {
 console.log(result)
});
</code></pre>

<a href="https://babeljs.io/repl/#?experimental=true&amp;evaluate=true&amp;loose=false&amp;spec=false&amp;code=class%20AsyncArray%20%2F*extends%20Array*%2F%20%7B%0D%0A%20%20constructor(arr)%20%7B%0D%0A%20%20%20%20this.data%20%3D%20arr%3B%20%2F%2F%20In%20place%20of%20Array%20subclassing%0D%0A%20%20%7D%0D%0A%20%20%0D%0A%20%20filterAsync(predicate)%20%7B%0D%0A%20%20%20%20%20%2F%2F%20Take%20a%20copy%20of%20the%20array%2C%20it%20might%20mutate%20by%20the%20time%20we&#39;ve%20finished%0D%0A%20%20%20%20const%20data%20%3D%20Array.from(this.data)%3B%0D%0A%20%20%20%20%2F%2F%20Transform%20all%20the%20elements%20into%20an%20array%20of%20promises%20using%20the%20predicate%0D%0A%20%20%20%20%2F%2F%20as%20the%20promise%0D%0A%20%20%20%20return%20Promise.all(data.map((element%2C%20index)%20%3D%3E%20predicate(element%2C%20index%2C%20data)))%0D%0A%20%20%20%20%2F%2F%20Use%20the%20result%20of%20the%20promises%20to%20call%20the%20underlying%20sync%20filter%20function%0D%0A%20%20%20%20%20%20.then(result%20%3D%3E%20%7B%0D%0A%20%20%20%20%20%20%20%20return%20data.filter((element%2C%20index)%20%3D%3E%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20return%20result%5Bindex%5D%3B%0D%0A%20%20%20%20%20%20%20%20%7D)%3B%0D%0A%20%20%20%20%20%20%7D)%3B%0D%0A%20%20%7D%0D%0A%7D%0D%0A%2F%2F%20Create%20an%20instance%20of%20your%20subclass%20instead%0D%0Alet%20arr%20%3D%20new%20AsyncArray(%5B1%2C2%2C3%2C4%2C5%5D)%3B%0D%0A%2F%2F%20Pass%20in%20your%20own%20predicate%0D%0Aarr.filterAsync(async%20(element)%20%3D%3E%20%7B%0D%0A%20%20return%20new%20Promise(res%20%3D%3E%20%7B%0D%0A%20%20%20%20setTimeout(()%20%3D%3E%20%7B%0D%0A%20%20%20%20%20%20res(element%20%3E%203)%3B%0D%0A%20%20%20%20%7D%2C%201)%3B%0D%0A%20%20%7D)%3B%0D%0A%7D).then(result%20%3D%3E%20%7B%0D%0A%20%20console.log(result)%0D%0A%7D)%3B" rel="noreferrer">Babel REPL Demo</a>

blocks|key|821560|text|以下是一种方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|821561|var+wait+=+ms+=>+new+Promise(resolve+=>+setTimeout(resolve,+ms));
var+filter+=+num+=>+wait(1).then(()+=>+num+==+3);

var+filterAsync+=+(array,+filter)+=>
++Promise.all(array.map(entry+=>+filter(entry)))
++.then(bits+=>+array.filter(entry+=>+bits.shift()));

filterAsync([1,2,3],+filter)
.then(results+=>+console.log(results.length))
.catch(e+=>+console.error(e));|code-block|syntax|javascript|821562|filterAsync函数接受一个数组和一个必须返回true或false或返回解析为true或false的承诺的函数(几乎，我没有过载承诺拒绝，因为我认为这是个坏主意)。如果你对此有任何疑问，请告诉我。|offset|length|style|CODE|821563|​|821564|var+wait+=+ms+=>+new+Promise(resolve+=>+setTimeout(resolve,+ms));
var+filter+=+num+=>+wait(1).then(()+=>+num+==+3);

var+filterAsync+=+(array,+filter)+=>
++Promise.all(array.map(entry+=>+filter(entry)))
++.then(bits+=>+array.filter(entry+=>+bits.shift()));

filterAsync([1,2,3],+filter)
.then(results+=>+console.log(results.length))
.catch(e+=>+console.error(e));

var+console+=+{+log:+msg+=>+div.innerHTML+%2B=+msg+%2B+" ",
++++++++++++++++error:+e+=>+console.log(e+%2B",+"%2B+(e.lineNumber-25))+};|821565|<div+id="div"></div>|821566|821567|entityMap^0|0|0|0|B|Q|4|V|5|16|4|1B|5|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|W|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|X|8|@$I|Y|J|Z|K|L]|$I|10|J|11|K|L]|$I|12|J|13|K|L]|$I|14|J|15|K|L]|$I|16|J|17|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|18|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|19|8|@]|9|@]|A|$E|F]]|$1|Q|3|R|5|D|7|1A|8|@]|9|@]|A|$E|F]]|$1|S|3|N|5|6|7|1B|8|@]|9|@]|A|$]]|$1|T|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|U|$]]

Here's a way:

<pre><code>var wait = ms =&gt; new Promise(resolve =&gt; setTimeout(resolve, ms));
var filter = num =&gt; wait(1).then(() =&gt; num == 3);

var filterAsync = (array, filter) =&gt;
 Promise.all(array.map(entry =&gt; filter(entry)))
 .then(bits =&gt; array.filter(entry =&gt; bits.shift()));

filterAsync([1,2,3], filter)
.then(results =&gt; console.log(results.length))
.catch(e =&gt; console.error(e));
</code></pre>

The <code>filterAsync</code> function takes an array and a function that must either return <code>true</code> or <code>false</code> or return a promise that resolves to <code>true</code> or <code>false</code>, what you asked for (almost, I didn't overload promise rejection because I think that's a bad idea). Let me know if you have any questions about it.

<div class="snippet" data-lang="js" data-hide="true">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var wait = ms =&gt; new Promise(resolve =&gt; setTimeout(resolve, ms));
var filter = num =&gt; wait(1).then(() =&gt; num == 3);

var filterAsync = (array, filter) =&gt;
 Promise.all(array.map(entry =&gt; filter(entry)))
 .then(bits =&gt; array.filter(entry =&gt; bits.shift()));

filterAsync([1,2,3], filter)
.then(results =&gt; console.log(results.length))
.catch(e =&gt; console.error(e));

var console = { log: msg =&gt; div.innerHTML += msg + "&lt;br&gt;",
 error: e =&gt; console.log(e +", "+ (e.lineNumber-25)) };</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="div"&gt;&lt;/div&gt;</code></pre>
</div>
</div>

blocks|key|1980951|text|答应我救人！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1980952|[1,+2,+3,+4].reduce((op,+n)+=>+{
++++return+op.then(filteredNs+=>+{
++++++++return+new+Promise(resolve+=>+{
++++++++++++setTimeout(()+=>+{
++++++++++++++++if+(n+>=+3)+{
++++++++++++++++++++console.log("Keeping",+n);
++++++++++++++++++++resolve(filteredNs.concat(n))
++++++++++++++++}+else+{
++++++++++++++++++++console.log("Dropping",+n);
++++++++++++++++++++resolve(filteredNs);
++++++++++++++++}
++++++++++++},+1000);
++++++++});
++++});
},+Promise.resolve([]))
.then(filteredNs+=>+console.log(filteredNs));|code-block|syntax|javascript|1980953|减速机太棒了。“将我的问题降到我的目标”似乎是一个非常好的策略，它适用于任何比简单工具为您解决的更复杂的问题，即过滤一系列并非所有可用的东西。|1980954|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Promise Reducer to the rescue!

<pre><code>[1, 2, 3, 4].reduce((op, n) =&gt; {
 return op.then(filteredNs =&gt; {
 return new Promise(resolve =&gt; {
 setTimeout(() =&gt; {
 if (n &gt;= 3) {
 console.log("Keeping", n);
 resolve(filteredNs.concat(n))
 } else {
 console.log("Dropping", n);
 resolve(filteredNs);
 }
 }, 1000);
 });
 });
}, Promise.resolve([]))
.then(filteredNs =&gt; console.log(filteredNs));
</code></pre>

Reducers are awesome. "Reduce my problem to my goal" seems to be a pretty good strategy for anything more complex than what the simple tools will solve for you, i.e. filtering an array of things that aren't all available immediately.

blocks|key|1427306|text|游戏很晚，但由于没有其他人提到，蓝鸟支持Promise.map，这是我的过滤器，需要对条件进行aysnc处理，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1427307|function+filterAsync(arr)+{
++++return+Promise.map(arr,+num+=>+{
++++++++if+(num+===+3)+return+num;
++++})
++++++++.filter(num+=>+num+!==+undefined)
}|code-block|syntax|javascript|1427308|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Late to the game but since no one else mentioned it, Bluebird supports Promise.map which is my go-to for filters requiring aysnc processing for the condition,

<pre><code>function filterAsync(arr) {
 return Promise.map(arr, num =&gt; {
 if (num === 3) return num;
 })
 .filter(num =&gt; num !== undefined)
}
</code></pre>

blocks|key|1980980|text|下面是一个使用异步/等待的2017年优雅解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1980981|非常简单的用法：|1980982|const+results+=+await+filter(myArray,+async+num+=>+{
++await+doAsyncStuff()
++return+num+>+2
})|code-block|syntax|javascript|1980983|助手函数(将其复制到您的网页)：|1980984|async+function+filter(arr,+callback)+{
++const+fail+=+Symbol()
++return+(await+Promise.all(arr.map(async+item+=>+(await+callback(item))+?+item+:+fail))).filter(i=>i!==fail)
}|1980985|演示：|1980986|​|1980987|//+Async+IIFE
(async+function()+{
++const+myArray+=+[1,+2,+3,+4,+5]

++//+This+is+exactly+what+you'd+expect+to+write+
++const+results+=+await+filter(myArray,+async+num+=>+{
++++await+doAsyncStuff()
++++return+num+>+2
++})

++console.log(results)
})()


//+Arbitrary+asynchronous+function
function+doAsyncStuff()+{
++return+Promise.resolve()
}


//+The+helper+function
async+function+filter(arr,+callback)+{
++const+fail+=+Symbol()
++return+(await+Promise.all(arr.map(async+item+=>+(await+callback(item))+?+item+:+fail))).filter(i=>i!==fail)
}|1980988|1980989|我甚至还会加一个CodePen。|offset|length|1980990|entityMap|0|LINK|mutability|MUTABLE|url|https://codepen.io/krabbypattified/pen/qYrNrG?editors=0011^0|0|0|0|0|0|0|0|0|0|8|7|0|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|16|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|17|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|18|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|19|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|1A|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1B|8|@]|9|@]|A|$]]|$1|Q|3|R|5|F|7|1C|8|@]|9|@]|A|$G|H]]|$1|S|3|P|5|6|7|1D|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1E|8|@]|9|@$V|1F|W|1G|1|1H]]|A|$]]|$1|X|3|-4|5|6|7|1I|8|@]|9|@]|A|$]]]|Y|$Z|$5|10|11|12|A|$13|14]]]]

Here is a 2017 elegant solution using async/await :

Very straightforward usage:

<pre><code>const results = await filter(myArray, async num =&gt; {
 await doAsyncStuff()
 return num &gt; 2
})
</code></pre>

The helper function (copy this into your web page):

<pre><code>async function filter(arr, callback) {
 const fail = Symbol()
 return (await Promise.all(arr.map(async item =&gt; (await callback(item)) ? item : fail))).filter(i=&gt;i!==fail)
}
</code></pre>

Demo:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// Async IIFE
(async function() {
 const myArray = [1, 2, 3, 4, 5]

 // This is exactly what you'd expect to write 
 const results = await filter(myArray, async num =&gt; {
 await doAsyncStuff()
 return num &gt; 2
 })

 console.log(results)
})()


// Arbitrary asynchronous function
function doAsyncStuff() {
 return Promise.resolve()
}


// The helper function
async function filter(arr, callback) {
 const fail = Symbol()
 return (await Promise.all(arr.map(async item =&gt; (await callback(item)) ? item : fail))).filter(i=&gt;i!==fail)
}</code></pre>
</div>
</div>


I'll even throw in a <a href="https://codepen.io/krabbypattified/pen/qYrNrG?editors=0011" rel="noreferrer">CodePen</a>.

blocks|key|1427350|text|“DanRoss”的变体：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1427351|async+function+filterNums(arr)+{
++return+await+arr.reduce(async+(res,+val)+=>+{
++++res+=+await+res
++++if+(await+filter(val))+{
++++++res.push(val)
++++}
++++return+res
++},+Promise.resolve([]))
}|code-block|syntax|javascript|1427352|请注意，如果您不必担心filter()具有需要序列化的副作用(与当前情况一样)，您也可以这样做：|1427353|async+function+filterNums(arr)+{
++return+await+arr.reduce(async+(res,+val)+=>+{
++++if+(await+filter(val))+{
++++++(await+res).push(val)
++++}
++++return+res
++},+Promise.resolve([]))
}|1427354|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

A variant of @DanRoss's:

<pre><code>async function filterNums(arr) {
 return await arr.reduce(async (res, val) =&gt; {
 res = await res
 if (await filter(val)) {
 res.push(val)
 }
 return res
 }, Promise.resolve([]))
}
</code></pre>

Note that if (as in current case) you don't have to worry about filter() having
side effects that need to be serialized, you can also do:

<pre><code>async function filterNums(arr) {
 return await arr.reduce(async (res, val) =&gt; {
 if (await filter(val)) {
 (await res).push(val)
 }
 return res
 }, Promise.resolve([]))
}
</code></pre>

blocks|key|1427395|text|对于类型记录(或者es6只是删除类型语法)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1427396|function+mapAsync<T,+U>(array:+T[],+callbackfn:+(value:+T,+index:+number,+array:+T[])+=>+Promise):+Promise<U[]>+{
++return+Promise.all(array.map(callbackfn));
}

async+function+filterAsync<T>(array:+T[],+callbackfn:+(value:+T,+index:+number,+array:+T[])+=>+Promise<boolean>):+Promise<T[]>+{
++const+filterMap+=+await+mapAsync(array,+callbackfn);
++return+array.filter((value,+index)+=>+filterMap[index]);
}|code-block|syntax|javascript|1427397|es6|1427398|function+mapAsync(array,+callbackfn)+{
++return+Promise.all(array.map(callbackfn));
}

async+function+filterAsync(array,+callbackfn)+{
++const+filterMap+=+await+mapAsync(array,+callbackfn);
++return+array.filter((value,+index)+=>+filterMap[index]);
}|1427399|es5|1427400|function+mapAsync(array,+callbackfn)+{
++return+Promise.all(array.map(callbackfn));
}

function+filterAsync(array,+callbackfn)+{
++return+mapAsync(array,+callbackfn).then(filterMap+=>+{
++++return+array.filter((value,+index)+=>+filterMap[index]);
++});
}|1427401|编辑:演示|1427402|​|1427403|function+mapAsync(array,+callbackfn)+{
++return+Promise.all(array.map(callbackfn));
}

function+filterAsync(array,+callbackfn)+{
++return+mapAsync(array,+callbackfn).then(filterMap+=>+{
++++return+array.filter((value,+index)+=>+filterMap[index]);
++});
}

var+arr+=+[1,+2,+3,+4];

function+isThreeAsync(number)+{
++return+new+Promise((res,+rej)+=>+{
++++setTimeout(()+=>+{
++++++res(number+===+3);
++++},+1);
++});
}

mapAsync(arr,+isThreeAsync).then(result+=>+{
++console.log(result);+//+[+false,+false,+true,+false+]
});

filterAsync(arr,+isThreeAsync).then(result+=>+{
++console.log(result);+//+[+3+]
});|1427404|1427405|entityMap^0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Z|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|10|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|11|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|12|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|13|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|14|8|@]|9|@]|A|$]]|$1|S|3|T|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|U|3|R|5|6|7|16|8|@]|9|@]|A|$]]|$1|V|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|W|$]]

For typescript folk (or es6 just remove type syntax)

<pre><code>function mapAsync&lt;T, U&gt;(array: T[], callbackfn: (value: T, index: number, array: T[]) =&gt; Promise&lt;U&gt;): Promise&lt;U[]&gt; {
 return Promise.all(array.map(callbackfn));
}

async function filterAsync&lt;T&gt;(array: T[], callbackfn: (value: T, index: number, array: T[]) =&gt; Promise&lt;boolean&gt;): Promise&lt;T[]&gt; {
 const filterMap = await mapAsync(array, callbackfn);
 return array.filter((value, index) =&gt; filterMap[index]);
}
</code></pre>

es6

<pre><code>function mapAsync(array, callbackfn) {
 return Promise.all(array.map(callbackfn));
}

async function filterAsync(array, callbackfn) {
 const filterMap = await mapAsync(array, callbackfn);
 return array.filter((value, index) =&gt; filterMap[index]);
}
</code></pre>

es5

<pre><code>function mapAsync(array, callbackfn) {
 return Promise.all(array.map(callbackfn));
}

function filterAsync(array, callbackfn) {
 return mapAsync(array, callbackfn).then(filterMap =&gt; {
 return array.filter((value, index) =&gt; filterMap[index]);
 });
}
</code></pre>

edit: demo

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function mapAsync(array, callbackfn) {
 return Promise.all(array.map(callbackfn));
}

function filterAsync(array, callbackfn) {
 return mapAsync(array, callbackfn).then(filterMap =&gt; {
 return array.filter((value, index) =&gt; filterMap[index]);
 });
}

var arr = [1, 2, 3, 4];

function isThreeAsync(number) {
 return new Promise((res, rej) =&gt; {
 setTimeout(() =&gt; {
 res(number === 3);
 }, 1);
 });
}

mapAsync(arr, isThreeAsync).then(result =&gt; {
 console.log(result); // [ false, false, true, false ]
});

filterAsync(arr, isThreeAsync).then(result =&gt; {
 console.log(result); // [ 3 ]
});</code></pre>
</div>
</div>

blocks|key|1981058|text|如果有人对现代打字解决方案感兴趣(使用失败符号进行过滤)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1981059|const+failSymbol+=+Symbol();

export+async+function+filterAsync<T>(
++itemsToFilter:+T[],
++filterFunction:+(item:+T)+=>+Promise<boolean>,
):+Promise<T[]>+{
++const+itemsOrFailFlags+=+await+Promise.all(
++++itemsToFilter.map(async+(item)+=>+{
++++++const+hasPassed+=+await+filterFunction(item);

++++++return+hasPassed+?+item+:+failSymbol;
++++}),
++);

++return+itemsOrFailFlags.filter(
++++(itemOrFailFlag)+=>+itemOrFailFlag+!==+failSymbol,
++)+as+T[];
}|code-block|syntax|javascript|1981060|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

In case someone is interested in modern typescript solution (with fail symbol used for filtering):

<pre><code>const failSymbol = Symbol();

export async function filterAsync&lt;T&gt;(
 itemsToFilter: T[],
 filterFunction: (item: T) =&gt; Promise&lt;boolean&gt;,
): Promise&lt;T[]&gt; {
 const itemsOrFailFlags = await Promise.all(
 itemsToFilter.map(async (item) =&gt; {
 const hasPassed = await filterFunction(item);

 return hasPassed ? item : failSymbol;
 }),
 );

 return itemsOrFailFlags.filter(
 (itemOrFailFlag) =&gt; itemOrFailFlag !== failSymbol,
 ) as T[];
}
</code></pre>

blocks|key|821721|text|asyncFilter方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|821722|Array.prototype.asyncFilter+=+async+function(f){
++++var+array+=+this;
++++var+booleans+=+await+Promise.all(array.map(f));
++++return+array.filter((x,i)=>booleans[i])
}|code-block|syntax|javascript|821723|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

asyncFilter method:

<pre><code>Array.prototype.asyncFilter = async function(f){
 var array = this;
 var booleans = await Promise.all(array.map(f));
 return array.filter((x,i)=&gt;booleans[i])
}
</code></pre>

blocks|key|821757|text|你可以这样做..。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|821758|theArrayYouWantToFilter+=+await+new+Promise(async+(resolve)+=>+{
++const+tempArray+=+[];

++theArrayYouWantToFilter.filter(async+(element,+index)+=>+{
++++const+someAsyncValue+=+await+someAsyncFunction();

++++if+(someAsyncValue)+{
++++++tempArray.push(someAsyncValue);
++++}

++++if+(index+===+theArrayYouWantToFilter.length+-+1)+{
++++++resolve(tempArray);
++++}
++});
});|code-block|syntax|javascript|821759|包装在异步函数中..。|821760|async+function+filter(theArrayYouWantToFilter)+{
++theArrayYouWantToFilter+=+await+new+Promise(async+(resolve)+=>+{
++++const+tempArray+=+[];

++++theArrayYouWantToFilter.filter(async+(element,+index)+=>+{
++++++const+someAsyncValue+=+await+someAsyncFunction();

++++++if+(someAsyncValue)+{
++++++++tempArray.push(someAsyncValue);
++++++}

++++++if+(index+===+theArrayYouWantToFilter.length+-+1)+{
++++++++resolve(tempArray);
++++++}
++++});
++});

++return+theArrayYouWantToFilter;
}|821761|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

You can do something like this...

<pre class="lang-js prettyprint-override"><code>theArrayYouWantToFilter = await new Promise(async (resolve) =&gt; {
 const tempArray = [];

 theArrayYouWantToFilter.filter(async (element, index) =&gt; {
 const someAsyncValue = await someAsyncFunction();

 if (someAsyncValue) {
 tempArray.push(someAsyncValue);
 }

 if (index === theArrayYouWantToFilter.length - 1) {
 resolve(tempArray);
 }
 });
});
</code></pre>

Wrapped within an async function...

<pre class="lang-js prettyprint-override"><code>
async function filter(theArrayYouWantToFilter) {
 theArrayYouWantToFilter = await new Promise(async (resolve) =&gt; {
 const tempArray = [];

 theArrayYouWantToFilter.filter(async (element, index) =&gt; {
 const someAsyncValue = await someAsyncFunction();

 if (someAsyncValue) {
 tempArray.push(someAsyncValue);
 }

 if (index === theArrayYouWantToFilter.length - 1) {
 resolve(tempArray);
 }
 });
 });

 return theArrayYouWantToFilter;
}
</code></pre>

blocks|key|1981131|text|晚些时候，我知道我的答案和其他已经发布的答案相似，但是我要分享的函数已经准备好被放入任何代码中并被使用了。与往常一样，当您必须对数组执行复杂的操作时，reduce：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1981132|const+filterAsync+=+(asyncPred)+=>+arr+=>+
++arr.reduce(async+(acc,item)+=>+{
++++const+pass+=+await+asyncPred(item);
++++if(pass)+(await+acc).push(item);
++++return+acc;
++},[]);|code-block|syntax|javascript|1981133|它使用现代语法，因此确保目标支持它。要做到100%25正确，您应该使用Promise.resolve([])作为初始值，但是JS只是不在乎，这样就更短了。|offset|length|style|CODE|1981134|然后你可以像这样使用它：|1981135|var+wait+=+ms+=>+new+Promise(resolve+=>+setTimeout(resolve,+ms));
const+isOdd+=+x+=>+wait(1).then(()=>x%252);
(filterAsync(isOdd)([1,2,3,4,4])).then(console.log)+//+=>+[1,3]|1981136|entityMap^0|0|0|X|J|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@$I|V|J|W|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

Late to the party, and I know that my answer is similar to other already posted answers, but the function I'm going to share is ready for be dropped into any code and be used.
As usual, when you have to do complex operations on arrays, reduce is king:

<pre><code>const filterAsync = (asyncPred) =&gt; arr =&gt; 
 arr.reduce(async (acc,item) =&gt; {
 const pass = await asyncPred(item);
 if(pass) (await acc).push(item);
 return acc;
 },[]);
</code></pre>

It uses modern syntax so make sure your target supports it. To be 100% correct you should use <code>Promise.resolve([])</code> as the initial value, but JS just doesn't care and this way it is way shorter.

Then you can use it like this:

<pre><code>var wait = ms =&gt; new Promise(resolve =&gt; setTimeout(resolve, ms));
const isOdd = x =&gt; wait(1).then(()=&gt;x%2);
(filterAsync(isOdd)([1,2,3,4,4])).then(console.log) // =&gt; [1,3]
</code></pre>

blocks|key|821829|text|下面是@Pie6k打字本的较短版本：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|821830|async+function+filter<T>(arr:+T[],+callback:+(val:+T)+=>+Promise<Boolean>)+{
++const+fail+=+Symbol()
++const+result+=+(await+Promise.all(arr.map(async+item+=>+(await+callback(item))+?+item+:+fail))).filter(i+=>+i+!==+fail)
++return+result+as+T[]+//+the+"fail"+entries+are+all+filtered+out+so+this+is+OK
}|code-block|syntax|javascript|821831|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Here's a shorter version of @pie6k's Typescript version:

<pre class="lang-js prettyprint-override"><code>async function filter&lt;T&gt;(arr: T[], callback: (val: T) =&gt; Promise&lt;Boolean&gt;) {
 const fail = Symbol()
 const result = (await Promise.all(arr.map(async item =&gt; (await callback(item)) ? item : fail))).filter(i =&gt; i !== fail)
 return result as T[] // the "fail" entries are all filtered out so this is OK
}
</code></pre>

blocks|key|1981232|text|出于生产目的，您可能希望使用像佛洛异步这样的库|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1981233|import+{+filterAsync+}+from+'lodasync'

const+result+=+await+filterAsync(async(element)+=>+{
++await+doSomething()
++return+element+>+3
},+array)|code-block|syntax|javascript|1981234|在遮罩下，它通过调用每个元素的回调来映射数组，并使用结果对数组进行筛选。但你不应该重新发明轮子。|1981235|entityMap|0|LINK|mutability|MUTABLE|url|https://www.npmjs.com/package/lodasync#filterasynccallback-collection^0|F|4|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|C|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

For production purposes you probably want to use a lib like <a href="https://www.npmjs.com/package/lodasync#filterasynccallback-collection" rel="nofollow noreferrer">lodasync</a>:

<pre class="lang-js prettyprint-override"><code>import { filterAsync } from 'lodasync'

const result = await filterAsync(async(element) =&gt; {
 await doSomething()
 return element &gt; 3
}, array)
</code></pre>

Under the hood, it maps your array by invoking the callback on each element and filters the array using the result. But you should not reinvent the wheel.

blocks|key|821882|text|只有一个班轮能做到这一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|821883|const+filterPromise+=+(values,+fn)+=>+
++++Promise.all(values.map(fn)).then(booleans+=>+values.filter((_,+i)+=>+booleans[i]));|code-block|syntax|javascript|821884|将数组传递到values，将函数传递到fn。|offset|length|style|CODE|821885|关于这个班轮是如何工作的更多的描述是可用的这里。|821886|entityMap|0|LINK|mutability|MUTABLE|url|https://dev.to/praveenkumarrr/filtering-an-array-using-a-function-that-returns-a-promise-3aa^0|0|0|6|6|J|2|0|L|2|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@$I|Z|J|10|K|L]|$I|11|J|12|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|13|8|@]|9|@$I|14|J|15|1|16]]|A|$]]|$1|O|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

There is a one liner to to do that.
<pre><code>const filterPromise = (values, fn) =&gt; 
 Promise.all(values.map(fn)).then(booleans =&gt; values.filter((_, i) =&gt; booleans[i]));
</code></pre>
Pass the array into <code>values</code> and the function into <code>fn</code>.
More description on how this one liner works is available <a href="https://dev.to/praveenkumarrr/filtering-an-array-using-a-function-that-returns-a-promise-3aa" rel="nofollow noreferrer">here</a>.

blocks|key|1427584|text|两行，完全排版|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1427585|export+const+asyncFilter+=+async+<T>(list:+T[],+predicate:+(t:+T)+=>+Promise<boolean>)+=>+{
++const+resolvedPredicates+=+await+Promise.all(list.map(predicate));
++return+list.filter((item,+idx)+=>+resolvedPredicates[idx]);
};|code-block|syntax|javascript|1427586|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Two lines, completely typesafe
<pre><code>export const asyncFilter = async &lt;T&gt;(list: T[], predicate: (t: T) =&gt; Promise&lt;boolean&gt;) =&gt; {
 const resolvedPredicates = await Promise.all(list.map(predicate));
 return list.filter((item, idx) =&gt; resolvedPredicates[idx]);
};
</code></pre>

blocks|key|1981304|text|解决这一问题的一种有效方法是将数组作为可迭代处理，因此您可以在单个迭代中应用任意数量的所需操作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1981305|下面的示例使用库iter-ops：|offset|length|1981306|import+{pipe,+filter,+toAsync}+from+'iter-ops';

const+arr+=+[1,+2,+3];+//+synchronous+iterable

const+i+=+pipe(
++++toAsync(arr),+//+make+our+iterable+asynchronous
++++filter(async+(value,+index)+=>+{
++++++++//+returns+Promise<boolean>
++++})
);

(async+function()+{
++++for+await+(const+a+of+i)+{
++++++++console.log(a);+//+print+values
++++}
})();|code-block|syntax|javascript|1981307|库中的所有操作符在异步管道中支持异步谓词(为什么我们使用toAsync)，您也可以以同样的方式添加其他操作符。|1981308|为此使用Promise.all是非常低效率的，因为您阻止整个数组进行任何可以并发完成的进一步处理，这是上述方法所允许的。|style|CODE|1981309|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/vitaly-t/iter-ops|1|https://vitaly-t.github.io/iter-ops/functions/toAsync.html^0|0|8|8|0|0|0|S|7|1|0|4|B|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@$D|12|E|13|1|14]]|A|$]]|$1|F|3|G|5|H|7|15|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|16|8|@]|9|@$D|17|E|18|1|19]]|A|$]]|$1|M|3|N|5|6|7|1A|8|@$D|1B|E|1C|O|P]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]|Y|$5|T|U|V|A|$W|Z]]]]

An efficient way of approaching this is by processing arrays as iterables, so you can apply any number of required operations in a single iteration.
The example below uses library <a href="https://github.com/vitaly-t/iter-ops" rel="nofollow noreferrer">iter-ops</a> for that:
<pre><code>import {pipe, filter, toAsync} from 'iter-ops';

const arr = [1, 2, 3]; // synchronous iterable

const i = pipe(
 toAsync(arr), // make our iterable asynchronous
 filter(async (value, index) =&gt; {
 // returns Promise&lt;boolean&gt;
 })
);

(async function() {
 for await (const a of i) {
 console.log(a); // print values
 }
})();
</code></pre>
All operators within the library support asynchronous predicates when inside an asynchronous pipeline (why we use <a href="https://vitaly-t.github.io/iter-ops/functions/toAsync.html" rel="nofollow noreferrer">toAsync</a>), and you can add other operators, in the same way.
Use of <code>Promise.all</code> for this is quite inefficient, because you block the entire array from any further processing that can be done concurrently, which the above approach allows.

Given

<pre><code>let arr = [1,2,3];

function filter(num) {
 return new Promise((res, rej) =&gt; {
 setTimeout(() =&gt; {
 if( num === 3 ) {
 res(num);
 } else {
 rej();
 }
 }, 1);
 });
 }

 function filterNums() {
 return Promise.all(arr.filter(filter));
 }

 filterNums().then(results =&gt; {
 let l = results.length;
 // length should be 1, but is 3
 });
</code></pre>

The length is 3 because Promises are returned, not values. Is there a way to filter the array with a function that returns a Promise? 

Note: For this example, fs.stat has been replaced with setTimeout, see <a href="https://github.com/silenceisgolden/learn-esnext/blob/array-filter-async-function/tutorials/array-filter-with-async-function.js">https://github.com/silenceisgolden/learn-esnext/blob/array-filter-async-function/tutorials/array-filter-with-async-function.js</a> for the specific code.

Filtering an array with a function that returns a promise

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

给定的let arr = [1,2,3];function filter(num) {  return new Promise((res, rej) => {    setTimeout(() => {      if( num === 3 ) {        res(num);      } else {     ...

问使用返回承诺的函数过滤数组
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用返回承诺的函数过滤数组EN