解构赋值默认值

Question

我正在学习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糖语法(尽管它不起作用..)

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

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

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

但不知何故，有时它似乎在React中起作用，但另一些时候却不起作用。是不是兼容性问题？太让人困惑了！

Answer 1

您可能被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/

Answer 2

不，这不是兼容性问题。

默认值将在没有值的情况下工作，这意味着它将工作，如果它是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) // {}