生活中沒有什麼比在自製的卡佩里尼（天使發）上享用大量新鮮香蒜醬更讓我高興的了。我是一個真正的美食家 - 尤其是在意大利美食方面 - 並且總是嘗試更複雜的食譜，但這種極簡主義菜餚的簡單性和享受永遠不會停止滿足。如果我有幸選擇最後一頓飯，那麼在壽司和香蒜醬和意大利麵之間做出艱難的決定將是一個艱難的決定，但我仍然認為香蒜意大利麵最終勝出。
我該怎麼辦？好吧，當然是做香蒜義大利麵。有時你只需說：「Quando a Roma!」
讓我們先列出從我們友善的義大利市場「Il Mercato di Giovanni」購買的食材清單。我們將使用不可變和可變物件陣列從兩個食譜建立購物清單。雖然簡單地寫出我們需要的東西會更有效，但你知道這更有趣。我可以告訴你渴望了解更多關於如何編程製作香蒜醬意大利麵的信息，所以讓我們挖掘。 「Mangia Mangia！」
我們首先聲明 PastaRecipeArray 和 pestoRecipeArray 的變量，每個變數分配給一個物件數組，其中每個物件代表一種單獨的成分。
當我們為每個變數分配數組值時，我們使用 Object.freeze() 方法來確保它們是不可變的。 （稍後再詳細介紹）
每個食譜物件都有三個屬性，鍵值對如下：
（注意：我在這篇文章中省略了數量和其他細節，以使事情簡短且相對簡單。我們也可以使用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.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}
建立購物清單數組 現在我們已經建立了食譜數組，我們想要繼續下一步，建立一個購物清單數組。為此，我們需要將物件數組 PastaRecipeArray 和 pestoRecipeArray 組合到一個名為 shoppingListArray 的新可變變數中。我們將使用擴充運算子來做到這一點......就像這樣：
現在讓我們使用下面的 console.log() 來看看我們的新清單是什麼樣子的。展望未來，我們將記錄對象內的屬性值而不是整個對象，以消除一些混亂。您將需要使用此程式碼來查看我們的清單在流程的每個步驟之後如何變更。
const shoppingListArray = [...pastaRecipeArray, ...pestoRecipeArray]
我們可以看到我們的清單已在控制台中合併為一個，這次僅記錄每種成分名稱。
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
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)
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
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.
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)
})
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!
以上是一份（不）可變的美味香蒜義大利麵購物清單的詳細內容。更多資訊請關注PHP中文網其他相關文章！
