javascript - JS/ES6 : Destructuring of undefined

Question

我正在使用一些像这样的解构:

const { item } = content
console.log(item)

但是我应该如何处理 content === undefined - 这会引发错误？

“旧”方式如下所示:

const item = content && content.item

因此，如果 content 未定义 -> item 也将未定义。

我可以使用解构做类似的事情吗？

Answer 1

您可以使用short circuit evaluation如果 content 是一个假值，则提供默认值，在这种情况下通常是 undefined 或 null。

const content = undefined
const { item } = content || {}
console.log(item)                       // undefined

一种不太惯用的 ( see this comment ) 方法是在解构对象之前将内容传播到对象中，因为 null and undefineds values are ignored .

const content = undefined
const { item } = { ...content }
console.log(item) // undefined

如果您要解构函数参数，则可以提供默认值(示例中为 = {})。

注意:仅当解构参数为 undefined 时才会应用默认值，这意味着解构 null 值将引发错误.

const getItem = ({ item } = {}) => item
console.log(getItem({ item: "thing" })) // "thing"
console.log(getItem())                  // undefined

try {
  getItem(null)
} catch(e) {
  console.log(e.message)                // Error - Cannot destructure property `item` of 'undefined' or 'null'.
}

如果输入对象不包含该属性，甚至可以为 item 属性设置默认值

const getItem = ({ item = "default" } = {}) => item
console.log(getItem({ item: "thing" })) // "thing"
console.log(getItem({ foo: "bar" }))    // "default"