我正在使用一些这样的解构：
const { item } = content
console.log(item)
但是我应该如何处理content === undefined- 这会引发错误？
“旧”方式如下所示：
const item = content && content.item
因此，如果content未定义 ->item也将是未定义的。
我可以使用解构做类似的事情吗？
JS/ES6：未定义的解构
IT技术
javascript
ecmascript-6
2021-02-06 05:32:14
6个回答
您可以使用短路评估来提供默认值 if contentis a falsy value，通常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"const { item } = Object(content)
解构嵌套对象是干净和简短的，但是当源属性是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);
接受的答案不适用于未设置的真正未定义的值const content = undefined。在这种情况下，这将起作用：
const { item } = (typeof content !== 'undefined' && content) || {}
console.log(item)
可以解包 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}
});
})()