解构赋值默认值

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) // {}