Une liste de courses (im)muable pour de délicieuses pâtes au pesto

Les pâtes au pesto sont la preuve que D.ieu existe

Il y a peu de choses dans la vie qui me procurent plus de plaisir qu'une bonne dose de pesto frais sur des Capellini (Cheveux d'Ange) faits maison. Je suis un véritable fin gourmet - surtout lorsqu'il s'agit de cuisine italienne - et j'essaie toujours des recettes plus complexes, mais la simplicité et le plaisir d'un plat aussi minimaliste ne cessent de me satisfaire. Si j'avais la (mal)chance de choisir un dernier repas, ce serait une décision difficile entre les sushis et le pesto plutôt que les pâtes, mais je pense toujours que les pâtes au pesto finissent par l'emporter.

Toutes ces discussions sur le pesto me donnent faim

Que dois-je faire ? Eh bien, préparez des pâtes au pesto bien sûr. Parfois, il suffit de dire : "Quando a Roma !"

Commençons par dresser une liste d'ingrédients à acheter sur notre sympathique marché italien, "Il Mercato di Giovanni". Nous allons créer notre liste de courses à partir de deux recettes utilisant à la fois des tableaux d'objets immuables et mutables. Même s’il serait plus efficace d’écrire simplement ce dont nous avons besoin, vous savez que c’est bien plus amusant. Je peux dire que vous êtes affamé pour en savoir plus sur la façon dont nous pouvons programmer notre façon de préparer des pâtes au pesto, alors creusons directement. "Mangia Mangia!"

Création de tableaux de recettes de pâtes et de pesto séparés

Nous commencerons par déclarer des variables pour pastaRecipeArray et pestoRecipeArray, chaque variable étant affectée à un tableau d'objets, où chaque objet représente un ingrédient individuel.

Lorsque nous attribuons des valeurs de tableau à chaque variable, nous utilisons la méthode Object.freeze() pour garantir qu'elles sont immuables. (plus à ce sujet plus tard)

Chaque objet recette possède trois propriétés, avec des paires clé-valeur comme suit :

• 'name' = Le nom de l'ingrédient sous forme de 'string'
• 'recette' = Une ou plusieurs valeurs, sous la forme d'un 'tableau', indiquant pour quelle(s) recette(s) l'ingrédient est nécessaire (pâtes, pesto ou les deux)
• 'price' = Le prix de l'ingrédient en USD, sous la forme d'un 'chiffre', utilisant un contenu factice assez irréaliste

(remarque : j'ai omis les quantités et d'autres détails pour que les choses restent brèves et relativement simples dans cet article. Nous pourrions également implémenter ces objets en utilisant JSON, mais nous gardons les choses faciles à digérer ici.)

Le code pour établir ces tableaux ressemblera à ceci :

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

Vous remarquerez encore une fois que la clé de recette pointe vers une valeur qui se présente sous la forme d'un tableau. Nous l'avons configuré de cette façon car certains ingrédients sont utilisés dans les deux recettes.

Pour tester que pastaRecipeArray est correctement configuré, nous pouvons utiliser la méthode .forEach(), une fonction de rappel utilisée pour parcourir chaque objet du tableau. En utilisant l'ingrédient comme paramètre, nous pouvons le connecter à la console comme suit :

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

Lorsque vous inspectez la console, vous devriez voir quelque chose comme le résultat suivant :

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}

De même, nous pouvons enregistrer notre pestoRecipeArray comme ceci :

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

Ce qui donne ce qui suit :

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}

(remarque : lorsque vous voyez des sorties telles que Array(1) et Array(2), vous souhaiterez soit réécrire la fonction pour sélectionner ces clés, soit simplement cliquer sur le tableau dans la console pour voir les détails de ce qu'il contient.)

Création d'un tableau de liste de courses

Maintenant que nous avons établi nos tableaux de recettes, nous souhaitons passer à l'étape suivante : créer un tableau de listes de courses. Pour ce faire, nous voudrons combiner nos tableaux d'objets pastaRecipeArray et pestoRecipeArray dans une nouvelle variable mutable nommée shoppingListArray. Nous ferons cela en utilisant l'opérateur spread... comme ceci :

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

Utilisons maintenant le console.log() suivant pour voir à quoi ressemble notre nouvelle liste. À l'avenir, nous enregistrerons les valeurs des propriétés dans l'objet plutôt que dans l'objet complet, afin de supprimer une partie de l'encombrement. Vous souhaiterez utiliser ce code pour voir comment notre liste change après chaque étape du processus.

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

Nous pouvons voir que nos listes ont été regroupées en une seule dans la console, cette fois en enregistrant uniquement le nom de chaque ingrédient.

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

Tableaux immuables ou mutables

Pourquoi devrions-nous rendre pastaRecipeArray et pestoRecipeArray immuables ? Les rendre immuables fait en sorte que nous ne pouvons pas modifier leurs valeurs une fois qu'elles ont été attribuées. Nous ne voulons pas simplement déchirer ces recettes. Nous voulons les conserver pour un autre jour glorieux. Ces recettes familiales immuables doivent perdurer, peu importe ce que nous sommes sur le point d’écrire sur notre liste de courses temporaire et mutable.

Nous souhaitons également pouvoir ajouter ou soustraire des ingrédients de notre shoppingListArray nouvellement créé pour préparer ce plat selon nos goûts spécifiques, sans affecter nos recettes originales bien sûr.

Adding, replacing, and deleting ingredients

As you may have noticed, when we combined our pasta and pesto recipes into our shopping list we ended up with duplicates for "Extra Virgin Olive Oil" and "Kosher Salt". We don't need to buy these twice so let's get rid of them. There are fancier ways to eliminate duplicates, but for now we will use .splice() to remove the first Extra Virgin Olive Oil object.

The .splice() method destructively deletes or replaces elements in an array. The first parameter represents the first element we are deleting and the second parameter represents how many elements we want to delete from that start point. While "Extra Virgin Olive Oil" is the second object in the array, arrays start at '0', so technically the second object is represented by a '1'. Let's execute the following:

shoppingListArray.splice(1, 1)

In the console you will see that there is now only one "Extra Virgin Olive Oil" object. (note: If you try to use .splice() or similar methods on one of our original recipe arrays you will get a TypeError because we used Object.freeze(), making them immutable.)

We still have an extra "Kosher Salt", and now we are going to use .splice() to it's full power. In addition to our first two parameters we have a third parameter that can replace elements in an array with new elements. I love to add a bit of lemon to my pesto, and I don't like food that is too salty, so let's go ahead and replace our extra "Kosher Salt" with our new "Lemon" object. We will declare our lemon object as a variable for better readibility and include it as the third .splice() parameter.

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

shoppingListArray.splice(6, 1, lemon)

Today I'm feeling a bit saucy so let's change things up a bit and add in some roasted tomatoes using .push(). With .push() we can add elements to the end of the array, with each parameter representing a new element. So let's add some "Cherry Tomatoes" to our list. Come to think of it, I forgot the "Garlic" too!

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

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

shoppingListArray.push(tomatoes, garlic)

Organizing our shopping list

Now that we have all our ingredients well established let's organize them in a way that will make our shopping experience seamless.

Let's organize our list alphabetically using .sort().

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

  if (nameA < nameB) {
    return -1
  }
  if (nameA > nameB) {
    1
  }
  return 0
})

Our shopping list now looks like this in the console.

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

Planning ahead for our expected costs

Now we are ready to go to the market, but first let's make sure we know how much money we need, using .reduce(). There is a lot to go over with .reduce(), and I'm getting hungry, so I'll skip over the details.

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.

Creating new recipe list arrays

So we went to the store and got our ingredients, but now we want to separate our ingredients back into their respective recipes, just to lay everything out on the table and keep things in order. Lets create two new arrays, pastaIngredients and pestoIngredients using .filter(), .includes(), and of course .forEach() to log them to the console.

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)
})

"Wrapping" it up

As you can see from logging these to the console we successfully created a shoppingListArray that didn't modify our original immutable recipe arrays, pastaRecipeArray and pestoRecipeArray. We then were able to mutably modify the shoppingListArray in a destructive manner to add, delete, and replace ingredients to our liking. We also calculated how much we needed to spend before going to the store. Lastly, we were able to separate these ingredients back into their respective recipes, pastaIngredients and pestoIngredients in preparation for a brilliant meal.

Well, what a delicious dish that was. I hope you enjoyed it as much as I did. Again, Mangia Mangia!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!