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

Question

提问by ajklein

Given

给定的

let arr = [1,2,3];

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

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

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

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?

长度为 3，因为返回的是 Promises，而不是值。有没有办法用返回 Promise 的函数过滤数组？

Note: For this example, fs.stat has been replaced with setTimeout, see https://github.com/silenceisgolden/learn-esnext/blob/array-filter-async-function/tutorials/array-filter-with-async-function.jsfor the specific code.

注意：对于这个例子，fs.stat 已经被 setTimeout 替换，参见https://github.com/silenceisgolden/learn-esnext/blob/array-filter-async-function/tutorials/array-filter-with-async- function.js为具体代码。

Answer 1

采纳答案by CodingIntrigue

As mentioned in the comments, Array.prototype.filteris synchronous and therefore does not support Promises.

如评论中所述，Array.prototype.filter是同步的，因此不支持 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:

由于您现在（理论上）可以使用 ES6 对内置类型进行子类化，因此您应该能够添加自己的异步方法来包装现有的过滤器函数：

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

注意：我已经注释掉了子类化，因为 Babel 目前还不支持 Arrays

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)
});

Babel REPL Demo

Babel REPL 演示

Answer 2

回答by Gabe Rogan

Here is a 2017 elegant solution using async/await :

这是 2017 年使用 async/await 的优雅解决方案：

Very straightforward usage:

非常直接的用法：

const results = await filter(myArray, async num => {
  await doAsyncStuff()
  return num > 2
})

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

辅助函数（将其复制到您的网页中）：

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)
}

Demo:

演示：

// 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)
}

I'll even throw in a CodePen.

我什至会投入一个CodePen。

Answer 3

回答by jib

Here's a way:

这里有一个方法：

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));

The filterAsyncfunction takes an array and a function that must either return trueor falseor return a promise that resolves to trueor false, 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.

该filterAsync函数采用一个数组和一个函数，该函数必须返回true或false返回一个解析为trueor的承诺，false您所要求的（几乎，我没有重载承诺拒绝，因为我认为这是一个坏主意）。如果您对此有任何疑问，请告诉我。

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 += msg + "<br>",
                error: e => console.log(e +", "+ (e.lineNumber-25)) };

<div id="div"></div>

Answer 4

回答by William Lohan

For typescript folk (or es6 just remove type syntax)

对于打字稿民间（或 es6 只是删除类型语法）

function mapAsync<T, U>(array: T[], callbackfn: (value: T, index: number, array: T[]) => Promise<U>): 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]);
}

es6

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]);
}

es5

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]);
  });
}

edit: demo

编辑：演示

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 ]
});

Answer 5

回答by Dan Ross

Promise Reducer to the rescue!

Promise Reducer 来拯救你！

[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));

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.

减速机很棒。“将我的问题减少到我的目标”对于任何比简单工具将为您解决的问题更复杂的事情来说似乎是一个很好的策略，即过滤一系列并非立即可用的事情。

Answer 6

回答by Spencer MacBeth

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,

游戏晚了，但由于没有其他人提到它，Bluebird 支持 Promise.map，这是我对需要 aysnc 处理条件的过滤器的首选，

function filterAsync(arr) {
    return Promise.map(arr, num => {
        if (num === 3) return num;
    })
        .filter(num => num !== undefined)
}

Answer 7

回答by pie6k

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

如果有人对现代打字稿解决方案感兴趣（带有用于过滤的失败符号）：

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[];
}

Answer 8

回答by Grigory Hatsevich

asyncFilter method:

异步过滤器方法：

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

Answer 9

回答by sudo soul

You can do something like this...

你可以做这样的事情......

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);
    }
  });
});

Wrapped within an async function...

包裹在一个异步函数中......


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;
}

Answer 10

回答by Danielo515

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:

迟到了，我知道我的答案与其他已经发布的答案相似，但我要分享的功能已准备好放入任何代码中并使用。像往常一样，当你必须对数组进行复杂的操作时，reduce 是王道：

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

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

它使用现代语法，因此请确保您的目标支持它。要 100% 正确，您应该将其Promise.resolve([])用作初始值，但 JS 并不关心，这样它就更短了。

Then you can use it like this:

然后你可以像这样使用它：

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

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

提问by ajklein

采纳答案by CodingIntrigue

回答by Gabe Rogan

回答by jib

回答by William Lohan

回答by Dan Ross

回答by Spencer MacBeth

回答by pie6k

回答by Grigory Hatsevich

回答by sudo soul

回答by Danielo515

相关推荐

最近更新

标签

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

提问by ajklein

采纳答案by CodingIntrigue

回答by Gabe Rogan

回答by jib

回答by William Lohan

回答by Dan Ross

回答by Spencer MacBeth

回答by pie6k

回答by Grigory Hatsevich

回答by sudo soul

回答by Danielo515

相关推荐

Javascript 使用Javascript读取客户端文本文件

如何将 dd/mm/yyyy 字符串转换为 JavaScript 日期对象？

Javascript 如何使用箭头键移动div

Javascript jQuery 中 val.length 和 val().length 之间的区别？

相关推荐

最近更新

标签