Question

通常，我知道如何在Javascript中解构一个简单的对象。我也知道在解构过程中如何为简单对象提供默认值。

例如，我可以将两个不同的嵌套对象传递给logger函数。记录器功能仅在控制台上记录嵌套数组的地方

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

该错误暗示：

无法解构'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()

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

1 个答案: