ES6中export和as怎么用

在ES6（ECMAScript 2015）中，export和as是模块系统中非常重要的关键字，用于导出和重命名模块中的变量、函数、类等。本文将详细介绍它们的用法。

1. export的基本用法

export关键字用于从模块中导出变量、函数、类等，以便其他模块可以导入并使用它们。

1.1 导出单个变量或函数

// module.js
export const name = 'Alice';
export function greet() {
  console.log('Hello, ' + name);
}

在上面的例子中，我们导出了一个常量name和一个函数greet。

1.2 导出多个变量或函数

// module.js
const name = 'Alice';
function greet() {
  console.log('Hello, ' + name);
}

export { name, greet };

在这个例子中，我们使用export { ... }语法一次性导出了多个变量和函数。

1.3 导出默认值

// module.js
export default function() {
  console.log('This is the default export');
}

export default用于导出一个模块的默认值。一个模块只能有一个默认导出。

2. as的用法

as关键字用于在导出或导入时重命名变量、函数、类等。

2.1 在导出时使用as

// module.js
const name = 'Alice';
function greet() {
  console.log('Hello, ' + name);
}

export { name as userName, greet as sayHello };

在这个例子中，我们将name重命名为userName，将greet重命名为sayHello。

2.2 在导入时使用as

// main.js
import { userName as name, sayHello as greet } from './module.js';

console.log(name); // 输出: Alice
greet(); // 输出: Hello, Alice

在这个例子中，我们在导入时将userName重命名为name，将sayHello重命名为greet。

3. 结合export和as的用法

export和as可以结合使用，以便在导出时重命名变量、函数、类等。

// module.js
const name = 'Alice';
function greet() {
  console.log('Hello, ' + name);
}

export { name as userName, greet as sayHello };

// main.js
import { userName, sayHello } from './module.js';

console.log(userName); // 输出: Alice
sayHello(); // 输出: Hello, Alice

在这个例子中，我们在导出时使用as重命名了变量和函数，然后在导入时直接使用重命名后的名称。

4. 总结

• export用于从模块中导出变量、函数、类等。
• as用于在导出或导入时重命名变量、函数、类等。
• export default用于导出一个模块的默认值。

通过合理使用export和as，可以使模块的导出和导入更加灵活和清晰。