Паста песто — доказательство существования Б-га

Немногие вещи в жизни доставляют мне больше удовольствия, чем огромная порция свежего песто с домашним капеллини («Волосы ангела»). Я заядлый гурман, особенно когда дело касается итальянской кухни, и всегда пробую более сложные рецепты, но простота и удовольствие от такого минималистичного блюда никогда не перестают удовлетворять. Если бы мне посчастливилось выбрать последний прием пищи, это было бы трудным выбором между суши и соусом песто, а не макаронами, но я все же думаю, что макароны с песто в конечном итоге одерживают победу.

Все эти разговоры о песто вызывают у меня голод

Что мне делать? Ну и, конечно, приготовьте пасту песто. Иногда нужно просто сказать: «Quando a Roma!»

Давайте начнем с составления списка ингредиентов, которые можно купить на нашем дружественном итальянском рынке «Il Mercato di Giovanni». Мы создадим список покупок из двух рецептов, используя как неизменяемые, так и изменяемые массивы объектов. Хотя было бы эффективнее просто написать то, что нам нужно, вы знаете, что это намного веселее. Я могу сказать, что вы голодаете чтобы узнать больше о том, как мы можем запрограммировать наш способ приготовления пасты песто, так что давайте копаем прямо в теме. «Мангия Мангия!»

Создание отдельных массивов рецептов пасты и песто.

Мы начнем с объявления переменных для PastaRecipeArray и pestoRecipeArray, при этом каждая переменная будет присвоена массиву объектов, где каждый объект представляет отдельный ингредиент.

Когда мы присваиваем значения массива каждой переменной, мы используем метод Object.freeze(), чтобы гарантировать их неизменяемость. (подробнее об этом позже)

Каждый объект рецепта имеет три свойства со следующими парами ключ-значение:

• 'name' = Название ингредиента в виде 'строки'
• 'рецепт' = значение или значения в форме массива, указывающие, для какого рецепта(ов) необходим ингредиент (макароны, песто или и то, и другое)
• 'цена' = Цена ингредиента в долларах США в виде числа с использованием довольно нереалистичного фиктивного содержания

(примечание: я опустил количества и другие детали, чтобы сделать все в этом посте кратким и относительно простым. Мы также могли бы реализовать эти объекты с использованием 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 следующим образом:

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. Мы сделаем это с помощью оператора распространения... вот так:

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

Теперь давайте воспользуемся следующей функцией console.log(), чтобы увидеть, как выглядит наш новый список. В дальнейшем мы будем регистрировать значения свойств внутри объекта, а не всего объекта, чтобы убрать некоторый беспорядок. Вы захотите использовать этот код, чтобы увидеть, как меняется наш список после каждого этапа процесса.

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

Неизменяемые и изменяемые массивы

Почему мы должны сделать PastaRecipeArray и pestoRecipeArray неизменяемыми? Если сделать их неизменяемыми, мы не сможем изменить их значения после их назначения. Мы не хотим просто разорвать эти рецепты. Мы хотим сохранить их для еще одного славного дня. Эти неизменные семейные рецепты должны жить, независимо от того, что мы собираемся написать в нашем временном, изменяющемся списке покупок.

Мы также хотим иметь возможность добавлять или удалять ингредиенты из нашего недавно созданного ShoppingListArray, чтобы приготовить это блюдо по нашему вкусу, не затрагивая, конечно, наши оригинальные рецепты.

Добавление, замена и удаление ингредиентов

Как вы, возможно, заметили, когда мы объединили рецепты пасты и песто в список покупок, у нас остались дубликаты «Оливковое масло первого отжима» и «Кошерная соль». Нам не нужно покупать их дважды, поэтому давайте избавимся от них. Есть более интересные способы устранения дубликатов, но сейчас мы будем использовать .splice() для удаления первого объекта оливкового масла Extra Virgin.

Метод .splice() разрушительно удаляет или заменяет элементы в массиве. Первый параметр представляет первый элемент, который мы удаляем, а второй параметр показывает, сколько элементов мы хотим удалить из этой начальной точки. Хотя «Оливковое масло первого отжима» является вторым объектом в массиве, массивы начинаются с «0», поэтому технически второй объект обозначается цифрой «1». Давайте выполним следующее:

shoppingListArray.splice(1, 1)

В консоли вы увидите, что теперь существует только один объект «Оливковое масло экстра-класса». (примечание: если вы попытаетесь использовать .splice() или аналогичные методы в одном из наших исходных массивов рецептов, вы получите ошибку TypeError, поскольку мы использовали Object.freeze(), что делает их неизменяемыми.)

У нас еще есть дополнительная «Кошерная соль», и теперь мы собираемся использовать .splice() на полную мощность. В дополнение к нашим первым двум параметрам у нас есть третий параметр, который может заменять элементы массива новыми элементами. Я люблю добавлять в песто немного лимона и не люблю слишком соленую пищу, поэтому давайте заменим лишнюю «Кошерную соль» нашим новым объектом «Лимон». Мы объявим наш объект лимона как переменную для лучшей читаемости и включим его в качестве третьего параметра .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)
})

«Завершаем» это

Как вы можете видеть, выполнив вход в консоль, мы успешно создали ShoppingListArray, который не изменил наши исходные неизменяемые массивы рецептов, PastaRecipeArray и pestoRecipeArray. Затем мы смогли модифицировать ShoppingListArray деструктивным образом, добавляя, удаляя и заменяя ингредиенты по своему вкусу. Мы также подсчитали, сколько нам нужно потратить перед походом в магазин. Наконец, мы смогли разделить эти ингредиенты обратно на соответствующие рецепты: ингредиенты для пасты и ингредиенты для песто, чтобы приготовить великолепное блюдо.

Ну, какое это было восхитительное блюдо. Надеюсь, вам понравилось так же, как и мне. И снова Мангия-Мангия!