JS/ES6:未定义的解构

Question

我正在使用这样的解构：

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

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

"旧"方式如下所示：

const item = content && content.item

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

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

Answer 1

如果content是假值，则可以使用短路评估来提供默认值，在这种情况下通常是undefined或null。

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

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

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 { item } = Object(content)

Answer 3

解构嵌套对象干净而简短，但当源属性在右侧对象中null或undefined时会很糟糕

假设我们有

const {
  loading,
  data: { getPosts },
} = useQuery(FETCH_POSTS_QUERY);

解决方案 1如果我们有数据对象但没有getPosts那么我们可以使用：
(在每个级别设置默认值(

const {
  loading,
  data: { getPosts = [] } = { getPosts: [] },
} = useQuery(FETCH_POSTS_QUERY);

解决方案 2：如果事件data undefined则：

const {
  loading,
  data: { getPosts } = { getPosts: [] },
} = useQuery(FETCH_POSTS_QUERY);

Answer 4

最近添加了：空合并运算符(？？(。如果左侧值为 null 或未定义(我们的情况是 undefined 而不是对象(，则基本上返回右侧值。

const { item } = undefined or null
// Uncaught TypeError: Cannot destructure property 'item' of 'null' as it is  null.
const { item } = content ?? {}
console.log(item)   // undefined

因此，请考虑使用运算符。另外，如前所述，有||(或(算子。对我们来说，在这种特殊情况下没有显着差异。

这只是一个品味问题，在我们的团队中，我们有一个协议：如果目标对象为 null 或未定义，我们使用 ？？ 来定义默认对象，在其他情况下我们使用 || 运算符。

Answer 5

可以解压缩未定义的值，但不能从未定义解压缩.
修复它就像设置默认参数值一样简单。

例：

(() => {
    // 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}
    });
})()

Answer 6

我只想补充一点，对于 OP 的用例，也可以使用 Optional 链接运算符：

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

如果content为 null 或未定义，则不会访问content.item，item将未定义。

Answer 7

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

Answer 8

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

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