两种ES模块默认导出语法是否等价？

我看到很多人这样写组件：

export default function Example(){XYZ}

这和先写函数再在页面底部导出的写法是一样的吗？

function Example(){XYZ};

export default Example

嘿，这个问题问得太实用了！直接给你拍板：这两种写法在功能上完全等价，最终的导出效果没有任何区别，都是把Example函数设为当前ES模块的默认导出。

咱们来掰扯清楚细节：

• 第一种是「声明+导出」合并成一步的语法糖，写起来更紧凑，直接在函数声明前加export default，本质就是把这个命名函数作为默认导出抛出。
• 第二种是先独立完成函数声明，再单独执行默认导出操作，把已经定义好的Example函数指定为模块的默认导出项。

当其他模块用import MyComponent from './your-module.js'导入时，不管你用哪种写法，拿到的都是同一个Example函数——甚至你把第一种写法里的函数名去掉（写成export default function(){XYZ}），导入时也完全不影响使用，因为默认导出的名称是由导入方自定义的。

至于怎么选？纯看个人习惯和代码风格：

• 如果函数逻辑简短，想保持代码紧凑，就用第一种；
• 如果函数很长，或者你习惯把所有导出语句集中在模块末尾统一管理，第二种会更清晰。

总之，两种写法没有功能上的差异，放心根据自己的偏好使用就行！

备注：内容来源于stack exchange，提问作者Aleks3000