Senarai Beli-belah (Im) boleh ubah untuk Pasta Pesto Sedap

Pasta pesto adalah bukti bahawa G-d wujud

Terdapat beberapa perkara dalam hidup yang memberi saya lebih keseronokan daripada bantuan bertimbun-timbun pesto segar berbanding Capellini (Rambut Malaikat) buatan sendiri. Saya seorang penggemar makanan yang setia - terutamanya apabila ia datang kepada masakan Itali - dan sentiasa mencuba resipi yang lebih kompleks, tetapi kesederhanaan dan keseronokan hidangan minimalis sedemikian tidak pernah berhenti memuaskan. Jika saya bernasib baik untuk memilih hidangan terakhir, ia akan menjadi keputusan yang sukar antara sushi dan pesto berbanding pasta, tetapi saya masih fikir pasta pesto menang akhirnya.

Semua perbincangan tentang pesto ini membuatkan saya lapar

Apa yang perlu saya lakukan? Sudah tentu, buat pasta pesto. Kadang-kadang anda hanya perlu berkata, "Quando a Roma!"

Mari mulakan dengan membuat senarai bahan untuk dibeli dari Pasar Itali kami yang mesra, "Il Mercato di Giovanni." Kami akan membuat senarai beli-belah kami daripada dua resipi menggunakan tatasusunan objek tidak berubah dan boleh berubah. Walaupun adalah lebih cekap untuk hanya menulis apa yang kami perlukan, anda tahu bahawa ini lebih menyeronokkan. Saya boleh memberitahu anda kebuluran untuk mengetahui lebih lanjut tentang cara kita boleh memprogram cara kita untuk pasta pesto, jadi mari gali terus. "Mangia Mangia!"

Mencipta tatasusunan resipi pasta dan pesto yang berasingan

Kita akan mulakan dengan mengisytiharkan pembolehubah untuk pastaRecipeArray dan pestoRecipeArray, dengan setiap pembolehubah ditugaskan kepada tatasusunan objek, di mana setiap objek mewakili ramuan individu.

Apabila kami menetapkan nilai tatasusunan kepada setiap pembolehubah, kami menggunakan kaedah Object.freeze() untuk memastikan ia tidak berubah. (lebih lanjut mengenai perkara ini kemudian)

Setiap objek resipi mempunyai tiga sifat, dengan pasangan nilai kunci seperti berikut:

• 'name' = Nama bahan dalam bentuk 'rentetan'
• 'resipi' = Nilai atau nilai, dalam bentuk 'tatasusunan', menunjukkan resipi mana bahan yang diperlukan untuk (pasta, pesto, atau kedua-duanya)
• 'harga' = Harga bahan dalam USD, dalam bentuk 'nombor', menggunakan kandungan tiruan yang agak tidak realistik

(nota: Saya telah meninggalkan kuantiti dan butiran lain untuk memastikan perkara ringkas dan agak mudah dalam siaran ini. Kami juga boleh melaksanakan objek ini menggunakan JSON, tetapi kami memastikan perkara mudah dicerna di sini.)

Kod untuk mewujudkan tatasusunan ini akan kelihatan seperti ini:

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

Anda akan melihat sekali lagi bahawa kunci resipi menunjukkan nilai yang dalam bentuk tatasusunan. Kami menyediakannya dengan cara ini kerana beberapa bahan digunakan dalam kedua-dua resipi.

Untuk menguji bahawa pastaRecipeArray disediakan dengan betul, kita boleh menggunakan kaedah .forEach(), fungsi panggil balik yang digunakan untuk mengulangi setiap objek dalam tatasusunan. Menggunakan bahan sebagai parameter, kita boleh log masuk ke konsol seperti berikut:

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

Apabila anda memeriksa konsol anda akan melihat sesuatu seperti output berikut:

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}

Begitu juga, kita boleh log pestoRecipeArray kita seperti ini:

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

Yang menghasilkan perkara berikut:

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}

(nota: Apabila anda melihat output seperti Array(1) dan Array(2) anda sama ada mahu menulis semula fungsi untuk memilih kekunci tersebut atau hanya klik pada tatasusunan dalam konsol untuk melihat butiran apa yang terkandung di dalamnya.)

Mencipta Tatasusunan Senarai Beli-belah

Sekarang kami telah menyediakan tatasusunan resipi kami, kami ingin meneruskan ke langkah seterusnya, mencipta tatasusunan senarai beli-belah. Untuk melakukan ini, kami ingin menggabungkan tatasusunan objek kami pastaRecipeArray dan pestoRecipeArray ke dalam pembolehubah boleh ubah baharu bernama shoppingListArray. Kami akan melakukan ini menggunakan operator spread ... seperti:

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

Sekarang mari kita gunakan console.log() berikut untuk melihat rupa senarai baharu kami. Melangkah ke hadapan, kami akan merekodkan nilai harta dalam objek dan bukannya objek penuh, untuk menghilangkan beberapa kekacauan. Anda akan mahu menggunakan kod ini untuk melihat cara senarai kami berubah selepas setiap langkah proses.

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

Kami dapat melihat bahawa senarai kami telah digabungkan menjadi satu dalam konsol, kali ini hanya mengelog setiap nama ramuan.

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

Tatasusunan tidak berubah lwn. boleh ubah

Mengapa kita perlu menjadikan pastaRecipeArray dan pestoRecipeArray tidak berubah? Menjadikannya tidak berubah menjadikannya supaya kita tidak boleh mengubah nilai mereka selepas mereka ditugaskan. Kami tidak mahu hanya mencari resipi ini. Kami mahu menyelamatkan mereka untuk hari yang mulia lagi. Resipi keluarga yang tidak berubah itu perlu diteruskan, tidak kira apa yang akan kami tulis pada senarai beli-belah sementara kami yang boleh diubah.

Kami juga mahu dapat menambah atau menolak bahan-bahan daripada shoppingListArray kami yang baru dibuat untuk membuat hidangan ini mengikut citarasa khusus kami, tanpa menjejaskan resipi asal kami sudah tentu.

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!

Atas ialah kandungan terperinci Senarai Beli-belah (Im) boleh ubah untuk Pasta Pesto Sedap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!