从对象数组中提取 MealType 数组的值

从对象数组中提取 MealType 数组的值，可以使用 JavaScript 的 flatMap 方法，这是一种简洁而高效的方式。与使用 jQuery 相比，flatMap 提供了一种更现代、更轻量级的解决方案。

使用 flatMap 提取 MealType 值

假设你有一个对象数组，每个对象都包含一个 MealType 属性，该属性的值是一个数组。你需要将所有 MealType 数组中的值提取出来，合并成一个单一的数组。

例如，你的数据结构如下：

const recipes = [
{ MealType: ['Breakfast', 'Brunch', 'Lunch', 'Dinner'] },
{ MealType: ['Pasta', 'Pizza', 'Salad', 'Soup', 'Burger', 'Steak', 'Seafood', 'Sushi'] },
{ MealType: ['Tacos', 'Burritos', 'Quesadillas', 'Enchiladas', 'Fajitas', 'Tamales', 'Chiles Rellenos', 'Guacamole'] },
{ MealType: ['Breakfast', 'Brunch', 'Lunch', 'Dinner'] },
{ MealType: ['Breakfast', 'Brunch', 'Lunch', 'Dinner'] },
{ MealType: ['Breakfast', 'Brunch', 'Lunch', 'Dinner'] },
{ MealType: ['Breakfast', 'Brunch', 'Lunch', 'Dinner'] }
];

要提取所有 MealType 数组的值，可以使用以下代码：

const allMealTypes = recipes.flatMap(recipe => recipe.MealType);
console.log(allMealTypes);

这段代码使用 flatMap 方法遍历 recipes 数组。对于每个 recipe 对象，它提取 MealType 属性的值（一个数组）。 flatMap 方法会将所有提取出的数组合并成一个单一的数组 allMealTypes。

输出结果将是包含所有 MealType 值的数组：

[
"Breakfast",   "Brunch",
"Lunch",       "Dinner",
"Pasta",       "Pizza",
"Salad",       "Soup",
"Burger",      "Steak",
"Seafood",     "Sushi",
"Tacos",       "Burritos",
"Quesadillas", "Enchiladas",
"Fajitas",     "Tamales",
"Chiles Rellenos", "Guacamole",
"Breakfast",   "Brunch",
"Lunch",       "Dinner",
"Breakfast",   "Brunch",
"Lunch",       "Dinner",
"Breakfast",   "Brunch",
"Lunch",       "Dinner",
"Breakfast",   "Brunch",
"Lunch",       "Dinner"
]

注意事项

• flatMap 方法是 ES2019 (ES10) 引入的，如果你的 JavaScript 环境不支持，你需要使用 polyfill 或者其他替代方案。
• 如果 MealType 属性不存在或者不是数组，这段代码可能会报错。在实际使用中，你可能需要添加一些错误处理逻辑。
• 如果你需要去除重复的值，可以在提取后使用 Set 数据结构：

const allMealTypes = [...new Set(recipes.flatMap(recipe => recipe.MealType))];
console.log(allMealTypes);

总结

使用 flatMap 方法可以简洁高效地从对象数组中提取数组值。这种方法避免了使用 jQuery，提供了更现代、更轻量级的解决方案。 确保你的 JavaScript 环境支持 flatMap 方法，并根据实际情况添加适当的错误处理逻辑。