使用解构赋值传递对象作为函数参数时变量未定义报错问题

问题原因分析 #

对了，你贴的示例代码A里有个笔误，Const首字母大写了，实际编码时要写小写的const，否则会抛出语法错误。

你对对象解构作为函数参数的基础理解是完全正确的：函数接收传入的对象后，确实会通过解构创建对应变量，赋值为对象的对应属性值。你遇到的报错和解构本身无关，是变量作用域的问题：

• 你在statsUpdate函数内部用const声明的max变量，属于函数的局部作用域变量，仅在函数内部可访问，函数外部的全局作用域无法读取这个变量，所以你在函数外执行console.log(max)才会报max is not defined的引用错误。
• 额外补充：你预期typeof max返回object也是不对的，示例里max的值是数字56.78，typeof会返回number。

修复方案 #

你可以用两种方式调整代码验证效果：

方案1：把打印逻辑移到函数内部 #

const stats = {
  max: 56.78,
  standard_deviation: 4.34,
  median: 34.54,
  mode: 23.87,
  min: -0.75,
  average: 35.85
};

const statsUpdate = (x) => {
  const {max} = x;
  // 局部作用域内访问max
  console.log(max); 
  console.log(typeof max); 
}

statsUpdate(stats); 

运行后会输出56.78和number，符合解构的预期效果。

方案2：函数返回解构的值，在外部接收 #

const stats = {
  max: 56.78,
  standard_deviation: 4.34,
  median: 34.54,
  mode: 23.87,
  min: -0.75,
  average: 35.85
};

const statsUpdate = (x) => {
  const {max} = x;
  return max;
}

const max = statsUpdate(stats); 
console.log(max); 
console.log(typeof max); 

同样可以得到正确输出。

额外扩展：直接在参数位置解构的写法 #

你学习的这节课最终要教的其实是可以把解构逻辑直接写到参数声明里，不用在函数体里单独写解构语句，写法如下：

// 直接在参数位置解构，不用单独声明变量
const statsUpdate = ({max}) => {
  console.log(max);
  console.log(typeof max);
}

statsUpdate(stats);

这种写法和你之前写的在函数体内解构的逻辑完全等价，是更简洁的写法。

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