解构赋值默认值

IT技术 javascript reactjs ecmascript-6 variable-assignment destructuring
2021-04-22 18:12:38

我正在学习 javascript 并且我在尝试在解构时为变量提供默认值时遇到了 ES6 语法的问题。基本上，我试图分配一个变量，给它一个对象的属性值，如果值为 false/null/undefined，我希望它是一个空对象。例如，

let foo = { 
            prop1: 'hello!',
            prop2: null 
           }

const prop1 = foo.prop1 || {}
const prop2 = foo.prop2 || {}

console.log(prop1) //  hello!
console.log(prop2) //  {}

👆这就是我想要的，👇是我认为与上面等效的 ES6 糖语法（它不起作用 tho..）

let foo = { 
            prop1: 'hello!',
            prop2: null 
           }

const { prop1 = {} } = foo
const { prop2 = {} } = foo

console.log(prop1) // hello!
console.log(prop2) // null

但不知何故，有时它似乎在 React 中工作，但其他时候却没有......这是兼容性问题吗？好混乱！

2个回答

您可能对 null 和 undefined 之间的区别感到困惑，例如：

const { dogName = 'snickers' } = { dogName: undefined }
console.log(dogName) // what will it be? 'snickers'!

const { dogName = 'snickers' } = { dogName: null }
console.log(dogName) // what will it be? null!

const { dogName = 'snickers' } = { dogName: false }
console.log(dogName) // what will it be? false!

const { dogName = 'snickers' } = { dogName: 0 }
console.log(dogName) // what will it be? 0!

取自：http : //wesbos.com/destructuring-default-values/

不，这不是兼容性问题。

如果没有值，默认值将起作用，这意味着如果它是 ，它将起作用undefined。从您的示例中，您正在分配null给prop2, 并且null是一个定义的值。

因此，如果您prop2没有定义或分配，它将起作用undefined

let foo = { 
        prop1: 'hello!',
        prop2: undefined 
       }

const { prop1 = {} } = foo
const { prop2 = {} } = foo

console.log(prop1) // hello!
console.log(prop2) // {}
ahhhh 我终于明白了 null 和 undefined 之间的实际区别，非常感谢！
2021-06-04 18:12:38
是的，你是对的。我在上面的回答中可能有一些问题需要解释。谢谢菲利克斯。
2021-06-06 18:12:38
如果 foo 未定义怎么办？
2021-06-13 18:12:38
它会回来 Uncaught ReferenceError: foo is not defined
2021-06-14 18:12:38
FWIWundefined也是一个值，但由于它也是您在属性不存在或未传递参数时获得的值，因此决定在该值时应用默认undefined值。
2021-06-16 18:12:38
其它你可能感兴趣的问题
上一篇为什么 React Webpack 生产版本显示空白页面？ 下一篇如何修复 Firebase 9.0 导入错误？“尝试导入错误：‘firebase/app’不包含默认导出（作为‘firebase’导入）。”