关于JavaScript函数参数`{ environment = 'test' } = {}`的语法含义与疑问解答

嘿，这个问题问到点子上了！这是ES6里非常实用的对象解构+默认参数组合写法，我给你一步步拆解明白：

1. { environment = 'test' } = {}到底是什么意思？ #

我们把它拆成两个核心部分来看：

• 对象解构赋值：{ environment = 'test' }
  这表示我们要从传入的参数对象里提取environment属性。如果传入的对象里没有这个属性，或者它的值是undefined，就会用默认值'test'来替代。
• 参数默认值：= {}
  这是给整个函数参数设置的默认值。意思是：如果调用函数时根本没传参数，或者传的是undefined，那这个参数就会被自动设置成一个空对象{}。

2. 为什么已经用了对象解构，还要加= {}？ #

这是很多人刚开始接触解构时都会疑惑的点，核心原因是避免解构undefined导致的报错。

举个反例，如果我们去掉= {}，写成：

const makeServer = ({ environment = 'test' }) => {}

当你直接调用makeServer()（不传任何参数）时，JS会尝试对undefined进行解构——但undefined不是对象，没法从中提取属性，这时候就会抛出错误：

TypeError: Cannot destructure property 'environment' of 'undefined' as it is undefined.

而加上= {}之后，当没传参数时，参数会被默认设为空对象{}，这时候解构空对象的environment属性，因为不存在，就会触发我们设置的默认值'test'，代码能正常运行，不会报错，鲁棒性更强。

几种调用场景的结果对比 #

为了让你更直观理解，我们看几个调用例子：

• makeServer() → 参数是空对象，environment取值为'test'
• makeServer({ environment: 'prod' }) → environment取值为'prod'
• makeServer({}) → 传入空对象，environment用默认值'test'
• makeServer(undefined) → 和不传参数一样，environment为'test'

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