JS/ES6：未定义结构

javascript ecmascript-6

2022-08-30 02:03:58

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

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

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

“旧”方式如下所示：

const item = content && content.item

因此，如果是未定义的 ->也将是未定义的。contentitem

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

答案 1

您可以使用短路评估来提供默认值（如果是假值），通常或在这种情况下。contentundefinednull

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

一种不那么惯用（请参阅此注释）的方法是在解构对象之前将内容分散到对象中，因为 null 和 unfineds 值将被忽略。

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

如果要解构函数参数，则可以提供默认值（在示例中）。= {}

注意：仅当去结构化参数为时，才会应用默认值，这意味着解构值将引发错误。undefinednull

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"

答案 2

const { item } = Object(content)