有没有办法通过分组来解构嵌套对象

Question

我正在尝试解构一个嵌套对象，我可以像下面那样做一些事情来获取卡路里和碳水化合物

const { calories } = action.payload
const { quantity: carbohydrates } = action.payload.totalNutrients.CHOCDF

来自我下面有图片的对象

但是要获得我的其他物品，例如脂肪、蛋白质、纤维等...我会继续按照我现在的方式去做，还是有更简单的方法来重组多个需要的物品？

澄清一下，我只是想以更好的方式做到这一点：

const { calories } = action.payload
const { quantity: carbohydrates } = action.payload.totalNutrients.CHOCDF
const { quantity: fat } = action.payload.totalNutrients.FAT
const { quantity: fiber } = action.payload.totalNutrients.FIBTG
const { quantity: protein } = action.payload.totalNutrients.PROCNT

Answer 1

可以像这样一次解构（同时分配给新变量名）所有内容：

// approximation of the data you are working with

const action = {
  payload: {
    calories: 55,
    totalNutrients: {
      CHOCDF: {
        quantity: 8.52
      },
      CHOLE: {
        quantity: 0
      }
    }
  }
};

const {
  calories,
  totalNutrients: {
    CHOCDF: {
      quantity: carbohydratesQuantity
    },
    CHOLE: {
      quantity: cholesterolQuantity
    }
  }
} = action.payload;

console.log({
  calories,
  carbohydratesQuantity,
  cholesterolQuantity
});

如果你想要整个对象而不只是它们的数量属性，你可以这样做：

const action = {
  payload: {
    calories: 55,
    totalNutrients: {
      CHOCDF: {
        quantity: 8.52,
        label: "Carbs",
        unit: "g"
      },
      CHOLE: {
        quantity: 0,
        label: "Cholesterol",
        unit: "mg"
      }
    }
  }
};

const {
  calories,
  totalNutrients: {
    CHOCDF: carbohydrates,
    CHOLE: cholesterol
  }
} = action.payload;

console.log({
  calories,
  carbohydrates,
  cholesterol
});

const action = {
  payload: {
    calories: 55,
    totalNutrients: {
      CHOCDF: {
        quantity: 8.52,
        label: "Carbs",
        unit: "g"
      },
      CHOLE: {
        quantity: 0,
        label: "Cholesterol",
        unit: "mg"
      },
      FAT: {
        quantity: 10,
        label: "Fat",
        unit: "g"
      },
      FIBTG: {
        quantity: 0.348,
        label: "Fiber",
        unit: "g"
      },
      PROCNT: {
        quantity: 0.6,
        label: "Protein",
        unit: "g"
      }
    }
  }
};

const {
  calories,
  totalNutrients: {
    CHOCDF: {
      quantity: carbohydrates
    },
    CHOLE: {
      quantity: cholesterol
    },
    FAT: {
      quantity: fat
    },
    FIBTG: {
      quantity: fiber
    },
    PROCNT: {
      quantity: protein
    }
  }
} = action.payload;

console.log({
  calories,
  carbohydrates,
  cholesterol,
  fat,
  fiber,
  protein
});

Destructuring_assignment under Object destructuring 上的 MDN 页面上有一些很好的示例。我建议您花一些时间通读此页。

这里有一个 codepen example 供您分叉和试验。

有没有办法通过分组来解构嵌套对象

Is there a way to destructure nested objects by grouping

javascript

destructuring

reactjs