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

Question

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

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

  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
}

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

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

Answer 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 = [] 执行相同的操作。

Answer 3

嵌套解构

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

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

A cleaner way of Object Destructuring, i.e. nesting?

javascript

destructuring

reactjs