javascript - 函数参数内的自动数组解构？

Question

function getValues(param=[width, height]) {
   return `Width= ${width}, Height = ${height}`;
  }

上面的代码不起作用，因为“宽度”和“高度”未在函数体内定义

但是，下面的函数定义工作正常，我不太清楚为什么数组参数会自动解构为下面的元素，而在上面的例子中却不是这样。

 function getValues([width, height]) {
   return `Width= ${width}, Height = ${height}`;
  }

如有任何澄清，我将不胜感激。谢谢。

Answer 1

在参数中使用 =，基本上是在缺少参数(Default parameters)的情况下设置默认值。一次，您调用缺少参数或 undefined 作为参数的函数，默认值针对参数设置。在您的示例中，如果您传递任何参数，默认值 [width, height] 将被忽略，如果您不这样做，Uncaught ReferenceError 将作为宽度和高度抛出不存在(前提是未在全局或函数范围内定义)。

下面将为您提供宽度和高度的值，因为第一个参数分配给 width，第二个参数分配给 height。

function getValues(width, height, param=[width, height]) {
   console.log(param); // [5,6]
   return `Width= ${width}, Height = ${height}`;
}
  
console.log(getValues(5,6));

But, the function definition below works fine and I am not quite clear why the array parameters are automatically destructured to its elements below, while it doesn't so in the above case.

这符合Destructuring的规则.如果参数是数组，则可以根据索引将它们分配到不同的变量中。例如这里数组中的第一个值将分配给 width，第二个值将分配给 height。

function getValues([width, height]) {
  return `Width= ${width}, Height = ${height}`;
}

console.log(getValues([5, 6]));