怎样在JavaScript中使用import和export语句（ES6及之后）？

在 JavaScript 中，`import`和`export`语句是 ES6 及之后版本引入的重要特性，用于模块化开发。它们使得代码的组织和复用更加方便和清晰。

一、`export`语句

`export`语句用于将模块中的变量、函数、类等导出，以便在其他模块中使用。可以使用以下几种方式进行导出：

1. 默认导出（Default Export）：

默认导出允许在一个模块中指定一个默认的导出对象。一个模块只能有一个默认导出。使用`export default`关键字来指定默认导出。

```javascript

// 模块文件 module.js

const defaultValue = 42;

function defaultFunction() {

console.log("This is the default function.");

}

class DefaultClass {

constructor() {

this.message = "This is the default class.";

}

}

// 默认导出

export default {

defaultValue,

defaultFunction,

DefaultClass

};

```

在其他模块中，可以使用`import`语句来导入默认导出的对象，并使用指定的名称来访问它。

```javascript

// 导入默认导出

import myModule from "./module.js";

console.log(myModule.defaultValue);

myModule.defaultFunction();

const myClass = new myModule.DefaultClass();

console.log(myClass.message);

```

2. 命名导出（Named Exports）：

命名导出允许在一个模块中导出多个变量、函数或类，每个导出都有一个特定的名称。使用`export`关键字后跟要导出的名称来进行命名导出。

```javascript

// 模块文件 module.js

const PI = 3.14159;

function add(a, b) {

return a + b;

}

class Circle {

constructor(radius) {

this.radius = radius;

}

calculateArea() {

return Math.PI * this.radius * this.radius;

}

}

// 命名导出

export { PI, add, Circle };

```

在其他模块中，可以使用`import`语句来导入命名导出的变量、函数或类，并使用指定的名称来访问它们。

```javascript

// 导入命名导出

import { PI, add, Circle } from "./module.js";

console.log(PI);

console.log(add(3, 4));

const myCircle = new Circle(5);

console.log(myCircle.calculateArea());

```

二、`import`语句

`import`语句用于从其他模块中导入导出的变量、函数或类。`import`语句可以有以下几种形式：

1. 导入默认导出：

使用`import`关键字后跟要导入的模块路径，然后使用`as`关键字可选地指定一个别名来访问默认导出的对象。

```javascript

import myModule as customName from "./module.js";

console.log(customName.defaultValue);

customName.defaultFunction();

const myClass = new customName.DefaultClass();

console.log(myClass.message);

```

2. 导入命名导出：

使用`import`关键字后跟要导入的模块路径，然后使用大括号`{}`包含要导入的命名导出的名称，每个名称之间用逗号分隔。可以使用指定的名称来访问导入的变量、函数或类。

```javascript

import { PI, add, Circle } from "./module.js";

console.log(PI);

console.log(add(3, 4));

const myCircle = new Circle(5);

console.log(myCircle.calculateArea());

```

三、模块的相对路径和绝对路径

在`import`和`export`语句中，模块的路径可以是相对路径或绝对路径。相对路径是相对于当前模块的路径，而绝对路径是从项目的根目录开始的完整路径。

相对路径的示例：

- `import myModule from "./module.js";`：表示从当前模块所在的目录下的`module.js`文件中导入。

- `import myModule from "../otherModule.js";`：表示从当前模块的上一级目录中的`otherModule.js`文件中导入。

绝对路径的示例：

- `import myModule from "/path/to/module.js";`：表示从项目的根目录下的`/path/to/module.js`文件中导入。

四、注意事项

1. `import`和`export`语句必须位于模块的顶层，不能在函数内部或条件语句中使用。

2. 模块的文件名通常以`.js`结尾，但也可以是其他扩展名，如`.mjs`（用于 ES 模块）。

3. 在浏览器环境中，使用`import`语句时需要确保服务器支持 HTTP/2 或使用合适的构建工具（如 Webpack、Parcel 等）来处理模块的打包和加载。

4. 当使用`import`语句导入一个模块时，JavaScript 引擎会首先检查模块是否已经被加载过。如果已经加载过，则不会再次加载，而是直接使用缓存中的模块。

`import`和`export`语句是 JavaScript 中实现模块化开发的重要工具。它们允许将代码组织成独立的模块，提高代码的可维护性和可复用性。通过合理使用`import`和`export`，可以更好地管理大型项目的代码结构，并促进团队合作。