是否有办法通过分组来分解嵌套的对象？

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
});

​

如果您想要整个对象，而不仅仅是它们的quantity属性，您可以这样做：

​

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
});

​

在对象破坏下的赋值上的MDN页面上有一些很好的示例。我建议你花点时间浏览这一页。

这里有一个代码示例，供您分叉和实验。