面试题：JavaScript ES6模块在项目中的基础实践问题

Question

在JavaScript ES6模块中，如何使用export和import关键字分别导出和导入一个函数？请举例说明常见的默认导出与命名导出及导入方式。

Answer 1

默认导出与导入

1. 默认导出函数

   // math.js
   export default function add(a, b) {
       return a + b;
   }
   

2. 默认导入函数

   // main.js
   import add from './math.js';
   console.log(add(2, 3)); 
   

命名导出与导入

1. 命名导出函数

   // math.js
   export function subtract(a, b) {
       return a - b;
   }
   export function multiply(a, b) {
       return a * b;
   }
   

2. 命名导入函数

   // main.js
   import { subtract, multiply } from './math.js';
   console.log(subtract(5, 3)); 
   console.log(multiply(2, 4)); 
   

还可以在导入时对命名导出的函数进行重命名：

// main.js
import { subtract as sub, multiply as mul } from './math.js';
console.log(sub(5, 3)); 
console.log(mul(2, 4)); 

也可以同时进行默认导入和命名导入：

// math.js
export default function add(a, b) {
    return a + b;
}
export function subtract(a, b) {
    return a - b;
}

// main.js
import add, { subtract } from './math.js';
console.log(add(2, 3)); 
console.log(subtract(5, 3));