在JavaScript中为解构的嵌套对象中的每个键设置默认值

Question

我知道，一般来说，如何在Javascript中解构一个简单的对象。 我也知道如何在解构过程中为简单对象赋予默认值。

例如，我可以将两个不同的嵌套对象传递给记录器函数。 记录器功能只是控制台记录嵌套数组

 var firstExample = { name: "foo", number: 1, myObject: { myArray: [1, 2, 3] } }; var secondExample = { name: undefined, number: undefined, myObject: { myArray: [9, 8, 7] } }; var myLogger = ({ name = "defaultName", number = 999, myObject: { myArray: stuff } }) => { console.log(`${name} ${stuff}`); }; myLogger(firstExample); // "foo 1,2,3" myLogger(secondExample); // "defaultName 9,8,7" 

然而，目前，我正在努力解构嵌套的对象并为每个嵌套的键/值配对赋予它值。

例如，当我尝试使用相同的myLogger函数添加以下代码时，会抛出TypeError。

 var myLogger = ({ name = "defaultName", number = 999, myObject: { myArray: stuff } }) => { console.log(`${name} ${stuff}`); }; var thirdExample = { name: "bar", number: 2 }; myLogger(thirdExample) // ERROR // TypeError: Cannot destructure property `myArray` of 'undefined' or 'null'. 

如何正确编写我的函数来解构对象以避免此错误？

Answer 1

由于错误意味着：

无法myArray 'undefined'或'null'属性myArray 。

父对象（myObject）应该具有空对象的默认值，以便可以从中提取（可能存在的） myArray属性（并且可能分配了默认值）：

 var myLogger = ({ name = "defaultName", number = 999, myObject: { myArray: stuff } = {} // <------- }) => { console.log(`${name} ${stuff}`); }; var thirdExample = { name: "bar", number: 2 }; myLogger(thirdExample) // ERROR // TypeError: Cannot destructure property `myArray` of 'undefined' or 'null'. 

要分配默认值：

 var myLogger = ({ name = "defaultName", number = 999, myObject: { myArray: stuff = 'stuffDefault' } = {} // <------- }) => { console.log(`${name} ${stuff}`); }; var thirdExample = { name: "bar", number: 2 }; myLogger(thirdExample) // ERROR // TypeError: Cannot destructure property `myArray` of 'undefined' or 'null'. 

请注意，如果在没有参数的情况下调用函数，这也将抛出：

 var myLogger = ({ name = "defaultName", number = 999, myObject: { myArray: stuff = 'stuffDefault' } = {} // <------- }) => { console.log(`${name} ${stuff}`); }; var thirdExample = { name: "bar", number: 2 }; myLogger() 

因此，您也可以为整个参数指定一个默认值：

 var myLogger = ({ name = "defaultName", number = 999, myObject: { myArray: stuff = 'stuffDefault' } = {} } = {}) => { // <------- console.log(`${name} ${stuff}`); }; var thirdExample = { name: "bar", number: 2 }; myLogger()