面试题：JavaScript模块化开发中export和export default的区别

Question

在JavaScript模块化开发里，阐述export和export default在使用方式、导入形式上有哪些不同点，并分别举例说明。

Answer 1

使用方式不同

• export：可以导出多个变量、函数、类等。语法为export let variable = value; 或者先定义再导出 let variable = value; export {variable};

  // utils.js
  export const PI = 3.14;
  export function add(a, b) {
      return a + b;
  }
  

• export default：一个模块只能有一个export default，用于导出默认值，可以是变量、函数、类等。语法为export default value; 或者 const value; export default value;

  // greeting.js
  const greeting = 'Hello';
  export default greeting;
  

导入形式不同

• 针对export：导入时需要使用大括号指定要导入的名称，且名称需与导出时一致。

  // main.js
  import {PI, add} from './utils.js';
  console.log(PI); 
  console.log(add(2, 3)); 
  

• 针对export default：导入时无需使用大括号，可自定义导入名称。

  // main.js
  import msg from './greeting.js';
  console.log(msg);