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

Es gibt wenige Dinge im Leben, die mir mehr Freude bereiten als eine große 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 sagen, dass Sie hungrig nach mehr darüber sind, wie wir unseren Weg zu Pesto-Nudeln programmieren können, also lasst uns gleich eintauchen: „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. (mehr dazu später)

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

• 'name' = Der Name der Zutat in Form einer 'Zeichenfolge'
• 'recipe' = Ein Wert oder Werte in Form eines „Arrays“, das angibt, für welche Rezepte die Zutat benötigt wird (Pasta, Pesto oder beides)
• 'price' = 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 ordnungsgemäß eingerichtet ist, können wir die Methode .forEach() verwenden, eine Rückruffunktion, die zum Durchlaufen jedes Objekts im Array verwendet wird. Mit „bestandteil“ als Parameter können wir ihn 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 zu Folgendem führt:

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 werden dies mit dem Spread-Operator tun ... 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.

Zutaten hinzufügen, ersetzen und löschen

Wie Sie vielleicht bemerkt haben, haben wir beim Zusammenfassen unserer Pasta- und Pesto-Rezepte in unserer Einkaufsliste Duplikate für „Extra Natives Olivenöl“ und „Koscheres Salz“ erhalten. Wir müssen diese nicht zweimal kaufen, also lasst uns sie loswerden. Es gibt ausgefallenere Möglichkeiten, Duplikate zu entfernen, aber zunächst verwenden wir .splice(), um das erste Extra Virgin Olive Oil-Objekt zu entfernen.

Die Methode .splice() löscht oder ersetzt Elemente in einem Array destruktiv. Der erste Parameter stellt das erste Element dar, das wir löschen, und der zweite Parameter gibt an, wie viele Elemente wir von diesem Startpunkt aus löschen möchten. Während „Natives Olivenöl extra“ das zweite Objekt im Array ist, beginnen Arrays bei „0“, sodass das zweite Objekt technisch gesehen durch eine „1“ dargestellt wird. Führen wir Folgendes aus:

shoppingListArray.splice(1, 1)

In der Konsole sehen Sie, dass es jetzt nur noch ein Objekt „Natives Olivenöl extra“ gibt. (Hinweis: Wenn Sie versuchen, .splice() oder ähnliche Methoden auf einem unserer ursprünglichen Rezept-Arrays zu verwenden, erhalten Sie einen TypeError, weil wir Object.freeze() verwendet haben, wodurch sie unveränderlich werden.)

Wir haben noch ein zusätzliches „Koscheres Salz“ und jetzt werden wir .splice() mit voller Leistung nutzen. Zusätzlich zu unseren ersten beiden Parametern haben wir einen dritten Parameter, der Elemente in einem Array durch neue Elemente ersetzen kann. Ich liebe es, meinem Pesto etwas Zitrone hinzuzufügen, und ich mag kein zu salziges Essen, also ersetzen wir unser zusätzliches „Koscheres Salz“ durch unser neues „Zitronen“-Objekt. Zur besseren Lesbarkeit deklarieren wir unser Lemon-Objekt als Variable und fügen es als dritten .splice()-Parameter ein.

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

shoppingListArray.splice(6, 1, lemon)

Heute fühle ich mich ein bisschen frech, also lasst uns die Dinge etwas abändern und mit .push() ein paar geröstete Tomaten hinzufügen. Mit .push() können wir Elemente am Ende des Arrays hinzufügen, wobei jeder Parameter ein neues Element darstellt. Fügen wir unserer Liste also einige „Cherrytomaten“ hinzu. Wenn ich darüber nachdenke, habe ich auch den „Knoblauch“ vergessen!

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

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

shoppingListArray.push(tomatoes, garlic)

Organisation unserer Einkaufsliste

Da wir nun alle unsere Zutaten gut etabliert haben, wollen wir sie so organisieren, dass unser Einkaufserlebnis reibungslos verläuft.

Lassen Sie uns unsere Liste alphabetisch mit .sort() organisieren.

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

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

Unsere Einkaufsliste sieht jetzt in der Konsole so aus.

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

Vorausschauende Planung unserer voraussichtlichen Kosten

Jetzt sind wir bereit, auf den Markt zu gehen, aber zuerst stellen wir mithilfe von .reduce() sicher, dass wir wissen, wie viel Geld wir benötigen. Es gibt viel zu besprechen mit .reduce() und ich werde langsam hungrig, also überspringe ich die 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.

Erstellen neuer Rezeptlisten-Arrays

Also sind wir in den Laden gegangen und haben unsere Zutaten geholt, aber jetzt wollen wir unsere Zutaten wieder in ihre jeweiligen Rezepte aufteilen, nur um alles auf den Tisch zu legen und die Dinge in Ordnung zu halten. Erstellen wir zwei neue Arrays, PastaIngredients und PestoIngredients, mit .filter(), .includes() und natürlich .forEach(), um sie in der Konsole zu protokollieren.

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

Ich schließe es ab

Wie Sie aus der Protokollierung dieser Daten in der Konsole ersehen können, haben wir erfolgreich ein ShoppingListArray erstellt, das unsere ursprünglichen unveränderlichen Rezeptarrays, PastaRecipeArray und PestoRecipeArray, nicht verändert hat. Anschließend konnten wir das ShoppingListArray auf destruktive Weise veränderlich modifizieren, um Zutaten nach unserem Geschmack hinzuzufügen, zu löschen und zu ersetzen. Wir haben auch berechnet, wie viel wir ausgeben müssen, bevor wir in den Laden gehen. Schließlich konnten wir diese Zutaten wieder in ihre jeweiligen Rezepte, Pasta-Zutaten und Pesto-Zutaten, aufteilen, um eine hervorragende Mahlzeit vorzubereiten.

Nun, was für ein köstliches Gericht das war. Ich hoffe, es hat euch genauso gut gefallen wie mir. Nochmal, Mangia Mangia!