过滤与返回一个承诺的功能的阵列过滤与返回一个承诺的功能的阵列(Filtering an array

特定

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

长度为3，因为承诺返回，不值。 有没有办法用一个返回无极的函数滤镜阵列？

注意：在这个例子中，fs.stat已被替换的setTimeout，看到https://github.com/silenceisgolden/learn-esnext/blob/array-filter-async-function/tutorials/array-filter-with-async- function.js的特定代码。

Answer 1:

正如评论所说， Array.prototype.filter是同步的，因此不支持承诺。

既然你现在可以（理论上）子类内置类型与ES6，你应该能够增加它包装现有的过滤器功能，您自己的异步方法：

注：我注释掉的子类，因为它不是由巴贝尔对阵列的支持，只是还没有

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

巴贝尔REPL演示

Answer 2:

这里有一个方法：

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

该filterAsync函数接受一个数组，并且必须要么返回一个函数true或false或返回解析为一个承诺true或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 3:

这是一个2017年优雅的解决方案使用异步/等待：

非常简单的用法：

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

该辅助函数（复制到你的网页这一点）：

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

演示：

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

我甚至可以扔在一个CodePen 。

Answer 4:

无极减速来救援！

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

减速是真棒。 “减少我的问题我的目标”似乎是任何东西比简单的工具，将解决你的，即过滤的东西，不能立即所有可用的数组更复杂的一个不错的策略。

Answer 5:

对于打字稿民间（或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]);
}

Answer 6:

太迟了，但由于没有人提到它，蓝鸟支持Promise.map这是我去到对于需要的条件aysnc处理过滤器，

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

Answer 7:

一个有效的方式做到这一点（但似乎太乱）：

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

再次，似乎太乱了。

Answer 8:

动@ DanRoss的变体。

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([]))
}

需要注意的是，如果（在目前的情况下），你不必担心过滤器（）有副作用，需要被序列化，你也可以这样做：

async function filterNums(arr) {
  return await arr.reduce(async (res, val) => {
    if (await filter(val)) {
      (await res).push(val)
    }
    return res
  }, Promise.resolve([]))
}

Answer 9:

如果有人有兴趣在现代打字稿溶液（与失败用于过滤符号）：

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

文章来源: Filtering an array with a function that returns a promise