如何为筛选后的对象数组元素分别添加对应星期属性

嘿，我来帮你解决这个问题！你之前的代码出问题的原因很明确：你定义的weekdays是一个对象，但所有属性的键都是day——在JavaScript对象里，相同的键会被后面的覆盖，所以这个对象最后实际上只有{ day: 'Sunday' }，这就导致每个食谱都被加上了同一个星期日的属性，完全不符合你的需求。

下面给你两种可行的解决方案，都是利用数组存储星期几，再通过索引对应到每个食谱上（因为你已经把数组筛选成了恰好7个结果，索引刚好能完美匹配周一到周日的顺序）：

方法一：使用map方法（推荐，不修改原数组） #

// 先把星期几按顺序存成数组
const weekdays = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];

// 用map遍历，第二个参数是当前元素的索引，对应取数组里的星期几
const weekdayRecipes = props.recipes.map((recipe, index) => ({
  ...recipe, // 复制原食谱的所有属性
  Day: weekdays[index] // 添加Day属性，对应索引的星期几
}));

方法二：使用forEach循环（直接修改复制后的数组） #

如果你更习惯用forEach，也可以这么写：

const weekdays = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
// 先复制原数组，避免直接修改props.recipes的原数据
const weekdayRecipes = [...props.recipes];

weekdayRecipes.forEach((recipe, index) => {
  // 给每个食谱对象添加Day属性
  recipe.Day = weekdays[index];
});

这两种方法都能精准地给第一个食谱加上Day: 'Monday'，第二个加Day: 'Tuesday'，直到第七个加上Day: 'Sunday'，完全符合你的需求~

内容的提问来源于stack exchange，提问作者Dan