JS / ES6:解构未定义


81

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

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

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

“旧”方式如下所示:

const item = content && content.item

因此,如果content未定义->item也将是未定义的。

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


Answers:


153

通常或在这种情况下,可以使用短路评估来提供默认值(如果content该值是伪造的)。undefinednull

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

一种比较惯用的方式(请参见此注释)是在破坏对象之前将内容传播到对象中,因为nullundefineds值都被忽略了

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"


您也可以在将其破坏之前将其内容散布到一个对象中”-对我来说,这似乎既效率低下又很独特
Bergi

@Bergi-我不会谈论效率,因为效率取决于您在做什么。for循环比forEach更有效率,但是除非我们需要每一盎司的性能,否则我们仍然使用后者。unidiomatic您认为为什么?
Ori Drori

1
(我们之所以使用for of它,是因为它读起来更好,并且比更好地工作.forEach,但是它们在当今的引擎中具有相同的速度)。这感觉很特别,因为它……在我眼中看起来很奇怪。{ ...content }被称为“成浅拷贝content”,而不是“……或在未定义时为空对象”的成语。
Bergi

2
我认为它是传播的潜在用途。它比短路不易读,但它是工具箱中的另一个工具。
Ori Drori


-1

接受的答案不适用于不是由设置的真正不确定的值const content = undefined。在这种情况下,它将起作用:

const { item } = (typeof content !== 'undefined' && content) || {}
console.log(item)

7
“真正不确定的值”是什么意思?
Bergi

1
@Bergi我相信他们在谈论的是un_declared_变量与值为的声明变量undefined。在content未声明声明或不在范围内的开发人员控制台中测试上述代码将可以工作,但是将分配替换为content || {}将引发Uncaught ReferenceError: content is not defined异常。
UnknownUnknowns
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.