Eine (un)veränderliche Einkaufsliste für eine köstliche Pesto-Pasta

Pesto-Nudeln sind der Beweis dafür, dass Gott existiert

Es gibt wenige Dinge im Leben, die mir mehr Freude bereiten als eine gehäufte Portion frisches Pesto über hausgemachten Capellini (Engelshaar). Ich bin ein echter Feinschmecker – vor allem, wenn es um die italienische Küche geht – und probiere immer komplexere Rezepte aus, aber die Einfachheit und der Genuss eines so minimalistischen Gerichts sind immer wieder aufs Neue zufriedenstellend. Wenn ich das (Pech-)Glück hätte, mich für eine letzte Mahlzeit entscheiden zu müssen, wäre es eine schwierige Entscheidung zwischen Sushi und Pesto statt Pasta, aber ich denke immer noch, dass Pesto-Pasta am Ende die Nase vorn hat.

Das ganze Gerede über Pesto macht mich hungrig

Was soll ich tun? Nun, natürlich machen Sie Pesto-Nudeln. Manchmal muss man einfach sagen: „Quando a Roma!“

Erstellen wir zunächst eine Liste der Zutaten, die wir auf unserem freundlichen italienischen Markt „Il Mercato di Giovanni“ kaufen können. Wir werden unsere Einkaufsliste aus zwei Rezepten erstellen, die sowohl unveränderliche als auch veränderliche Objektarrays verwenden. Obwohl es effizienter wäre, einfach aufzuschreiben, was wir brauchen, wissen Sie, dass das einfach viel mehr Spaß macht. Ich kann Ihnen sagen, dass Sie hungrig darauf warten, mehr darüber zu erfahren, wie wir unseren Weg zu Pesto-Nudeln programmieren können, also lasst uns eintauchen gleich loslegen. „Mangia Mangia!“

Erstellen separater Pasta- und Pesto-Rezeptarrays

Wir beginnen mit der Deklaration von Variablen für PastaRecipeArray und PestoRecipeArray, wobei jede Variable einem Array von Objekten zugewiesen wird, wobei jedes Objekt eine einzelne Zutat darstellt.

Wenn wir jeder Variablen Array-Werte zuweisen, verwenden wir die Methode Object.freeze(), um sicherzustellen, dass sie unveränderlich sind. (dazu später mehr)

Jedes Rezeptobjekt verfügt über drei Eigenschaften mit folgenden Schlüssel-Wert-Paaren:

• 'name' = Der Name der Zutat in Form einer 'Zeichenfolge'
• 'recipe' = Ein oder mehrere Werte in Form eines „Arrays“, das angibt, für welche Rezepte die Zutat benötigt wird (Nudeln, Pesto oder beides)
• 'Preis' = Der Preis der Zutat in USD, in Form einer „Zahl“, unter Verwendung ziemlich unrealistischer Dummy-Inhalte

(Hinweis: Ich habe Mengenangaben und andere Details weggelassen, um die Dinge in diesem Beitrag kurz und relativ einfach zu halten. Wir könnten diese Objekte auch mit JSON implementieren, aber wir sorgen dafür, dass die Dinge leicht zu verdaulich hier.)

Der Code zum Einrichten dieser Arrays sieht etwa so aus:

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

Sie werden erneut feststellen, dass der Rezeptschlüssel auf einen Wert verweist, der in Form eines Arrays vorliegt. Wir haben es so eingerichtet, weil einige Zutaten in beiden Rezepten verwendet werden.

Um zu testen, ob PastaRecipeArray richtig eingerichtet ist, können wir die Methode .forEach() verwenden, eine Rückruffunktion, die zum Durchlaufen jedes Objekts im Array verwendet wird. Mit der Zutat als Parameter können wir sie wie folgt in die Konsole einloggen:

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

Wenn Sie die Konsole überprüfen, sollten Sie etwa die folgende Ausgabe sehen:

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}

Ähnlich können wir unser PestoRecipeArray wie folgt protokollieren:

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

Was Folgendes ergibt:

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}

(Hinweis: Wenn Sie Ausgaben wie Array(1) und Array(2) sehen, möchten Sie entweder die Funktion neu schreiben, um diese Schlüssel auszuwählen, oder einfach auf das Array in der Konsole klicken, um die Details anzuzeigen was es enthält.)

Erstellen eines Einkaufslisten-Arrays

Da wir nun unsere Rezept-Arrays erstellt haben, wollen wir mit dem nächsten Schritt fortfahren und ein Einkaufslisten-Array erstellen. Dazu möchten wir unsere Objektarrays „pastaRecipeArray“ und „pestoRecipeArray“ in einer neuen veränderlichen Variablen namens „shoppingListArray“ kombinieren. Wir machen das mit dem Spread-Operator ... etwa so:

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

Nun verwenden wir die folgende console.log(), um zu sehen, wie unsere neue Liste aussieht. In Zukunft werden wir Eigenschaftswerte innerhalb des Objekts und nicht des gesamten Objekts protokollieren, um etwas Unordnung zu vermeiden. Sie möchten diesen Code verwenden, um zu sehen, wie sich unsere Liste nach jedem Schritt des Prozesses ändert.

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

Wir können sehen, dass unsere Listen in der Konsole zu einer zusammengefasst wurden, wobei dieses Mal nur jeder Zutatenname protokolliert wird.

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

Unveränderliche vs. veränderliche Arrays

Warum sollten wir PastaRecipeArray und PestoRecipeArray unveränderlich machen? Wenn wir sie unveränderlich machen, können wir ihre Werte nach der Zuweisung nicht mehr ändern. Wir wollen diese Rezepte nicht einfach zerreißen. Wir wollen sie für einen weiteren herrlichen Tag aufbewahren. Diese unveränderlichen Familienrezepte müssen weiterleben, unabhängig davon, was wir gerade auf unsere vorübergehende, veränderliche Einkaufsliste schreiben.

Wir möchten auch in der Lage sein, Zutaten zu unserem neu erstellten ShoppingListArray hinzuzufügen oder daraus zu entfernen, um dieses Gericht nach unserem spezifischen Geschmack zuzubereiten, natürlich ohne Auswirkungen auf unsere Originalrezepte.

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!

Das obige ist der detaillierte Inhalt vonEine (un)veränderliche Einkaufsliste für eine köstliche Pesto-Pasta. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!