一种更干净的对象解构方式,即嵌套?

时间:2020-03-26 08:18:29

标签: javascript reactjs destructuring

我正在使用对象分解。而且我的应用程序完全正常。但是看起来有点不整洁。我尝试嵌套,但是出现错误。

到目前为止,销毁工作看起来像这样:

  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
}

有没有办法在一两行上做到这一点?

3 个答案:

答案 0 :(得分:0)

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

  updateRecord(form: NgForm, event){
        event.preventDefault();
        const target = event.target;
        var splitted;
        var category_id=[];
        var category_name=[];
        var ratio=[];
        var start=[];
        Object.entries(this.vtu).forEach(([index, value]) => {
            splitted = index.split(",", 2);
            category_id.push(splitted[0]);
            category_name.push(splitted[1]);
            ratio.push(value);
        });
        Object.entries(this.starting).forEach(([index, value]) => {
            start.push(value);
        });
        
        console.log(category_id);
        console.log(category_name);
        console.log(ratio);
    }

答案 1 :(得分:0)

您可以使用:

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设置为默认的空数组,但是response中的res实际上是一个对象,因此应将其默认设置为{}。您需要对代码中的main = []做同样的事情。

答案 2 :(得分:-1)

嵌套销毁

 git log -p PrePostScripts.xml
commit 1870c07e6b0af5b63f92001f546a58488ee42979
Author: joshua.kesselman <joshua.kesselman@oracle.com>
Date:   Tue Apr 2 13:04:22 2019 -0700