如何使用.map陣列方法找出小于或等于60的整數

 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)"]

我如何使用給我一個字串輸出的運算子？

uj5u.com熱心網友回復：

map進行一對一的映射，但在您的示例中，您想省略一些元素。這是一個過濾操作。

對于絕大多數用例，您可以filter然后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情況下，您可以使用and的生成器函式版本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);

uj5u.com熱心網友回復：

Array 的 map 和 filter 方法將有助于實作預期的結果。map 將進行轉換，過濾器將有助于應用條件。

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

結果是

 ['薄餅（60分鐘）'，'炒雞蛋（20分鐘）']

標籤：javascript 数组 目的 运营商 运算符关键字

上一篇：基于聚合嵌套值使用PHP對JSON進行排序

下一篇：我該如何在Javascript中存盤大量唯一條目？