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带有数组方法的简单循环。forEachforindexOf

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

ShoppingList = {

  produceOutput: [],

  spicesOutput: [],

  meatsOutput: [],

  dairyOutput: [],

  NoCategoryOutput: [],

};

for (var i = 0; i < Ingris.length; i++) {

  var ingredient = Ingris[i];

  if (spices.indexOf(ingredient.val) >= 0) {

    ShoppingList.spicesOutput.push(ingredient);

  } else if (meats.indexOf(ingredient.val) >= 0) {

    ShoppingList.meatsOutput.push(ingredient);

  } else if (dairy.indexOf(ingredient.val) >= 0) {

    ShoppingList.dairyOutput.push(ingredient);

  } else if (produce.indexOf(ingredient.val) >= 0) {

    ShoppingList.produceOutput.push(ingredient);

  } else {

    ShoppingList.NoCategoryOutput.push(ingredient);

  }

}

console.log(ShoppingList)

还要记住，如果在 Ingris 中有一些重复的成分 - 它们不会加总它们的数量。为此，您需要以某种数字格式（例如十进制数）提供或转换每个金额。此外，如果当前成分已经在列表中，并且在这种情况下 - 添加它们的数量，而不是简单的push会有一些额外的逻辑检查。

Answer 2

您可以使用基本的减速器来进行此类操作。

const categorizedOutput = Ingris.reduce((acc, cur) => {

  if (spices.includes(cur.val)) {

    acc.spices.push(cur);

  } else if (meats.includes(cur.val)) {

    acc.meats.push(cur);

  } else if (dairy.includes(cur.val)) {

    acc.dairy.push(cur);

  } else if (produce.includes(cur.val)) {

    acc.produce.push(cur);

  } else {

    acc.other.push(cur);

  }

  return acc;

}, {

  spices: [],

  meats: [],

  dairy: [],

  produce: [],

  other: []

})

Answer 3

这是一种稍微更加参数化的方法。我将不同的食物类别组合到一个对象中cat，并允许成分的部分匹配（单数匹配复数）：

const cat={ 

  spices: ["paprika", "parsley", "peppermint", "poppy seed", "rosemary","fine sea salt"],

  meats: ["steak", "ground beef", "stewing beef", "roast beef", "ribs"],

  dairy: ["milk", "eggs", "cheese", "yogurt"],

  produce: ["peppers", "radishes", "onions", "tomatoes"]};

var ingredients=[

  {"val":"onion"       , "amount":"1"},

  {"val":"paprika"      , "amount":"½ tsp"},

  {"val":"yogurt"       , "amount":"1/2 Cup"},

  {"val":"fine sea salt", "amount":"½ tsp"}

];

const shop=ingredients.reduce((acc,ing)=>{

  Object.entries(cat).some(([ca,pr])=>

    pr.find(p=>p.indexOf(ing.val)>-1) && 

    (acc[ca]=acc[ca]||[]).push(ing) )

  || (acc.other=acc.other||[]).push(ing);

  return acc;

}, {});

console.log(shop);

Answer 4

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

var ingredients=[

  {"val":"onion,"       , "amount":"1"},

  {"val":"paprika"      , "amount":"½ tsp"},

  {"val":"yogurt"       , "amount":"1/2 Cup"},

  {"val":"fine sea salt", "amount":"½ tsp"}

];

var shoppingList={spices:[], meats:[], dairy:[], produce:[], other:[]};

ingredients.forEach(ingredient=>{

  if(spices.includes(ingredient.val)) shoppingList.spices.push(ingredient);

  else if(meats.includes(ingredient.val)) shoppingList.meats.push(ingredient);

  else if(dairy.includes(ingredient.val)) shoppingList.dairy.push(ingredient);

  else if(produce.includes(ingredient.val)) shoppingList.produce.push(ingredient);

  else shoppingList.other.push(ingredient);

});

console.log(shoppingList);