函数参数中的自动数组解构：为何两种写法效果不同？

嘿，这个问题其实是把函数参数默认值和数组解构赋值的用法搞混啦，我给你拆解得明明白白：

为什么第一个函数报错？ #

先看你的第一个代码：

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

这里的逻辑是：你给参数param设置了一个默认值[width, height]，但问题出在——这个默认值里的width和height根本没被定义过！它们既不是函数的参数，也不是外部存在的变量，JS引擎找不到这两个标识符，直接就抛出错误了。而且就算你调用时传入了参数（比如getValues([50,50])），函数体里的width和height依然是未定义的，还是会报错。

为什么第二个函数能正常运行？ #

再看第二个代码：

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

这是函数参数的数组解构语法，本质上是JS帮你做了一步“自动拆解”：当你调用这个函数并传入一个数组（比如getValues([100, 200])），JS会自动把传入数组的第一个元素赋值给变量width，第二个元素赋值给height——相当于在函数内部提前执行了const [width, height] = 传入的数组;这行代码，所以函数体里直接用这两个变量完全没问题。

额外补充：如果想给第一个函数加默认值怎么改？ #

要是你想给参数设置默认数组，同时又能拿到width和height，可以这么写：

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

这样既给param设置了默认的[100,200]，又通过解构把数组元素转换成了可用的变量，调用时传不传参数都能正常运行~

内容的提问来源于stack exchange，提问作者yibe