解构赋值默认值

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中工作似乎是有效的，但其他时候却不行...这是兼容性问题吗？太令人困惑了！

- Jay Jeong

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!

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

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

- Shai Katz

Answer 2

不，这不是兼容性问题。

默认值只有在没有值时才有效，意味着如果它的值为undefined，它将有效。从你的例子中可以看出，你正在给prop2赋值null，而null是一个已定义的值。

因此，只有在prop2未被定义或者赋值为undefined时才会生效。

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

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

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

- Dimitrij Agal

---

啊哈，我终于明白了 null 和 undefined 之间的实际区别，非常感谢！ - Jay Jeong

就此而言，undefined 也是一个值，但由于它也是在属性不存在或未传递参数时得到的值，因此决定在 undefined 是该值时应用默认值。 - Felix Kling

是的，你说得对。我可能在上面的回答中有些解释不清楚。谢谢Felix。 - Dimitrij Agal

如果 foo 未定义会怎样？ - worldwildwebdev

它将返回“未捕获的引用错误：foo未定义” - Dimitrij Agal