在 JavaScript 中，`import`和`export`語句是 ES6 及之后版本引入的重要特性，用于模塊化開發(fā)。它們使得代碼的組織和復(fù)用更加方便和清晰。

一、`export`語句

`export`語句用于將模塊中的變量、函數(shù)、類等導(dǎo)出，以便在其他模塊中使用?？梢允褂靡韵聨追N方式進行導(dǎo)出：

1. 默認(rèn)導(dǎo)出（Default Export）：

默認(rèn)導(dǎo)出允許在一個模塊中指定一個默認(rèn)的導(dǎo)出對象。一個模塊只能有一個默認(rèn)導(dǎo)出。使用`export default`關(guān)鍵字來指定默認(rèn)導(dǎo)出。

```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.";

}

}

// 默認(rèn)導(dǎo)出

export default {

defaultValue,

defaultFunction,

DefaultClass

};

```

在其他模塊中，可以使用`import`語句來導(dǎo)入默認(rèn)導(dǎo)出的對象，并使用指定的名稱來訪問它。

```javascript

// 導(dǎo)入默認(rèn)導(dǎo)出

import myModule from "./module.js";

console.log(myModule.defaultValue);

myModule.defaultFunction();

const myClass = new myModule.DefaultClass();

console.log(myClass.message);

```

2. 命名導(dǎo)出（Named Exports）：

命名導(dǎo)出允許在一個模塊中導(dǎo)出多個變量、函數(shù)或類，每個導(dǎo)出都有一個特定的名稱。使用`export`關(guān)鍵字后跟要導(dǎo)出的名稱來進行命名導(dǎo)出。

```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;

}

}

// 命名導(dǎo)出

export { PI, add, Circle };

```

在其他模塊中，可以使用`import`語句來導(dǎo)入命名導(dǎo)出的變量、函數(shù)或類，并使用指定的名稱來訪問它們。

```javascript

// 導(dǎo)入命名導(dǎo)出

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`語句用于從其他模塊中導(dǎo)入導(dǎo)出的變量、函數(shù)或類。`import`語句可以有以下幾種形式：

1. 導(dǎo)入默認(rèn)導(dǎo)出：

使用`import`關(guān)鍵字后跟要導(dǎo)入的模塊路徑，然后使用`as`關(guān)鍵字可選地指定一個別名來訪問默認(rèn)導(dǎo)出的對象。

```javascript

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

console.log(customName.defaultValue);

customName.defaultFunction();

const myClass = new customName.DefaultClass();

console.log(myClass.message);

```

2. 導(dǎo)入命名導(dǎo)出：

使用`import`關(guān)鍵字后跟要導(dǎo)入的模塊路徑，然后使用大括號`{}`包含要導(dǎo)入的命名導(dǎo)出的名稱，每個名稱之間用逗號分隔?？梢允褂弥付ǖ拿Q來訪問導(dǎo)入的變量、函數(shù)或類。

```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`語句中，模塊的路徑可以是相對路徑或絕對路徑。相對路徑是相對于當(dāng)前模塊的路徑，而絕對路徑是從項目的根目錄開始的完整路徑。

相對路徑的示例：

- `import myModule from "./module.js";`：表示從當(dāng)前模塊所在的目錄下的`module.js`文件中導(dǎo)入。

- `import myModule from "../otherModule.js";`：表示從當(dāng)前模塊的上一級目錄中的`otherModule.js`文件中導(dǎo)入。

絕對路徑的示例：

- `import myModule from "/path/to/module.js";`：表示從項目的根目錄下的`/path/to/module.js`文件中導(dǎo)入。

四、注意事項

1. `import`和`export`語句必須位于模塊的頂層，不能在函數(shù)內(nèi)部或條件語句中使用。

2. 模塊的文件名通常以`.js`結(jié)尾，但也可以是其他擴展名，如`.mjs`（用于 ES 模塊）。

3. 在瀏覽器環(huán)境中，使用`import`語句時需要確保服務(wù)器支持 HTTP/2 或使用合適的構(gòu)建工具（如 Webpack、Parcel 等）來處理模塊的打包和加載。

4. 當(dāng)使用`import`語句導(dǎo)入一個模塊時，JavaScript 引擎會首先檢查模塊是否已經(jīng)被加載過。如果已經(jīng)加載過，則不會再次加載，而是直接使用緩存中的模塊。

`import`和`export`語句是 JavaScript 中實現(xiàn)模塊化開發(fā)的重要工具。它們允許將代碼組織成獨立的模塊，提高代碼的可維護性和可復(fù)用性。通過合理使用`import`和`export`，可以更好地管理大型項目的代碼結(jié)構(gòu)，并促進團隊合作。