es6 export如何用

发布时间：2022-10-18 15:03:12 作者：iii
来源：亿速云阅读：172

ES6 export如何用

ES6（ECMAScript 2015）引入了模块系统，使得JavaScript开发者能够更好地组织和管理代码。export是ES6模块系统中的关键语法之一，用于从模块中导出变量、函数、类等，以便其他模块可以导入并使用它们。本文将详细介绍export的用法，并通过示例代码帮助读者更好地理解。

1. 基本概念

在ES6之前，JavaScript没有原生的模块系统，开发者通常使用CommonJS或AMD等模块规范来组织代码。ES6引入了模块系统后，开发者可以使用import和export来管理模块之间的依赖关系。

export用于从模块中导出内容，而import用于从其他模块中导入内容。导出的内容可以是变量、函数、类等，导入的内容可以是导出的变量、函数、类等。

2. 导出变量

2.1 导出单个变量

可以使用export关键字导出单个变量。导出的变量可以是let、const或var声明的变量。

// moduleA.js
export const name = 'Alice';
export let age = 25;
export var gender = 'female';

在其他模块中，可以使用import关键字导入这些变量：

// moduleB.js
import { name, age, gender } from './moduleA.js';

console.log(name); // 输出: Alice
console.log(age);  // 输出: 25
console.log(gender); // 输出: female

2.2 导出多个变量

可以在一个export语句中导出多个变量：

// moduleA.js
const name = 'Alice';
let age = 25;
var gender = 'female';

export { name, age, gender };

导入方式与单个变量导出相同：

// moduleB.js
import { name, age, gender } from './moduleA.js';

console.log(name); // 输出: Alice
console.log(age);  // 输出: 25
console.log(gender); // 输出: female

2.3 导出时重命名变量

在导出时，可以使用as关键字为变量重命名：

// moduleA.js
const name = 'Alice';
let age = 25;

export { name as fullName, age as userAge };

导入时需要使用重命名后的变量名：

// moduleB.js
import { fullName, userAge } from './moduleA.js';

console.log(fullName); // 输出: Alice
console.log(userAge);  // 输出: 25

3. 导出函数

3.1 导出单个函数

可以使用export关键字导出单个函数：

// moduleA.js
export function sayHello() {
  console.log('Hello, world!');
}

在其他模块中导入并使用该函数：

// moduleB.js
import { sayHello } from './moduleA.js';

sayHello(); // 输出: Hello, world!

3.2 导出多个函数

可以在一个export语句中导出多个函数：

// moduleA.js
function sayHello() {
  console.log('Hello, world!');
}

function sayGoodbye() {
  console.log('Goodbye, world!');
}

export { sayHello, sayGoodbye };

导入方式与单个函数导出相同：

// moduleB.js
import { sayHello, sayGoodbye } from './moduleA.js';

sayHello();  // 输出: Hello, world!
sayGoodbye(); // 输出: Goodbye, world!

3.3 导出时重命名函数

在导出时，可以使用as关键字为函数重命名：

// moduleA.js
function sayHello() {
  console.log('Hello, world!');
}

export { sayHello as greet };

导入时需要使用重命名后的函数名：

// moduleB.js
import { greet } from './moduleA.js';

greet(); // 输出: Hello, world!

4. 导出类

4.1 导出单个类

可以使用export关键字导出单个类：

// moduleA.js
export class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

在其他模块中导入并使用该类：

// moduleB.js
import { Person } from './moduleA.js';

const alice = new Person('Alice', 25);
alice.sayHello(); // 输出: Hello, my name is Alice

4.2 导出多个类

可以在一个export语句中导出多个类：

// moduleA.js
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

class Animal {
  constructor(name) {
    this.name = name;
  }

  makeSound() {
    console.log(`${this.name} makes a sound`);
  }
}

export { Person, Animal };

导入方式与单个类导出相同：

// moduleB.js
import { Person, Animal } from './moduleA.js';

const alice = new Person('Alice', 25);
alice.sayHello(); // 输出: Hello, my name is Alice

const dog = new Animal('Dog');
dog.makeSound(); // 输出: Dog makes a sound

4.3 导出时重命名类

在导出时，可以使用as关键字为类重命名：

// moduleA.js
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

export { Person as Human };

导入时需要使用重命名后的类名：

// moduleB.js
import { Human } from './moduleA.js';

const alice = new Human('Alice', 25);
alice.sayHello(); // 输出: Hello, my name is Alice

5. 默认导出

除了命名导出外，ES6还支持默认导出。一个模块只能有一个默认导出，通常用于导出模块的主要功能。

5.1 默认导出变量

可以使用export default关键字导出默认变量：

// moduleA.js
const name = 'Alice';
export default name;

在其他模块中导入默认导出的变量时，不需要使用大括号：

// moduleB.js
import name from './moduleA.js';

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

5.2 默认导出函数

可以使用export default关键字导出默认函数：

// moduleA.js
export default function sayHello() {
  console.log('Hello, world!');
}

在其他模块中导入默认导出的函数时，不需要使用大括号：

// moduleB.js
import sayHello from './moduleA.js';

sayHello(); // 输出: Hello, world!

5.3 默认导出类

可以使用export default关键字导出默认类：

// moduleA.js
export default class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

在其他模块中导入默认导出的类时，不需要使用大括号：

// moduleB.js
import Person from './moduleA.js';

const alice = new Person('Alice', 25);
alice.sayHello(); // 输出: Hello, my name is Alice

6. 混合导出

在一个模块中，可以同时使用命名导出和默认导出：

// moduleA.js
const name = 'Alice';
let age = 25;

function sayHello() {
  console.log('Hello, world!');
}

export { name, age };
export default sayHello;

在其他模块中，可以同时导入命名导出和默认导出：

// moduleB.js
import sayHello, { name, age } from './moduleA.js';

console.log(name); // 输出: Alice
console.log(age);  // 输出: 25
sayHello();        // 输出: Hello, world!

7. 导出所有内容

可以使用export * from语法将另一个模块的所有导出内容重新导出：

// moduleA.js
export const name = 'Alice';
export let age = 25;

// moduleB.js
export * from './moduleA.js';
export const gender = 'female';

在moduleB.js中，name和age从moduleA.js中重新导出，同时导出了gender。

8. 总结

ES6的export语法为JavaScript开发者提供了强大的模块管理能力。通过export，开发者可以轻松地将变量、函数、类等从模块中导出，供其他模块使用。无论是命名导出还是默认导出，export都为代码的组织和复用提供了极大的便利。

在实际开发中，合理使用export可以帮助开发者更好地组织代码结构，提高代码的可维护性和可读性。希望本文的介绍和示例能够帮助读者更好地理解和应用ES6的export语法。