ES6对象解构嵌套参数的默认值

Question

我正在使用ES6对象解构来为函数提供默认参数。

function mapStateToProps({ shops: { cakeShop: {}, pieShop: {} }) {
  return {
    CakeShopName: shops.cakeShop.Name,
    PieShopName: shops.pieShop.Name
  }
}

上述方法的问题在于，如果我调用

mapStateToProps({})

代码出现了"Cannot read property 'Name' of undefined"异常。原因是shops中的嵌套对象没有设置默认值，导致代码引用了空对象。
如何确保shops中的嵌套对象被正确地设置为默认值呢？即使shops本身已经被定义。

- glcheetham

---

我认为你不能使用解构来做这件事，它仅在你确定的情况下才有效... - n00dl3

听起来你把解构和默认值混淆了。你的语法解构了一个参数对象，但实际上并没有引入任何参数标识符。 - Bergi

Answer 1

听起来你把解构和默认值混淆了。你的语法会解构一个参数对象，但实际上不会引入任何参数标识符。在函数作用域中没有shops变量。

我假设你实际上想要引入cakeShop和pieShop变量，并为它们提供默认值。要做到这一点，你需要编写：

function mapStateToProps({ shops: { cakeShop = {}, pieShop = {} }) {
// short for             { shops: { cakeShop: cakeShop = {}, pieShop: pieShop = {} }) {
// parameter names (that will be bound):      ^^^^^^^^                ^^^^^^^
  return {
    CakeShopName: cakeShop.Name,
    PieShopName: pieShop.Name
  }
}

您也可以使用

function mapStateToProps({ shops: { cakeShop: {name: CakeShopName} = {}, pieShop: {name: PieShopName} = {} }) {
  return {CakeShopName, PieShopName};
}

- Bergi

---

这是正确的。就我所看到的，这与@estus的答案相同，但语法更清晰（没有末尾的额外两个= {}）？ - glcheetham

@glcheetham 当你想要使用一个没有“商店”属性的对象或者根本没有任何参数来调用函数时，这些默认值是必需的。 - Bergi

Answer 2

为了处理嵌套对象的默认值，应该：

function mapStateToProps({ shops: { cakeShop = {}, pieShop = {} } = {} } = {}) {
...
}

- Estus Flask

---

这个可以工作，但是现在shops在函数范围内未定义。如果我需要访问shops上的很多属性怎么办？ - glcheetham

问题中的代码没有解释。cakeShop等可以用作cakeShop.Name。如果您真的需要shops，那么不要使用参数解构，并改为使用const { cakeShop = {}，pieShop = {} } = shops。您不能同时从参数解构中获取shops和cakeShop。 - Estus Flask

你可以使用以下代码：{shops, shops: { cakeShop = {}, pieShop = {} } = {} } = {}。请注意，如果 cakeShop 为 null、false 或 0，则会设置默认值。 - Dude

@Dude 默认值仅适用于“undefined”。相反，如果一个值可以为null，则不会应用默认值；如果这些默认值是可取的，则在这种情况下解构是不合适的。 - Estus Flask

Answer 3

我知道这个问题涉及到解构，但是对于任何感兴趣的人，我留下了另一个选项，使用lodash或underscore：

function mapStateToProps(shops) {
  _.defaultsDeep(shops, {
    cakeShop: {
      Name: "Kiki's CakeShop"
    }, 
    pieShop: {}
  })

  return {
    CakeShopName: shops.cakeShop.Name, // defaults to "Kiki's CakeShop"
    PieShopName: shops.pieShop.Name // undefined if not specified
  }
}

- JohnnyQ