解构给默认值_解构分配默认值

I am learning javascript and I got kind of stuck with ES6 syntax while trying to give a default value to a variable when destructuring.

Basically, I am trying to assign a variable giving the value of an object's property to it and if the value is false/null/undefined, I want it to be an empty object.

For example,

let foo = {

prop1: 'hello!',

prop2: null

}

const prop1 = foo.prop1 || {}

const prop2 = foo.prop2 || {}

console.log(prop1) // hello!

console.log(prop2) // {}

👆This is what I want and 👇 is ES6 sugar syntax I thought as equivalent to above(it doesn't work tho..)

let foo = {

prop1: 'hello!',

prop2: null

}

const { prop1 = {} } = foo

const { prop2 = {} } = foo

console.log(prop1) // hello!

console.log(prop2) // null

but somehow, sometimes it seems working in React, but the other times it doesn't.. is it compatibility problem? so confusing!

解决方案

You probably confused by the difference between null and undefined, For example:

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!