如何向已包含 .map 和 .filter 的箭头函数添加 if 、 else if 和 else 条件？答案

【问题标题】：How do I add an if , else if, else condition to my arrow function which includes .map and .filter already?如何向已包含 .map 和 .filter 的箭头函数添加 if 、 else if 和 else 条件？
【发布时间】：2020-07-17 22:58:41
【问题描述】：

下面是一个函数，它需要在 options 数组中设置一个选定元素的 option.value。如果选择了 3 个或更多选项，则需要将其设置为每个 1.50 美元，如果选择了 6 个或更多选项，则需要将其设置为每个 1.00。现在它就像一个魅力，因为它只是从数组中获取 options.value 并将其设置为当前价格，但是我需要将此折扣功能添加到我的函数中。我怎样才能做到这一点？

我目前的工作功能没有折扣条件。

private getSelectedOptions(options) {
      return (options || []).filter(x => x.selected).map
         (option => ({ name: option.name, value: option.value || 0 }));
 }

选项数组

 "options": [
    {
      "name": "Red Pepper",
      "selected": false,
      "value": 2.00
    },
    {
      "name": "Garlic",
      "selected": false,
       "value": 2.00

    },
    {
      "name": "Cheese blend",
      "selected": false,
       "value": 2.00
    },
     {
      "name": "pineapple",
      "selected": false,
       "value": 2.00
    },
     {
      "name": "bacon",
      "selected": false,
       "value": 2.00
    },
    {
      "name": "green pepper",
      "selected": false,

    }

【问题讨论】：

标签： javascript arrays if-statement arrow-functions array.prototype.map

【解决方案1】：

首先将映射的数组保存在一个变量中，这样您就可以检查它的length 以确定所需的价格：

private getSelectedOptions(options) {
  const selectedItems = (options || []).filter(x => x.selected);
  const price = selectedItems.length >= 6
    ? 1
    : selectedItems.length >= 3
      ? 1.5
      : 2;
  return selectedItems.map(
    option => ({ name: option.name, value: option.value ? price : 0 })
  );
 }

const getSelectedOptions = (options) => {
  const selectedItems = (options || []).filter(x => x.selected);
  const price = selectedItems.length >= 6
    ? 1
    : selectedItems.length >= 3
      ? 1.5
      : 2;
  return selectedItems.map(
    option => ({ name: option.name, value: option.value ? price : 0 })
  );
};
 
 const options = [
  {
    "name": "Red Pepper",
    "selected": true,
    "value": 2.00
  },
  {
    "name": "Garlic",
    "selected": true,
     "value": 2.00

  },
  {
    "name": "Cheese blend",
    "selected": true,
     "value": 2.00
  },
   {
    "name": "pineapple",
    "selected": false,
     "value": 2.00
  },
   {
    "name": "bacon",
    "selected": false,
     "value": 2.00
  },
  {
    "name": "green pepper",
    "selected": true,

  }
];

console.log(getSelectedOptions(options));

如果选项可以有不同的值，请找出一个乘以它们的因子，例如 1 或 0.75 或 5：

const getSelectedOptions = (options) => {
  const selectedItems = (options || []).filter(x => x.selected);
  const factor = selectedItems.length >= 6
    ? 0.5
    : selectedItems.length >= 3
      ? 0.75
      : 1;
  return selectedItems.map(
    option => ({ name: option.name, value: option.value * factor })
  );
};
 
 const options = [
  {
    "name": "Red Pepper",
    "selected": true,
    "value": 5.00
  },
  {
    "name": "Garlic",
    "selected": true,
     "value": 2.00

  },
  {
    "name": "Cheese blend",
    "selected": true,
     "value": 2.00
  },
   {
    "name": "pineapple",
    "selected": false,
     "value": 2.00
  },
   {
    "name": "bacon",
    "selected": false,
     "value": 2.00
  },
  {
    "name": "green pepper",
    "selected": true,

  }
];

console.log(getSelectedOptions(options));

【讨论】：

将价格设置为 2 的第二个三元组可能会破坏代码，如果选项的起始值不是 2 或者甚至没有相同的值。
非常感谢。这无疑是正确的答案。如果你愿意的话，我只有最后一个补充。由于我在我的项目的另一个函数中使用 option.value，在它通过条件语句之后，无论如何将该价格变量转换为 option.value？
@evan 你想要一个乘数吗？见第二个 sn-p
是的，行得通！您的见解提出了我可能在此问题上遇到的另一个问题。但至少我走得更远。我也许可以自己解决剩下的问题。剩下的是，我必须对这个函数有另一个条件，因为披萨的大小决定了 option.value 和 factor 之间的比例。
+1 为 OP 和答案。在您的第一个 sn-p 中，在三元中，您也可以输入 undefined 而不是值 2，然后您可以写 value: option.value ? price : 0 而不是 value: option.value && price ? price : option.value ? option.value : 0 以设置默认价格，以防选择的数量少于 3，如果并非所有起始价格都是 2，如果未为该元素设置 options.value，则为 0。

【解决方案2】：

箭头函数是一个普通的JavaScript函数，所以，如果你把“()”去掉，把“{}”变成一个函数，用body，再次返回一个对象，return {}

【讨论】：