如何使用 .map 数组方法找出小于或等于 60 的整数

Question

 const recipes = [
  {
    title: 'Crepes',
    duration: 60,
    ingredients: ['butter', 'flour', 'eggs', 'milk', 'salt'],
    servings: 3
  },
  {
    title: 'Scrambled Eggs',
    duration: 20,
    ingredients: ['eggs', 'milk', 'salt'],
    servings: 2
  },
  {
    title: 'Vegan Salmon',
    duration: 60 * 24 * 3, // 3 days
    ingredients: ['carrots', 'olive oil', 'nori sheets', 'liquid smoke', 'soy sauce'],
    servings: 10
  },
  {
    title: 'Carot Cake',
    duration: 120,
    ingredients: ['carrots', 'flour', 'eggs', 'salt', 'milk', 'sugar'],
    servings: 10
  }
]

我想创建一个这样的数组：

['Crepes (60min)', ...]

到目前为止我的代码是这样的：

    const titlesWithDuration = recipes.map((titles) => {
      return `${titles.title} (${titles.duration}min)`; 
    }); 

console.log(titlesWithDuration)

问题是，如果我使用运算符之类的东西，例如：

titles.duration <= 60

我会得到这个：

["Crepes (truemin)","Scrambled Eggs (truemin)","Vegan Salmon (falsemin)","Carot Cake (falsemin)"]

如何使用运算符来输出字符串？

Answer 1

map 执行 one-for-one 映射，但在您的示例中，您想省略一些元素。那是一个过滤操作。

对于绝大多数用例，您只需 filter and then map:

const titlesWithDuration = recipes
    .filter(({duration}) => duration <= 60)
    .map(({title, duration}) => `${title} (${duration}min)`);

实例：

const recipes = [
  {
    title: 'Crepes',
    duration: 60,
    ingredients: ['butter', 'flour', 'eggs', 'milk', 'salt'],
    servings: 3
  },
  {
    title: 'Scrambled Eggs',
    duration: 20,
    ingredients: ['eggs', 'milk', 'salt'],
    servings: 2
  },
  {
    title: 'Vegan Salmon',
    duration: 60 * 24 * 3, // 3 days
    ingredients: ['carrots', 'olive oil', 'nori sheets', 'liquid smoke', 'soy sauce'],
    servings: 10
  },
  {
    title: 'Carot Cake',
    duration: 120,
    ingredients: ['carrots', 'flour', 'eggs', 'salt', 'milk', 'sugar'],
    servings: 10
  }
];

const titlesWithDuration = recipes
    .filter(({duration}) => duration <= 60)
    .map(({title, duration}) => `${title} (${duration}min)`);

console.log(titlesWithDuration);

在 罕见的 情况下，您可以使用 filter 和 Array.from 的生成器函数版本（使用其映射回调参数）构建结果：

function* filter(it, callback) {
    for (const element of it) {
        if (callback(element)) {
            yield element;
        }
    }
}

const titlesWithDuration = Array.from(
    filter(recipes, ({duration}) => duration <= 60),
    ({title, duration}) => `${title} (${duration}min)`
);

实例：

const recipes = [
  {
    title: 'Crepes',
    duration: 60,
    ingredients: ['butter', 'flour', 'eggs', 'milk', 'salt'],
    servings: 3
  },
  {
    title: 'Scrambled Eggs',
    duration: 20,
    ingredients: ['eggs', 'milk', 'salt'],
    servings: 2
  },
  {
    title: 'Vegan Salmon',
    duration: 60 * 24 * 3, // 3 days
    ingredients: ['carrots', 'olive oil', 'nori sheets', 'liquid smoke', 'soy sauce'],
    servings: 10
  },
  {
    title: 'Carot Cake',
    duration: 120,
    ingredients: ['carrots', 'flour', 'eggs', 'salt', 'milk', 'sugar'],
    servings: 10
  }
];

function* filter(it, callback) {
    for (const element of it) {
        if (callback(element)) {
            yield element;
        }
    }
}

const titlesWithDuration = Array.from(
    filter(recipes, ({duration}) => duration <= 60),
    ({title, duration}) => `${title} (${duration}min)`
); 

console.log(titlesWithDuration);

Answer 2

Array 的 map 和 filter 方法将有助于实现预期的结果。 map 将进行转换，filter 将帮助应用条件。

result = recipes.filter(ele=>ele.duration <=60).map(ele=> `${ele.title} (${ele.duration}min)`);

结果会是

['Crepes (60min)', 'Scrambled Eggs (20min)']

如何使用 .map 数组方法找出小于或等于 60 的整数

How can i pick out the integers that are smaller or equal to 60 with .map array method

javascript

arrays

object

operators

operator-keyword