美味香蒜酱意面的(不)可变购物清单
内容提要
本文介绍了使用JavaScript编程制作香蒜酱意面的步骤,包括创建食谱数组、合并购物清单、添加新配料、排序购物清单、计算成本和分离配料。
延伸解读
不可变与可变数组的设计意图
文章用Object.freeze()将原始食谱数组设为不可变,确保基础配方不会被意外修改;而购物清单数组则保持可变,方便临时增删改。这种设计在编程中很常见:核心数据应受保护,派生数据可灵活操作。读者可借此理解不可变数据在维护数据完整性上的作用,以及何时该用可变结构。
购物清单的增删改技巧
合并两个食谱后,购物清单出现重复的橄榄油和盐。文章用splice()删除重复项,并利用其第三个参数将多余的盐替换为柠檬;再用push()添加樱桃番茄和大蒜。这些操作展示了如何在不影响原始食谱的前提下,按个人口味调整清单。注意splice()会直接修改原数组,而push()则追加元素。
成本计算与清单整理
文章使用reduce()累加所有配料价格,得出总花费98.39美元,提醒读者提前规划预算。随后用sort()按字母顺序排列清单,方便购物时查找。这两个方法分别体现了数组的聚合与排序能力,在实际项目中常用于数据汇总和展示优化。
从购物清单反推食谱配料
最后,文章用filter()和includes()将购物清单中的配料按recipe属性分离回pastaIngredients和pestoIngredients两个数组。这展示了如何根据对象属性筛选数据,也说明即使经过多次修改,只要保留recipe标记,就能还原出各食谱所需配料,为后续烹饪做准备。
Q&A
如何创建香蒜酱意面的食材数组?
使用Object.freeze()方法创建不可变的食材数组,确保配方不被修改。
如何合并意面和香蒜酱的配方?
使用扩展运算符将意面和香蒜酱的配方数组合并为一个新的可变购物清单数组。
如何处理购物清单中的重复配料?
使用.splice()方法删除购物清单中的重复配料,如“Extra Virgin Olive Oil”。
如何计算购物清单的总成本?
使用.reduce()方法计算购物清单中所有配料的总成本。
如何将购物清单按字母顺序整理?
使用.sort()方法对购物清单数组进行字母顺序排序。
如何将配料分离回各自的配方数组?
使用.filter()方法将配料分离到各自的配方数组中,如pastaIngredients和pestoIngredients。