香蒜酱意大利面证明上帝存在

生活中没有什么比在自制的卡佩里尼（天使发）上享用大量新鲜香蒜沙司更让我高兴的了。我是一个真正的美食家 - 尤其是在意大利美食方面 - 并且总是尝试更复杂的食谱，但这种极简主义菜肴的简单性和享受永远不会停止满足。如果我有幸选择最后一顿饭，那么在寿司和香蒜酱和意大利面之间做出艰难的决定将是一个艰难的决定，但我仍然认为香蒜意大利面最终胜出。

所有关于香蒜酱的讨论让我很饿

我该怎么办？好吧，当然是做香蒜意大利面。有时你只需说：“Quando a Roma！”

让我们先列出从我们友好的意大利市场“Il Mercato di Giovanni”购买的食材清单。我们将使用不可变和可变对象数组从两个食谱创建购物清单。虽然简单地写出我们需要的东西会更有效，但你知道这更有趣。我可以告诉你渴望了解更多关于如何编程制作香蒜酱意大利面的信息，所以让我们挖掘。“Mangia Mangia！”

创建单独的意大利面和香蒜酱食谱数组

我们首先声明 PastaRecipeArray 和 pestoRecipeArray 的变量，每个变量分配给一个对象数组，其中每个对象代表一种单独的成分。

当我们为每个变量分配数组值时，我们使用 Object.freeze() 方法来确保它们是不可变的。 （稍后详细介绍）

每个配方对象具有三个属性，键值对如下：

• '名称' = '字符串'形式的成分名称
• 'recipe' = 一个或多个值，以“数组”的形式表示，指示哪种配方需要该成分（意大利面、香蒜酱或两者）
• '价格' = 成分的美元价格，以“数字”的形式，使用相当不切实际的虚拟内容

（注意：我在这篇文章中省略了数量和其他细节，以使事情简短且相对简单。我们也可以使用 JSON 来实现这些对象，但我们让事情易于消化 这里。）

建立这些数组的代码将如下所示：

const pastaRecipeArray = Object.freeze([
  { "name": "Eggs", "recipe": ["pasta"], "price": 6.99 },
  { "name": "Extra Virgin Olive Oil", "recipe": ["pasta", "pesto"], "price": 12.59 },
  { "name": "Kosher Salt", "recipe": ["pasta", "pesto"], "price": 7.89 },
  { "name": "Semolina Flour", "recipe": ["pasta"], "price": 12.95 }
])

const pestoRecipeArray = Object.freeze([
  { "name": "Basil", "recipe": ["pesto"], "price": 6.99 },
  { "name": "Black Pepper", "recipe": ["pesto"], "price": 9.99 },
  { "name": "Extra Virgin Olive Oil", "recipe": ["pasta", "pesto"], "price": 12.59 },
  { "name": "Kosher Salt", "recipe": ["pasta", "pesto"], "price": 7.89 },
  { "name": "Parmesan", "recipe": ["pesto"], "price": 15.99 },
  { "name": "Pine Nuts", "recipe": ["pesto"], "price": 13.98 }
])

您会再次注意到配方键指向一个数组形式的值。我们这样设置是因为两个食谱中都使用了一些成分。

为了测试 PastaRecipeArray 是否正确设置，我们可以利用 .forEach() 方法，这是一个用于迭代数组中每个对象的回调函数。使用成分作为参数，我们可以将其登录到控制台，如下所示：

pastaRecipeArray.forEach((ingredient) => {
  console.log(ingredient)
})

当您检查控制台时，您应该看到类似以下输出的内容：

Object {name: "Eggs", recipe: Array(1), price: 6.99}
Object {name: "Extra Virgin Olive Oil", recipe: Array(2), price: 12.59}
Object {name: "Kosher Salt", recipe: Array(2), price: 7.89}
Object {name: "Semolina Flour", recipe: Array(1), price: 12.95}

同样，我们可以像这样记录我们的pestoRecipeArray：

pestoRecipeArray.forEach((ingredient) => {
  console.log(ingredient)
})

结果如下：

Object {name: "Basil", recipe: Array(1), price: 6.99}
Object {name: "Black Pepper", recipe: Array(1), price: 9.99}
Object {name: "Extra Virgin Olive Oil", recipe: Array(2), price: 12.59}
Object {name: "Kosher Salt", recipe: Array(2), price: 7.89}
Object {name: "Parmesan", recipe: Array(1), price: 15.99}
Object {name: "Pine Nuts", recipe: Array(1), price: 13.98}

（注意：当您看到 Array(1) 和 Array(2) 等输出时，您可能想要重写函数来选择这些键，或者只需单击控制台中的数组即可查看详细信息它包含什么。）

创建购物清单数组

现在我们已经建立了食谱数组，我们想要继续下一步，创建一个购物清单数组。为此，我们需要将对象数组 PastaRecipeArray 和 pestoRecipeArray 组合到一个名为 shoppingListArray 的新可变变量中。我们将使用扩展运算符来做到这一点......就像这样：

const shoppingListArray = [...pastaRecipeArray, ...pestoRecipeArray]

现在让我们使用下面的 console.log() 来看看我们的新列表是什么样子的。展望未来，我们将记录对象内的属性值而不是整个对象，以消除一些混乱。您将需要使用此代码来查看我们的列表在流程的每个步骤之后如何变化。

shoppingListArray.forEach((ingredient) => {
      console.log(ingredient.name)
})

我们可以看到我们的列表已在控制台中合并为一个，这次仅记录每种成分名称。

Eggs
Extra Virgin Olive Oil
Kosher Salt
Semolina Flour
Basil
Black Pepper
Extra Virgin Olive Oil
Kosher Salt
Parmesan
Pine Nuts

不可变数组与可变数组

为什么我们应该使 PastaRecipeArray 和 pestoRecipeArray 不可变？使它们不可变使得我们在分配它们后无法更改它们的值。我们不想撕毁这些食谱。我们希望拯救他们，迎接另一个辉煌的一天。无论我们要在临时的、可变的购物清单上写什么，这些一成不变的家庭食谱都需要继续下去。

我们还希望能够从新创建的 shoppingListArray 中添加或删除成分，以使这道菜符合我们的特定口味，当然不会影响我们原来的食谱。

添加、替换和删除成分

正如您可能已经注意到的，当我们将意大利面和香蒜酱食谱合并到购物清单中时，我们最终得到了“特级初榨橄榄油”和“犹太盐”的重复项。我们不需要两次购买这些东西，所以我们把它们扔掉吧。有一些更奇特的方法可以消除重复项，但现在我们将使用 .splice() 来删除第一个特级初榨橄榄油对象。

.splice() 方法会破坏性地删除或替换数组中的元素。第一个参数表示我们要删除的第一个元素，第二个参数表示我们要从该起点删除多少个元素。虽然“Extra Virgin Olive Oil”是数组中的第二个对象，但数组从“0”开始，因此从技术上讲，第二个对象由“1”表示。让我们执行以下命令：

shoppingListArray.splice(1, 1)

在控制台中，您将看到现在只有一个“Extra Virgin Olive Oil”对象。 （注意：如果您尝试在我们的原始配方数组之一上使用 .splice() 或类似方法，您将收到 TypeError，因为我们使用了 Object.freeze()，使它们不可变。）

我们还有额外的“犹太盐”，现在我们将充分利用 .splice() 的功能。除了前两个参数之外，我们还有第三个参数，可以用新元素替换数组中的元素。我喜欢在香蒜酱中添加一点柠檬，而且我不喜欢太咸的食物，所以让我们继续用新的“柠檬”对象替换多余的“犹太盐”。我们将把柠檬对象声明为变量以提高可读性，并将其作为第三个 .splice() 参数。

const lemon = { "name": "Lemon", "recipe": ["pesto"], "price": 2.04 }

shoppingListArray.splice(6, 1, lemon)

今天我感觉有点俏皮所以让我们稍微改变一下并使用 .push() 添加一些烤西红柿。使用 .push() 我们可以将元素添加到数组末尾，每个参数代表一个新元素。 因此，让我们在列表中添加一些“樱桃番茄”。想想看，我也忘记了“大蒜”！

const tomatoes = { "name": "Cherry Tomatoes", "recipe": ["pesto"], "price": 5.99 }

const garlic = { "name": "Garlic", "recipe": ["pesto"], "price": 2.99 }

shoppingListArray.push(tomatoes, garlic)

整理我们的购物清单

现在我们已经掌握了所有的成分，让我们以一种使我们的购物体验无缝的方式组织它们。

让我们使用 .sort() 按字母顺序组织列表。

shoppingListArray.sort((a, b) => {
  const nameA = a.name
  const nameB = b.name

  if (nameA  nameB) {
    1
  }
  return 0
})

我们的购物清单现在在控制台中看起来像这样。

Basil
Black Pepper
Cherry Tomatoes
Eggs
Extra Virgin Olive Oil
Garlic
Kosher Salt
Lemon
Parmesan
Pine Nuts
Semolina Flour

提前规划我们的预期成本

现在我们准备进入市场，但首先让我们使用 .reduce() 确保知道我们需要多少钱。 .reduce() 有很多东西需要讨论，而且我饿了，所以我将跳过细节。

const ingredientsPrice = shoppingListArray.reduce((accumulator, ingredient) => {
  return accumulator   ingredient.price
}, 0)

console.log("You will need $"   ingredientsPrice   " to make pesto pasta. Man is life is expensive.")
// You will need $98.39 to make pesto pasta. Wow, life is expensive.

创建新的配方列表数组

所以我们去商店买了原料，但现在我们想将原料重新分成各自的食谱，只是为了将所有东西都放在桌子上并保持秩序。让我们使用 .filter()、.includes() 创建两个新数组，pastaIngredients 和 pestoIngredients，当然还有 .forEach() 将它们记录到控制台。

const pastaIngredients = shoppingListArray.filter((ingredient) => {
  return ingredient.recipe.includes('pasta')
})

pastaIngredients.forEach((ingredient) => {
  console.log(ingredient.name)
})

const pestoIngredients = shoppingListArray.filter((ingredient) => {
  return ingredient.recipe.includes('pesto')
})

pestoIngredients.forEach((ingredient) => {
  console.log(ingredient.name)
})

“包裹”起来

正如您将这些记录到控制台所看到的，我们成功创建了一个 shoppingListArray，它没有修改我们原来的不可变食谱数组、pastaRecipeArray 和 pestoRecipeArray。然后，我们能够以破坏性的方式可变地修改 shoppingListArray，以根据我们的喜好添加、删除和替换成分。我们还计算了去商店之前需要花多少钱。最后，我们能够将这些成分分离回各自的食谱、面食成分和香蒜酱成分中，为一顿丰盛的大餐做好准备。

嗯，那是多么美味的菜。我希望你和我一样喜欢它。 再次，Mangia Mangia！