使用无效合并或可选链接的安全解构

Question

目前我正在使用以下代码进行解构：

const myObj1 = {name: 'Abc'}
const {name} = myObj1
console.log(name)
const myObj2 = null
const {name2} = myObj2  // this will give error

现在，由于我们有可选链接，我可以这样做：

const myObj = {name: 'Abc'}
const {name} = myObj
console.log(name) // 'Abc'
const myObj2 = null
const name2 = myObj2?.myObj2
console.log(name2) // undefined

是否有更好的方法或安全的方法来使用无效合并或可选链接进行解构？

Answer 1

const name2 = myObj2?.myObj2 - 这不是解构。

myObj2?.myObj2 将 return undefined 分配给 name2.

你可以简单地做

const myObj2 = null;
const { name2 } = { ...myObj2 };
console.log(name2); // undefined

如果你想使用 nullish 合并运算符，那么你应该如下所示使用它：

const myObj2 = null
const {name2} =  myObj2 ?? {};
console.log(name2) // undefined

如果 myObj2 为 null 或未定义，

nullish 合并运算符将 return 右侧的操作数，否则它将 return 左侧的操作数，在您的情况下是 myObj2.

Answer 2

你做的是对的，但它不是解构的，而且当你想解构多个属性时效率不高，你可以这样做。

const myObj = {name: 'Abc', email: "test"}
const {name,email} = myObj
console.log(name, email) // 'Abc' "test"
const myObj1 = null
const {name1,email1} = myObj1 || {} // or myObj1 ?? {}
console.log(name1,email1) // undefined undefined

Answer 3

你可以试试||

const myObj2 = null;
const {name2, name3} = myObj2 || {}
console.log(name2, name3);

const myObj3 = {name4: "name4"};
const {name4, name5} = myObj3 || {}
console.log(name4, name5);

希望对您有所帮助。

使用无效合并或可选链接的安全解构

Safe destructuring using nullish coalescing or optional chaining

javascript

destructuring

optional-chaining

nullish-coalescing