JS的import和export那些事

在JavaScript中，import 和 export 是ES6（ECMAScript 2015）引入的模块系统的关键部分，用于在JavaScript文件之间共享函数、对象或原始值。这允许开发者将代码拆分成可重用的模块，从而创建更干净、更可维护的应用程序。

Export

export 语句用于从模块中导出函数、对象或原始值，以便其他模块可以使用 import 语句将其导入。

示例：

// mathFunctions.js
export function add(x, y) {
  return x + y;
}

export function multiply(x, y) {
  return x * y;
}

// 或者，你也可以使用大括号来导出多个内容
function subtract(x, y) {
  return x - y;
}

const pi = 3.14159;

export { subtract, pi };

Import

import 语句用于从已导出的模块中导入函数、对象或原始值。

示例：

// main.js
import { add, multiply } from './mathFunctions.js';

console.log(add(1, 2)); // 输出 3
console.log(multiply(2, 3)); // 输出 6

// 如果你导出了多个内容，你可以使用大括号来导入它们
import { subtract, pi } from './mathFunctions.js';

console.log(subtract(5, 3)); // 输出 2
console.log(pi); // 输出 3.14159

// 还可以为导入的内容重命名，以避免命名冲突
import { subtract as sub, pi as circlePi } from './mathFunctions.js';

console.log(sub(5, 3)); // 输出 2
console.log(circlePi); // 输出 3.14159

// 如果你想导入模块中的所有内容，可以使用星号（*）
import * as math from './mathFunctions.js';

console.log(math.add(1, 2)); // 输出 3
console.log(math.subtract(5, 3)); // 输出 2

默认导出

除了命名导出（如上所述），还可以使用默认导出（default export）。一个模块只能有一个默认导出，并且可以使用任何名称来导入它。

示例：

// mathFunctions.js
export default function square(x) {
  return x * x;
}

// main.js
import square from './mathFunctions.js';

console.log(square(4)); // 输出 16

在上面的示例中，square 函数是默认导出的，因此我们在 import 语句中直接使用 square 作为其名称，而不是在大括号中。