Javascript 从数组中获取购物清单

Question

我是 javascript 的新手，所以我什至不知道从哪里开始。请有人可以帮助我。

我有这个配料表：

const Ingris = [

  {

    val: "onion,",

    amount: "1",

  },

  {

    val: "paprika",

    amount: "½ tsp",

  },

  {

    val: "yogurt",

    amount: "1/2 Cup",

  },

  {

    val: "fine sea salt",

    amount: "½ tsp  ",

  },

];

我想根据以下这些变量对它们进行分类：

var spices = ["paprika", "parsley", "peppermint", "poppy seed", "rosemary"];

var meats = ["steak", "ground beef", "stewing beef", "roast beef", "ribs"];

var dairy = ["milk", "eggs", "cheese", "yogurt"];

var produce = ["peppers", "radishes", "onions", "tomatoes"];

这就是我想要获得的：

// desired output:

const ShoppingList = [

  {

    produceOutput: [

      {

        val: "garlic, minced",

        amount: "8 cloves ",

      },

    ],

    spicesOutput: [

      {

        val: "paprika",

        amount: "½ tsp  ",

      },

      {

        val: "onion",

        amount: "1",

      },

    ],

    NoCategoryOutput: [

      {

        val: "fine sea salt",

        amount: "½ tsp",

      },

    ],

  },

];

Answer 1

正如这里的其他人建议使用 modernreduce或数组方法......以防万一您需要支持旧浏览器或更“经典”的实现，您可以使用includes带有数组方法的简单循环。forEachforindexOfconst Ingris = [{ val: "onion,", amount: "1", },&nbsp; { val: "paprika", amount: "½ tsp",&nbsp; },&nbsp; { val: "yogurt", amount: "1/2 Cup", },&nbsp; { val: "fine sea salt", amount: "½ tsp&nbsp; ", },];var spices = ["paprika", "parsley", "peppermint", "poppy seed", "rosemary"];var meats = ["steak", "ground beef", "stewing beef", "roast beef", "ribs"];var dairy = ["milk", "eggs", "cheese", "yogurt"];var produce = ["peppers", "radishes", "onions", "tomatoes"];ShoppingList = {&nbsp; produceOutput: [],&nbsp; spicesOutput: [],&nbsp; meatsOutput: [],&nbsp; dairyOutput: [],&nbsp; NoCategoryOutput: [],};for (var i = 0; i < Ingris.length; i++) {&nbsp; var ingredient = Ingris[i];&nbsp; if (spices.indexOf(ingredient.val) >= 0) {&nbsp; &nbsp; ShoppingList.spicesOutput.push(ingredient);&nbsp; } else if (meats.indexOf(ingredient.val) >= 0) {&nbsp; &nbsp; ShoppingList.meatsOutput.push(ingredient);&nbsp; } else if (dairy.indexOf(ingredient.val) >= 0) {&nbsp; &nbsp; ShoppingList.dairyOutput.push(ingredient);&nbsp; } else if (produce.indexOf(ingredient.val) >= 0) {&nbsp; &nbsp; ShoppingList.produceOutput.push(ingredient);&nbsp; } else {&nbsp; &nbsp; ShoppingList.NoCategoryOutput.push(ingredient);&nbsp; }}console.log(ShoppingList)还要记住，如果在 Ingris 中有一些重复的成分 - 它们不会加总它们的数量。为此，您需要以某种数字格式（例如十进制数）提供或转换每个金额。此外，如果当前成分已经在列表中，并且在这种情况下 - 添加它们的数量，而不是简单的push会有一些额外的逻辑检查。

Answer 2

您可以使用基本的减速器来进行此类操作。const categorizedOutput = Ingris.reduce((acc, cur) => {&nbsp; if (spices.includes(cur.val)) {&nbsp; &nbsp; acc.spices.push(cur);&nbsp; } else if (meats.includes(cur.val)) {&nbsp; &nbsp; acc.meats.push(cur);&nbsp; } else if (dairy.includes(cur.val)) {&nbsp; &nbsp; acc.dairy.push(cur);&nbsp; } else if (produce.includes(cur.val)) {&nbsp; &nbsp; acc.produce.push(cur);&nbsp; } else {&nbsp; &nbsp; acc.other.push(cur);&nbsp; }&nbsp; return acc;}, {&nbsp; spices: [],&nbsp; meats: [],&nbsp; dairy: [],&nbsp; produce: [],&nbsp; other: []})

Answer 3

这是一种稍微更加参数化的方法。我将不同的食物类别组合到一个对象中cat，并允许成分的部分匹配（单数匹配复数）：const cat={&nbsp;&nbsp; spices: ["paprika", "parsley", "peppermint", "poppy seed", "rosemary","fine sea salt"],&nbsp; meats: ["steak", "ground beef", "stewing beef", "roast beef", "ribs"],&nbsp; dairy: ["milk", "eggs", "cheese", "yogurt"],&nbsp; produce: ["peppers", "radishes", "onions", "tomatoes"]};var ingredients=[&nbsp; {"val":"onion"&nbsp; &nbsp; &nbsp; &nbsp;, "amount":"1"},&nbsp; {"val":"paprika"&nbsp; &nbsp; &nbsp; , "amount":"½ tsp"},&nbsp; {"val":"yogurt"&nbsp; &nbsp; &nbsp; &nbsp;, "amount":"1/2 Cup"},&nbsp; {"val":"fine sea salt", "amount":"½ tsp"}];const shop=ingredients.reduce((acc,ing)=>{&nbsp; Object.entries(cat).some(([ca,pr])=>&nbsp; &nbsp; pr.find(p=>p.indexOf(ing.val)>-1) &&&nbsp;&nbsp; &nbsp; (acc[ca]=acc[ca]||[]).push(ing) )&nbsp; || (acc.other=acc.other||[]).push(ing);&nbsp; return acc;}, {});console.log(shop);

Answer 4

var spices&nbsp; = ["paprika", "parsley", "peppermint", "poppy seed", "rosemary"];var meats&nbsp; &nbsp;= ["steak", "ground beef", "stewing beef", "roast beef", "ribs"];var dairy&nbsp; &nbsp;= ["milk", "eggs", "cheese", "yogurt"];var produce = ["peppers", "radishes", "onions", "tomatoes"];var ingredients=[&nbsp; {"val":"onion,"&nbsp; &nbsp; &nbsp; &nbsp;, "amount":"1"},&nbsp; {"val":"paprika"&nbsp; &nbsp; &nbsp; , "amount":"½ tsp"},&nbsp; {"val":"yogurt"&nbsp; &nbsp; &nbsp; &nbsp;, "amount":"1/2 Cup"},&nbsp; {"val":"fine sea salt", "amount":"½ tsp"}];var shoppingList={spices:[], meats:[], dairy:[], produce:[], other:[]};ingredients.forEach(ingredient=>{&nbsp; if(spices.includes(ingredient.val)) shoppingList.spices.push(ingredient);&nbsp; else if(meats.includes(ingredient.val)) shoppingList.meats.push(ingredient);&nbsp; else if(dairy.includes(ingredient.val)) shoppingList.dairy.push(ingredient);&nbsp; else if(produce.includes(ingredient.val)) shoppingList.produce.push(ingredient);&nbsp; else shoppingList.other.push(ingredient);});console.log(shoppingList);