JavaScript 中的 map() 和 filter() 进行一起使用

Question

JavaScript 的 Array#map() 和 Array#filter() 函数一起使用时很棒，因为它们允许您 组合 简单的函数。

例如，这是一个基本用例 filter()：从数值数组中过滤掉所有小于 100 的数字。

const nums = [25, 125, 75, 200];

function atLeast100(num) {
  return num >= 100;
}

nums.filter(atLeast100); // [125, 200]

此函数适用于数字数组。 但是，当您需要根据 price？你需要一个单独的 priceAtLeast100() 功能？ 不，你可以使用 map() 改造 products 数组以适应什么 atLeast100 功能预期。

const products = [
  { name: 'T-Shirt', price: 25 },
  { name: 'Headphones', price: 125 },
  { name: 'Keyboard', price: 75 },
  { name: 'Monitor', price: 200 }
];

// Gets the number of products whose price is at least 100.
products.map(product => product.price).filter(atLeast100).length;

这是 组合 ：通过组合 map() 和 filter()，你可以重用简单的 atLeast100() 函数对稍微不同的输入进行操作。

过滤然后映射

前面的示例显示了您可能想要使用的原因 map() 其次是 filter()，在某些情况下您可能想要使用 filter() 其次是 map()，例如，您可能想在调用之前检查嵌套属性是否存在 map()。

const orders = [
  { quantity: 2, item: { name: 'T-Shirt', price: 25 } },
  { quantity: 1, item: { name: 'Keyboard', price: 75 } },
  // Maybe there was a bug and a order with a null `item` ended up in the database!
  { quantity: 2, item: null }
];

const orderedItemNames = orders.
  filter(order => order.item != null).
  map(order => order.item.name);