复杂嵌套对象的数组重构

Question

我有下面这一行的解构语法。

const [
  {data: dataResponse},
  {data: stateDistrictWiseResponse},
  {data: statesDailyResponse},
  {data: stateTestResponse},
  {data: sourcesResponse},
  {data: zonesResponse},
] = someArr;

someArr 是一个对象数组（实际上是 Promise.all([url1, url2,...]，其中每个url返回一个json对象)

以上的destructuring语法是如何评估的？

Answer 1

通过解构语法提取的值与对象文字的语法非常相似。例如，如果 someArr 被定义为（或包含）。

const someArr = [
        {data: 'dataResponse'},
        {data: 'stateDistrictWiseResponse'},
];

则语法为：

const [
        {data: dataResponse},
        {data: stateDistrictWiseResponse},
] = someArr;

将把 'dataResponse' 串入 dataResponse 变量，以及 'stateDistrictWiseResponse' 串入 stateDistrictWiseResponse 变量。

属性后面的冒号表示属性被提取到一个变量中，这个变量的名字在冒号的右边。(如果没有冒号，那么值将被放入一个新的变量名中，这个变量名与属性名相同，例如 const { data } = someObj 创建一个名为 data 它的价值在 someObj.data).

不过你的原始代码相当难读。我强烈建议你用映射的方法，创建一个新的数组，只包含了 data 属性先。然后 破坏。

const dataArr = someArr.map(({ data }) => data);
const [
  dataResponse,
  stateDistrictWiseResponse,
  statesDailyResponse,
  stateTestResponse,
  sourcesResponse,
  zonesResponse,
] = dataArr;