JavaScript - 正确提取深层对象属性并构造新对象

Question

假设从 API 返回以下对象数组:

const data = [
    { // first item
        meta: {
            stems: [
                "serpentine",
                "serpentinely"
            ]
        },
        hwi: {
            hw: "sep*pen*tine",
            prs: [
                {
                    mw: "ˈsər-pən-ˌtēn",
                    sound: {
                        audio: "serpen02"
                    }
                },
            ]
        },
        shortdef: [
            "of or resembling a serpent (as in form or movement)",
            "subtly wily or tempting",
            "winding or turning one way and another"
        ]
    },
    { // second item
        meta: {
            stems: [
                "moribund",
                "moribundities",
                "moribundity"
            ]
        },
        hwi: {
            hw: "mor*i*bund",
        },
        fl: "adjective"
    }
]

我想创建一个函数来生成新的对象数组。这个新数组中的对象将由旧对象中刚刚重新排列的数据组成。这就是我期望新数组的外观，例如:

[
  {
    word: 'serpentine',
    definitions: [
      'of or resembling a serpent (as in form or movement)',
      'subtly wily or tempting',
      'winding or turning one way and another'
    ]
  },
  {
    word: 'moribund',
    definitions: [
      'being in the state of dying : approaching death',
      'being in a state of inactivity or obsolescence'
    ],
    partOfSpeech: 'adjective'
  }
]

我使用以下函数来执行此操作:

const buildNewData = arr => {
  const newData = []
  arr.forEach(item => {
    newData.push({
      ...item.meta.stems[0] && { word: item.meta.stems[0]},
      ...item.shortdef && { definitions: item.shortdef },
      ...item.fl && { partOfSpeech: item.fl },
      ...item.hwi.prs[0].mw && { pronunciation: item.hwi.prs[0].mw}
    })
  })
  return newData
}
buildNewData(data)

您可能好奇为什么我在创建新对象时使用 ...item.meta.stems[0] && { word: item.meta.stems[0]} 。这是为了检查该属性是否存在于原始对象中。如果不存在，则表达式的计算结果将为 false，因此不会添加到新对象中。原始数组中的第一个对象没有 fl 属性，因此在构造新对象时它的计算结果为 false。

但是当查找数组属性时，这不起作用。上面的代码失败并出现错误:TypeError: Cannot read property '0' of undefined。这是因为第二项的 hwi 属性下没有 prs 数组，因此查找失败。

由于我无法控制从 API 返回哪些数据，如何编写一个函数，以我指定的格式成功创建新的对象数组，而不导致错误？我已经有了一个解决方案，如果特定属性不存在，则不添加它们，但是如何考虑数组？

更一般地说，我很好奇是否有一种标准化的方法可以以编程方式从对象中提取数据，以防止发生此类错误。有更好的方法吗？

Answer 1

你需要一个额外的守卫，所以:

...item.hwi.prs[0].mw && { pronunciation: item.hwi.prs[0].mw}

变成了

...(Array.isArray(item.hwi.prs) && item.hwi.prs[0].mw) && { pronunciation: item.hwi.prs[0].mw}

可以缩短为:

...(item.hwi.prs && item.hwi.prs[0].mw) && { pronunciation: item.hwi.prs[0].mw}

如果您确信如果 item.hwi.prs 存在，则其值将是一个具有可传播的 0 值的数组。

const data = [
    { // first item
        meta: {
            stems: [
                "serpentine",
                "serpentinely"
            ]
        },
        hwi: {
            hw: "sep*pen*tine",
            prs: [
                {
                    mw: "ˈsər-pən-ˌtēn",
                    sound: {
                        audio: "serpen02"
                    }
                },
            ]
        },
        shortdef: [
            "of or resembling a serpent (as in form or movement)",
            "subtly wily or tempting",
            "winding or turning one way and another"
        ]
    },
    { // second item
        meta: {
            stems: [
                "moribund",
                "moribundities",
                "moribundity"
            ]
        },
        hwi: {
            hw: "mor*i*bund",
        },
        fl: "adjective"
    }
];

const buildNewData = arr => {
  const newData = []
  arr.forEach(item => {
    newData.push({
      ...item.meta.stems[0] && { word: item.meta.stems[0]},
      ...item.shortdef && { definitions: item.shortdef },
      ...item.fl && { partOfSpeech: item.fl },
      ...(Array.isArray(item.hwi.prs) && item.hwi.prs[0].mw) && { pronunciation: item.hwi.prs[0].mw}
    })
  })
  return newData
}

let newData = buildNewData(data);
console.log(newData);