从对象数组中提取MealType数组的值-js教程-PHP中文网

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

霞舞

发布： 2025-09-09 21:32:01

原创

829人浏览过

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

本文将介绍如何使用 JavaScript 的 flatMap 方法，从包含 MealType 数组的对象数组中提取所有 MealType 数组的值。正如摘要所说，我们不使用 jQuery，而是采用更现代、更简洁的 JavaScript 解决方案。

假设我们有以下对象数组，每个对象都包含一个名为 MealType 的数组：

const recipes = [
  { MealType: ['Breakfast', 'Lunch', 'Dinner', 'Snack'] },
  { MealType: ['Chicken', 'Beef', 'Pork', 'Fish', 'Vegetarian', 'Vegan', 'Gluten-Free', 'Paleo'] },
  { MealType: ['Pasta', 'Pizza', 'Salad', 'Soup', 'Sandwich', 'Burger', 'Taco', 'Sushi'] },
  { MealType: ['Quick', 'Easy', 'Healthy', 'Delicious'] },
  { MealType: ['Spicy', 'Sweet', 'Sour', 'Salty'] },
  { MealType: ['Italian', 'Mexican', 'Chinese', 'Indian'] },
  { MealType: ['Summer', 'Winter', 'Spring', 'Fall'] }
];

登录后复制

我们的目标是提取所有 MealType 数组中的值，并将它们合并到一个单独的数组中。 flatMap 方法正是为此而设计的。

使用 flatMap 提取值

flatMap 方法首先使用提供的函数映射数组中的每个元素，然后将结果展平为一个新数组。我们可以使用以下代码来实现我们的目标：

即构数智人

即构数智人是由即构科技推出的AI虚拟数字人视频创作平台，支持数字人形象定制、短视频创作、数字人直播等。

查看详情

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

console.log(allMealTypes);
// 输出:
// [
//   "Breakfast", "Lunch", "Dinner", "Snack",
//   "Chicken", "Beef", "Pork", "Fish", "Vegetarian", "Vegan", "Gluten-Free", "Paleo",
//   "Pasta", "Pizza", "Salad", "Soup", "Sandwich", "Burger", "Taco", "Sushi",
//   "Quick", "Easy", "Healthy", "Delicious",
//   "Spicy", "Sweet", "Sour", "Salty",
//   "Italian", "Mexican", "Chinese", "Indian",
//   "Summer", "Winter", "Spring", "Fall"
// ]

登录后复制

这段代码首先使用 recipes.flatMap() 调用 flatMap 方法。传递给 flatMap 的函数 recipe => recipe.MealType 接收数组中的每个对象（recipe），并返回其 MealType 属性的值（即一个数组）。 flatMap 然后将所有这些数组展平为一个包含所有 MealType 值的单个数组。

注意事项