یک لیست خرید (غیرقابل تغییر) برای یک پاستا خوشمزه پستو

پاستا پستو اثبات وجود Gd است

چیزهای کمی در زندگی وجود دارند که به من لذت بیشتری نسبت به کمک انبوه پستوی تازه بر روی کاپلینی خانگی (موی فرشته) می دهند. من یک غذاخور خوب هستم – مخصوصاً وقتی صحبت از غذاهای ایتالیایی می شود – و همیشه دستور العمل های پیچیده تری را امتحان می کنم، اما سادگی و لذت بردن از چنین غذای مینیمالیستی هرگز راضی نمی شود. اگر شانس انتخاب آخرین وعده غذایی را داشتم، تصمیم سختی بین سوشی و پستو نسبت به پاستا بود، اما همچنان فکر می‌کنم پاستو در نهایت برنده می‌شود.

این همه صحبت از پستو مرا گرسنه می کند

من چه کار کنم؟ خب، البته ماکارونی پستو درست کنید. گاهی اوقات شما فقط باید بگویید “Quando a Roma!”

بیایید با تهیه فهرستی از مواد اولیه برای خرید از بازار دوستانه ایتالیایی ما، “Il Mercato di Giovanni” شروع کنیم. ما لیست خرید خود را از دو دستور غذا با استفاده از آرایه های شیء تغییرناپذیر و قابل تغییر ایجاد می کنیم. در حالی که نوشتن صرفاً آنچه نیاز داریم کارآمدتر است، اما می دانید که این کار بسیار سرگرم کننده تر است. می توانم بگویم که هستی گرسنگی برای اطلاعات بیشتر در مورد اینکه چگونه می توانیم راه خود را برای پاستا پستو برنامه ریزی کنیم، بیایید حفاری درست در “بخور بخور!”

ایجاد آرایه های جداگانه دستور پخت پاستا و پاستو

ما با اعلام متغیرهای برای شروع می کنیم 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 }
])

دوباره متوجه خواهید شد که recipe کلید به مقداری که به شکل آرایه است اشاره می کند. ما آن را به این ترتیب تنظیم کردیم زیرا برخی از مواد در هر دو دستور غذا استفاده می شود.

برای آزمایش آن pastaRecipeArray اگر به درستی تنظیم شود، می‌توانیم از متد .forEach () استفاده کنیم، یک تابع callback که برای تکرار روی هر شی در آرایه استفاده می‌شود. با استفاده از ingredient به عنوان پارامتر، می توانیم آن را به صورت زیر وارد کنسول کنیم:

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 مانند این:

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}

(توجه: وقتی خروجی هایی مانند Array(1) و Array(2) برای انتخاب آن کلیدها یا می خواهید تابع را بازنویسی کنید یا به سادگی روی آرایه در کنسول کلیک کنید تا جزئیات محتوای آن را ببینید.)

ایجاد آرایه لیست خرید

اکنون که آرایه های دستور پخت خود را ایجاد کرده ایم، می خواهیم به مرحله بعدی برویم، یک آرایه لیست خرید ایجاد کنیم. برای این کار می خواهیم آرایه های شی خود را ترکیب کنیم pastaRecipeArray و pestoRecipeArray به یک متغیر قابل تغییر جدید به نام shoppingListArray. ما این کار را با استفاده از عملگر spread انجام خواهیم داد ... مثل این:

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

حالا بیایید از موارد زیر استفاده کنیم console.log() تا ببینید لیست جدید ما چگونه به نظر می رسد. با حرکت رو به جلو، مقادیر ویژگی را در شیء به جای شیء کامل ثبت می کنیم تا مقداری از درهم ریختگی را حذف کنیم. شما می خواهید از این کد استفاده کنید تا ببینید لیست ما پس از هر مرحله از فرآیند چگونه تغییر می کند.

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

می‌توانیم ببینیم که فهرست‌های ما در کنسول به هم پیوسته‌اند و این بار فقط هر عنصر را ثبت می‌کنیم. name.

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

تغییرناپذیر در مقابل آرایه های قابل تغییر

چرا باید بسازیم pastaRecipeArray و pestoRecipeArray تغییرناپذیر؟ تغییرناپذیر ساختن آن‌ها باعث می‌شود که پس از تخصیص آن‌ها، نتوانیم مقادیر آن‌ها را تغییر دهیم. ما نمی خواهیم فقط این دستور العمل ها را پاره کنیم. ما می خواهیم آنها را برای یک روز باشکوه دیگر نجات دهیم. این دستور العمل های تغییر ناپذیر خانوادگی باید بدون توجه به آنچه که در لیست خرید موقت و قابل تغییر خود بنویسیم، ادامه پیدا کنند.

ما همچنین می‌خواهیم بتوانیم مواد تشکیل‌دهنده جدید خود را اضافه یا کم کنیم shoppingListArray تا این غذا را مطابق ذائقه خاص خودمان درست کنیم، البته بدون اینکه روی دستور پخت اصلی ما تأثیر بگذارد.

افزودن، جایگزینی و حذف مواد تشکیل دهنده

همانطور که ممکن است متوجه شده باشید، هنگامی که ما دستور العمل های پاستا و پستو را در لیست خرید خود ترکیب کردیم، به نسخه های تکراری “روغن زیتون فوق بکر” و “نمک کوشر” رسیدیم. نیازی نیست اینها را دوبار بخریم پس از شر آنها خلاص شویم. راه‌های جالب‌تری برای حذف موارد تکراری وجود دارد، اما در حال حاضر از .splice() برای حذف اولین مورد استفاده می‌کنیم. Extra Virgin Olive Oil شی

را .splice() روش به طور مخربی عناصر یک آرایه را حذف یا جایگزین می کند. پارامتر اول نشان دهنده اولین عنصری است که ما حذف می کنیم و پارامتر دوم نشان دهنده تعداد عناصری است که می خواهیم از آن نقطه شروع حذف کنیم. در حالی که “روغن زیتون فوق بکر” دومین شی در آرایه است، آرایه ها از “0” شروع می شوند، بنابراین از نظر فنی شی دوم با یک “1” نشان داده می شود. بیایید موارد زیر را اجرا کنیم:

shoppingListArray.splice(1, 1)

در کنسول خواهید دید که اکنون تنها یک شی “روغن زیتون فوق بکر” وجود دارد. (توجه: اگر سعی می کنید استفاده کنید .splice() یا روش‌های مشابه در یکی از آرایه‌های دستور اولیه ما، یک TypeError دریافت خواهید کرد، زیرا ما استفاده کردیم Object.freeze()، آنها را تغییرناپذیر می کند.)

ما هنوز یک “نمک کوشر” اضافی داریم و اکنون می خواهیم از آن استفاده کنیم .splice() به قدرت کامل آن است. علاوه بر دو پارامتر اول ما یک پارامتر سوم نیز داریم که می تواند عناصر یک آرایه را با عناصر جدید جایگزین کند. من دوست دارم کمی لیمو به پستو اضافه کنم، و غذای خیلی شور را دوست ندارم، پس بیایید ادامه دهیم و “نمک کوشر” اضافی خود را با شی جدید “لیمو” خود جایگزین کنیم. خودمان را اعلام خواهیم کرد lemon شی به عنوان یک متغیر برای خوانایی بهتر و درج آن به عنوان متغیر سوم .splice() پارامتر

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

shoppingListArray.splice(6, 1, lemon)

امروز کمی احساس دارم گستاخ پس بیایید شرایط را کمی تغییر دهیم و با استفاده از .push() گوجه فرنگی برشته اضافه کنیم. با .push() ما می توانیم عناصری را به انتهای آرایه اضافه کنیم که هر پارامتر یک عنصر جدید را نشان می دهد. پس بیایید چند “گوجه گیلاسی” را به لیست خود اضافه کنیم. فکرش را بکن، «سیر» را هم فراموش کردم!

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

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

shoppingListArray.push(tomatoes, garlic)

سازماندهی لیست خرید ما

اکنون که همه مواد خود را به خوبی تثبیت کرده‌ایم، بیایید آنها را به گونه‌ای سازماندهی کنیم که تجربه خرید ما را یکپارچه کند.

بیایید لیست خود را بر اساس حروف الفبا با استفاده از .sort سازماندهی کنیم.

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

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

لیست خرید ما اکنون در کنسول به این صورت است.

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

برنامه ریزی از قبل برای هزینه های مورد انتظار ما

اکنون ما آماده‌ایم که به بازار برویم، اما ابتدا با استفاده از .reduce() مطمئن شویم که چقدر پول نیاز داریم. چیزهای زیادی برای رفتن وجود دارد .reduce()، و من گرسنه می شوم، بنابراین از جزئیات صرف نظر می کنم.

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.

ایجاد آرایه های لیست دستور العمل های جدید

بنابراین ما به فروشگاه رفتیم و مواد خود را تهیه کردیم، اما اکنون می‌خواهیم مواد خود را در دستور العمل‌های مربوطه جدا کنیم، فقط برای اینکه همه چیز را روی میز بگذاریم و همه چیز را مرتب کنیم. بیایید دو آرایه جدید ایجاد کنیم، pastaIngredients و pestoIngredients با استفاده از .filter()، .includes() و البته .forEach() آنها را به کنسول وارد کنید.

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

“پیچیدن” آن

همانطور که مشاهده می کنید از ثبت این موارد در کنسول ما با موفقیت یک a را ایجاد کردیم shoppingListArray که آرایه های دستور پخت تغییرناپذیر اصلی ما را تغییر نداده است، pastaRecipeArray و pestoRecipeArray. سپس ما توانستیم به طور قابل تغییر تغییر دهیم shoppingListArray به روشی مخرب برای افزودن، حذف و جایگزینی مواد به دلخواه خود. ما همچنین محاسبه کردیم که قبل از رفتن به فروشگاه چقدر باید هزینه کنیم. در نهایت، ما توانستیم این مواد را به دستور العمل های مربوطه جدا کنیم، pastaIngredients و pestoIngredients در آماده سازی برای یک وعده غذایی عالی

خب چه خوشمزه ظرف این بود. امیدوارم شما هم مثل من از آن لذت برده باشید. باز هم مانگیا مانگیا!