Question

我正在使用这样的解构：

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

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

'旧'的方式如下：

const item = content && content.item

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

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

Answer 1

如果content是假值，您可以使用short circuit evaluation提供默认值，在这种情况下通常为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"

Answer 2

可接受的答案不适用于const content = undefined未设置的真正不确定的值。在这种情况下，它将起作用：

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

Answer 3

const { item } = Object(content)

Answer 4

对于 OP 的用例，我将补充一点，也可以使用 Optional chaining operator：

const item = content?.item
console.log(item)

如果 content 是 null 或 undefined，那么 content.item 将不会被访问，item 将是 undefined .

Answer 5

可以解包 undefined 值，但不能解包 undefined。
修复它就像设置默认参数值一样简单。

示例：

(() => {
    // prepare payload
    const PAYLOAD = {
        holdingJustThis: 1
    };
    // lets unpack the payload and more
    const {
        holdingJustThis,
        itIsGoingToBeUndefined,
        itCouldThrowButWont: {
            deep
        } = {}                  // this will secure unpacking "deep"
    } = PAYLOAD;

    console.log({
        holdingJustThis
    });
    console.log({
        itIsGoingToBeUndefined  // logs {itIsGoingToBeUndefined:undefined}
    });
    console.log({
        deep                    // logs {deep:undefined}
    });
})()

JS / ES6：未定义的解构

5 个答案:

示例：