export default 和 export 有什么区别？

推荐答案

export default 和 export 的主要区别在于导出的方式和导入时的语法。

• export default 用于导出一个模块的默认值，每个模块只能有一个默认导出。导入时可以使用任意名称来引用默认导出的值。
• export 用于导出模块的多个命名值，导入时需要按照导出的名称进行引用。

本题详细解读

export default

• 用法：export default 用于导出一个模块的默认值。每个模块只能有一个默认导出。
• 导入方式：导入时可以使用任意名称来引用默认导出的值。
• 示例：

  // module.js
  const foo = 'Hello, World!';
  export default foo;
  
  // main.js
  import myFoo from './module.js';
  console.log(myFoo); // 输出: Hello, World!

export

• 用法：export 用于导出模块的多个命名值。可以导出变量、函数、类等。
• 导入方式：导入时需要按照导出的名称进行引用，或者使用 as 关键字重命名。
• 示例：

  // www.javascriptcn.com code example
  // module.js
  export const foo = 'Hello';
  export const bar = 'World';
  
  // main.js
  import { foo, bar } from './module.js';
  console.log(foo, bar); // 输出: Hello World
  
  // 或者使用 as 重命名
  import { foo as myFoo, bar as myBar } from './module.js';
  console.log(myFoo, myBar); // 输出: Hello World

区别总结

• 数量限制：export default 每个模块只能有一个，而 export 可以有多个。
• 导入语法：export default 导入时可以使用任意名称，而 export 导入时需要按照导出的名称进行引用。
• 用途：export default 通常用于导出模块的主要功能或值，而 export 用于导出多个辅助功能或值。