时间戳

首页 > 解决方案 > 从对象中删除深层项目

javascript - 从对象中删除深层项目

问题描述

我正在寻找删除recipeStep驻留在等于的封装对象heat。因此，其中的第一个数组项recipeMealSteps将被删除，因为它包含heat.

我试过使用.mapand .filter，但我没有得到整个对象减去heat步骤。

到目前为止，这是我失败的结果：

let filteredRecipes = meals.map((m) =>
  m.mealTypeRecipes.map((r) => r.recipeMealSteps.filter((s) => s.recipeStep !== 'heat'))
);

let meals = [
  {
    mealId: 0,
    mealDescription: "Favourties",
    mealTypeRecipes: [
      {
        recipeAuthor: "Frank Doe",
        recipeDescription: "Great chicken dish for those that don't eat chicken",
        recipeID: 0,
        recipeMealSteps: [
          {
            recipeDesc: "Heat up the oven",
            recipeStep: "heat",
          },
          {
            recipeDesc: "Allow it to cook",
            recipeStep: "cool",
          },
          {
            recipeDesc: "Take it out the oven",
            recipeStep: "out",
          },
        ],
      },
      {
        recipeID: 1,
        recipeName: "Fish Dish",
        recipeMealSteps: [
          {
            recipeDesc: "Heat up the oven",
            recipeStep: "heat",
          },
          {
            recipeDesc: "Allow it to cook",
            recipeStep: "cool",
          },
          {
            recipeDesc: "Take it out the oven",
            recipeStep: "out",
          },
        ],
      },
    ],
  },
];

标签： javascriptecmascript-6

解决方案

let filteredRecipes = meals.map(({mealTypeRecipes, ...m}) => ({
  ...m,
   mealTypeRecipes: mealTypeRecipes.map(({recipeMealSteps,...r}) => ({
     ...r, 
     recipeMealSteps: recipeMealSteps.filter((s) => s.recipeStep !== 'heat') 
    })
)}));

编辑：

解释：在第一个地图中，我们将每个餐点作为回调函数的参数。我们解构它，使“m”是一个具有所有属性“mealTypeRecipes”的对象（在这种情况下，m 具有属性“meadId”和“mealDescription”）。另一方面，我们将属性“mealTypeRecipes”的值放入变量“mealTypeRecipes”中。这要归功于扩展运算符“...”。这将是等效的

let filteredRecipes = meals.map((mealItem) => {
    const {mealTypeRecipes, ...m} = mealItem

然后我们返回重建的对象，返回属性“mealTypeRecipes”的新值，并将它与我们没有修改的对象部分“...m”放在一起。这会创建旧对象的副本，确保不变性。

一个更详细的方法是这样的

let filteredRecipes = meals.map((meal) => {
  const {mealTypeRecipes, ...m} = meal;
  return {
    ...m,
     mealTypeRecipes: mealTypeRecipes.map((mealTypeRecipeItem) => {
       const {recipeMealSteps,...r} = mealTypeRecipeItem;
       return {
          ...r,
          recipeMealSteps: recipeMealSteps.filter((s) => s.recipeStep !== 'heat')    
       }
     })
    }
 });

推荐阅读