javascript对象用空值或可空键解构一行答案

【问题标题】：javascript object destructuring one line with nulls or nullable keysjavascript对象用空值或可空键解构一行
【发布时间】：2021-12-29 23:12:04
【问题描述】：

当在 js 中解构对象并且它有一些值为 null 时，解构失败并出现错误 无法读取 null 的属性 'id'

const abc = {a: 1, b: 2, c: null};
let {c = {}, c: {id} = {}} = abc || {};
console.log('c, id', c, id);

如果key的值为null，js会抛出异常。我们不知道哪个键可以为空。我希望像正常解构一样在一行中处理它。可能吗。为了这个例子，首先检查 c 是否为空，但我想把它分成两行。

【问题讨论】：

请在您的问题中包含相关代码
How do I create a runnable stack snippet?
这种解构的目标是什么？即使c 有一个值，id 也会是undefined。
@Teemu 可以说我收到了来自服务的响应。我不知道它的空值。所以如果我在运行时以这种方式解构它将会失败。我不希望它失败，我也不知道什么键：值可以为空。那么如果我想在单行中解构是什么方法呢？
您已经为此花费了两个小时，而不是仅编写这两行代码会更有效率吗？不要缩小您的开发代码，当您将代码移至生产环境时，让一个缩小器为您完成。

标签： javascript null destructuring

【解决方案1】：

不是最好的方法，但是，我有一个想法在解构之前将空值转换为未定义，以便 js 负责采用默认值。

这是工作代码

function removeNulls(obj) {
if (obj === null) {
    return undefined;
}
if (typeof obj === 'object') {
    for (let key in obj) {
        obj[key] = removeNulls(obj[key]);
    }
}
return obj;
}
const abc = {a: 1, b: 2, c: null};
let {c = {}, c: {id, id2} = {}} = removeNulls(abc) || {};
console.log('c, id, id2:', c, id, id2);

【讨论】：

【解决方案2】：

解构中的默认值仅适用于undefined 属性，不适用于null

来自MDN

可以为变量分配默认值，以防从对象中解压出来的值未定义

const abc = {a: 1, b: 2, c: undefined};
let {c = {}, c: {id} = {}} = abc || {};
console.log('c, id', c, id);

对于c: null，您必须使用：

let id = abc.c?.id

【讨论】：

是的，我知道这一点。我的问题很清楚。当我们不知道如果我们解构它可能为空时，这将是一个问题。那么，解构时如何避免呢？