JavaScript 入门教程：ES6/ES7/ES8/ES9 导入和导出-JavaScript中文网-JavaScript教程资源分享门户

JavaScript 是一种脚本语言，用于为网页添加交互效果。在过去，JavaScript 的语法相对简单，但随着技术的发展，JavaScript 也不断更新和升级。其中，ES6/ES7/ES8/ES9 是 JavaScript 的四个主要版本，本文将详细介绍它们的导入和导出方法。

ES6 的导入和导出

ES6 是 JavaScript 的第六个版本，于 2015 年发布。ES6 在模块系统方面做出了大量改进，其中包括了模块的导入和导出功能。

导出

在 ES6 中，可以使用 export 关键字将一个变量、函数或类导出。例如，下面的代码将一个变量 message 导出：

// module.js
export const message = "Hello, world!";

这样，其他文件就可以使用 import 关键字导入这个变量：

// app.js
import { message } from './module.js';
console.log(message); // 输出 "Hello, world!"

如果需要导出多个变量，可以使用 export 关键字加上花括号的形式：

// module.js
export { variable1, variable2 };

导入

在 ES6 中，可以使用 import 关键字导入一个模块。例如，下面的代码将 module.js 模块导入：

// app.js
import { variable1, variable2 } from './module.js';

如果需要导入整个模块，可以使用 * 通配符：

// app.js
import * as module from './module.js';
console.log(module.variable1);
console.log(module.variable2);

ES7 的导入和导出

ES7 是 JavaScript 的第七个版本，于 2016 年发布。ES7 的导入和导出功能与 ES6 相同，但增加了异步函数和指数运算符等语言特性。

ES8 的导入和导出

ES8 是 JavaScript 的第八个版本，于 2017 年发布。ES8 的导入和导出功能与 ES6 相同，但增加了异步迭代器和 Object.values() 和 Object.entries() 等方法。

ES9 的导入和导出

ES9 是 JavaScript 的第九个版本，于 2018 年发布。ES9 的导入和导出功能与 ES6 相同，但增加了异步迭代器和 Object.values() 和 Object.entries() 等方法。

总结

JavaScript 的模块化系统是一个重要的功能，它使得代码的组织和管理更为简单和清晰。ES6/ES7/ES8/ES9 的导入和导出功能为 JavaScript 提供了更强大的模块化支持。在实际开发中，我们应该根据需要选择合适的版本和语言特性，以获得更好的开发效率和代码质量。

示例代码

ES6 导出

// module.js
export const message = "Hello, world!";
export function sayHello() {
  console.log(message);
}
export class Person {
  constructor(name) {
    this.name = name;
  }
  sayName() {
    console.log(`My name is ${this.name}.`);
  }
}

ES6 导入

// app.js
import { message, sayHello, Person } from './module.js';
console.log(message); // 输出 "Hello, world!"
sayHello(); // 输出 "Hello, world!"
const person = new Person("Tom");
person.sayName(); // 输出 "My name is Tom."

ES7 导入

// app.js
import { message, sayHello, Person } from './module.js';
console.log(message); // 输出 "Hello, world!"
sayHello(); // 输出 "Hello, world!"
const person = new Person("Tom");
person.sayName(); // 输出 "My name is Tom."
async function loadPerson() {
  const data = await fetch("https://example.com/person.json");
  const json = await data.json();
  const person = new Person(json.name);
  person.sayName();
}
loadPerson();

ES8 导入

// app.js
import { message, sayHello, Person } from './module.js';
console.log(message); // 输出 "Hello, world!"
sayHello(); // 输出 "Hello, world!"
const person = new Person("Tom");
person.sayName(); // 输出 "My name is Tom."
async function loadPerson() {
  const data = await fetch("https://example.com/person.json");
  const json = await data.json();
  const person = new Person(json.name);
  person.sayName();
  for await (let value of person) {
    console.log(value);
  }
}
loadPerson();

ES9 导入

// app.js
import { message, sayHello, Person } from './module.js';
console.log(message); // 输出 "Hello, world!"
sayHello(); // 输出 "Hello, world!"
const person = new Person("Tom");
person.sayName(); // 输出 "My name is Tom."
async function loadPerson() {
  const data = await fetch("https://example.com/person.json");
  const json = await data.json();
  const person = new Person(json.name);
  person.sayName();
  console.log(Object.values(person));
  console.log(Object.entries(person));
}
loadPerson();

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65c06fdbadd4f0e0ffa52d68