一种更简洁的对象解构方式，即嵌套？答案

【问题标题】：A cleaner way of Object Destructuring, i.e. nesting?一种更简洁的对象解构方式，即嵌套？
【发布时间】：2020-07-06 20:21:11
【问题描述】：

我正在使用对象解构。我的应用程序运行良好。然而，它看起来有点不整洁。我尝试嵌套，但出现错误。

到目前为止，解构看起来像这样：

  const { response = [] } = res;
  const { weather = [], main = [] } = response;
  const { humidity, temp_min, temp_max, feels_like, temp } = main;

{
  "response": {
    "coord": {
      "lon": 69.42,
      "lat": 34.5
    },
    "weather": [
      {
        "id": 500,
        "main": "Rain",
        "description": "light rain",
        "icon": "10d"
      }
    ],
    "base": "stations",
    "main": {
      "temp": 12.15,
      "feels_like": 7.43,
      "temp_min": 12.15,
      "temp_max": 12.15,
      "pressure": 1017,
      "humidity": 27,
      "sea_level": 1017,
      "grnd_level": 812
    },
    "wind": {
      "speed": 2.83,
      "deg": 77
    },
    "rain": {
      "3h": 0.72
    },
    "clouds": {
      "all": 12
    },
    "dt": 1585210208,
    "sys": {
      "country": "AF",
      "sunrise": 1585185447,
      "sunset": 1585229894
    },
    "timezone": 16200,
    "id": 1138957,
    "name": "Kabul",
    "cod": 200
  },
  "error": null
}

有没有办法在一行甚至两行上做到这一点？

【问题讨论】：

我会考虑生成的代码是否或多或少具有可读性 - 而且您将值默认为应该是对象的数组

标签： javascript reactjs destructuring

【解决方案1】：

您可以使用嵌套解构的单个表达式。

const
    res = { response: { coord: { lon: 69.42, lat: 34.5 }, weather: [{ id: 500, main: "Rain", description: "light rain", icon: "10d" }], base: "stations", main: { temp: 12.15, feels_like: 7.43, temp_min: 12.15, temp_max: 12.15, pressure: 1017, humidity: 27, sea_level: 1017, grnd_level: 812 }, wind: { speed: 2.83, deg: 77 }, rain: { "3h": 0.72 }, clouds: { all: 12 }, dt: 1585210208, sys: { country: "AF", sunrise: 1585185447, sunset: 1585229894 }, timezone: 16200, id: 1138957, name: "Kabul", cod: 200 }, error: null },
    { 
         response: { 
             weather = [],
             main: { humidity, temp_min, temp_max, feels_like, temp } = {}
         } = {}
    } = res;

console.log(weather);
console.log(humidity, temp_min, temp_max, feels_like, temp);

【讨论】：

【解决方案2】：

你可以使用：

const {
   response: {
      weather = [],
      main: {
         humidity,
         temp_min,
         temp_max,
         feels_like,
         temp
      } = {}
   } = {}
} = res;

或者，在一行中：

const { response: { weather = [], main: { humidity, temp_min, temp_max, feels_like, temp } = {} } = {} } = res;

演示：

const res = { response: { coord: { lon: 69.42, lat: 34.5 }, weather: [{ id: 500, main: "Rain", description: "light rain", icon: "10d" }], base: "stations", main: { temp: 12.15, feels_like: 7.43, temp_min: 12.15, temp_max: 12.15, pressure: 1017, humidity: 27, sea_level: 1017, grnd_level: 812 }, wind: { speed: 2.83, deg: 77 }, rain: { "3h": 0.72 }, clouds: { all: 12 }, dt: 1585210208, sys: { country: "AF", sunrise: 1585185447, sunset: 1585229894 }, timezone: 16200, id: 1138957, name: "Kabul", cod: 200 }, error: null };
const { response: { weather = [], main: { humidity, temp_min, temp_max, feels_like, temp } = {} } = {} } = res;

console.log({ humidity, temp_min, temp_max, feels_like, temp })

请注意，在您的代码第一部分：

const { response = [] } = res;

您已将response 设置为默认的空数组，但res 中的response 实际上是一个对象，因此您应该将其默认为{}。需要对代码中的main = [] 执行相同的操作。

【讨论】：

【解决方案3】：

嵌套解构

let {response: {weather = [], main: {humidity = null, temp_min = null, temp_max = null, feels_like = null, temp = null}}} = res;

【讨论】：