Javascript 使用计算值、级别转换和新对象创建进行解构

Question

我从一个 api 收到一个 json 响应，我想从中整理并创建一个新对象。

const things = [{
    "menu": {
      "id": "file",
      "value": "File",
      "popup": {
        "menuitem": [{
            "value": "3",
            "onclick": "CreateNewDoc()"
          },
          {
            "value": "5",
            "onclick": "OpenDoc()"
          },
          {
            "value": "8",
            "onclick": "CloseDoc()"
          }
        ]
      }
    }
  },
  {
    "menu": {
      "id": "image",
      "value": "Image",
      "popup": {
        "menuitem": [{
            "value": "New",
            "onclick": "CreateNewImage()"
          },
          {
            "value": "Open",
            "onclick": "OpenImage()"
          },
          {
            "value": "Close",
            "onclick": "CloseImage()"
          }
        ]
      }
    }
  }
];

我知道这样做的老方法是这样的:

const chs = [];
things.forEach((e) => {
    const i = {};
    i.Id = e.menu.id;
    i.Value = e.menu.value;
    i.PopupValue = e.menu.popup.menuitem[0].value;
    i.SomethingComputed = e.menu.popup.menuitem[0].value - e.menu.popup.menuitem[1];
    i.ShiftedUp = e.menu.popup.menuitem;
    chs.push(ch);
  });

现在我想使用 ES6 和解构来做到这一点。但我认为我没有尽我所能，因为我:1)仍然有循环； 2)必须创建这个新对象；和 3) 需要这些单独的计算线。 我能把它弄得更紧凑吗？

const chs = [];
things.forEach((e) => {
    const {
        Id: {id},
        Value: {value},
        PopupValue : {menu: {popup} },
    } = e;

    // computed 
    const someComputedValue = Value - PopupValue;

    // new object
    const ch = {
        Id,
        Value,
        SomeComputedValue
    }

    chs.push(ch);
});

Answer 1

您可以使用 map() 而不是 forEach()，因此您不需要 chs.push() 步骤结束。

您可以将解构直接放在参数列表中，因此不需要赋值步骤。这是否更具可读性是值得商榷的。

如果 SomeComputedValue 的计算不太复杂，您可以将其直接放在返回的对象中。然后你可以摆脱那个赋值，你可以使用箭头函数的简写形式，它只返回一个值。

const things = [{
    "menu": {
      "id": "file",
      "value": "File",
      "popup": {
        "menuitem": [{
            "value": "3",
            "onclick": "CreateNewDoc()"
          },
          {
            "value": "5",
            "onclick": "OpenDoc()"
          },
          {
            "value": "8",
            "onclick": "CloseDoc()"
          }
        ]
      }
    }
  },
  {},
  {
    "menu": {
      "id": "image",
      "value": "Image",
      "popup": {
        "menuitem": [{
            "value": "New",
            "onclick": "CreateNewImage()"
          },
          {
            "value": "Open",
            "onclick": "OpenImage()"
          },
          {
            "value": "Close",
            "onclick": "CloseImage()"
          }
        ]
      }
    }
  }
];

const chs = things.map(({
menu: {
    id: Id,
    value: Value,
    popup : PopupValue,
} = {id: "defaultID", value: "defaultValue", popup: "defaultPopup"}}) => ({
        Id,
        Value,
        SomeComputedValue: Value - PopupValue
    })
);

console.log(chs);