ECMAScript 2017：理解 import 和 export 关键字-JavaScript中文网-JavaScript教程资源分享门户

随着前端技术的不断发展，JavaScript 作为一门编程语言也在不断地更新和完善。ECMAScript 2017 是 JavaScript 的一个重要版本，其中引入了 import 和 export 关键字，这两个关键字对于前端开发来说非常重要。本文将详细介绍 import 和 export 关键字的使用方法，以及它们的深度和学习意义。

import 和 export 关键字的作用

在 JavaScript 中，import 和 export 关键字分别用于导入和导出模块。模块是指一个独立的、可重用的代码块，它可以包含变量、函数、类等等。在模块化编程中，我们可以将一个大的程序分割成若干个模块，每个模块负责完成特定的功能，这样可以提高代码的可维护性和可复用性。

export 关键字

export 关键字用于导出模块中的变量、函数或类。使用 export 关键字导出的变量、函数或类可以在其他模块中使用。export 关键字有两种使用方式：

1. 导出变量、函数或类

使用 export 关键字导出变量、函数或类时，需要在变量、函数或类的前面加上 export 关键字，例如：

// www.javascriptcn.com code example
// 导出变量
export const PI = 3.1415926;

// 导出函数
export function square(x) {
  return x * x;
}

// 导出类
export class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log(`Hello, ${this.name}!`);
  }
}

2. 导出默认值

使用 export 关键字导出默认值时，需要在变量、函数或类的前面加上 default 关键字，例如：

// 导出默认值
export default function(x) {
  return x * x;
}

import 关键字

import 关键字用于导入其他模块中的变量、函数或类。使用 import 关键字导入其他模块中的变量、函数或类时，需要指定模块的路径和导入的变量、函数或类的名称。import 关键字有两种使用方式：

1. 导入指定的变量、函数或类

使用 import 关键字导入指定的变量、函数或类时，需要使用花括号 {} 括起来，例如：

// 导入变量
import { PI } from './math';

// 导入函数
import { square } from './math';

// 导入类
import { Person } from './person';

2. 导入默认值

使用 import 关键字导入默认值时，可以不使用花括号 {}，例如：

// 导入默认值
import square from './math';

import 和 export 关键字的深度和学习意义

import 和 export 关键字对于前端开发来说非常重要，它们具有以下深度和学习意义：

1. 模块化编程

使用 import 和 export 关键字可以实现模块化编程，将一个大的程序分割成若干个模块，每个模块负责完成特定的功能，这样可以提高代码的可维护性和可复用性。

2. 避免全局变量污染

使用 import 和 export 关键字可以避免全局变量污染，不同的模块可以使用相同的变量名，而不会相互影响。

3. 提高代码的可读性

使用 import 和 export 关键字可以提高代码的可读性，其他开发者可以通过 import 和 export 关键字快速了解模块中导出的变量、函数或类的作用和用法。

4. 便于代码维护

使用 import 和 export 关键字可以便于代码维护，当模块中的变量、函数或类发生变化时，只需要修改导出的代码，而不需要修改其他模块中的代码。

示例代码

下面是一个使用 import 和 export 关键字的示例代码：

// www.javascriptcn.com code example
// math.js
export const PI = 3.1415926;

export function square(x) {
  return x * x;
}

// person.js
export class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log(`Hello, ${this.name}!`);
  }
}

// app.js
import { PI, square } from './math';
import { Person } from './person';

console.log(PI); // 3.1415926
console.log(square(2)); // 4

const person = new Person('Alice');
person.greet(); // Hello, Alice!

在上面的示例代码中，math.js 和 person.js 分别导出了变量、函数和类，app.js 中使用 import 关键字导入了 math.js 和 person.js 中的变量、函数和类，并分别调用了它们。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d24370a941bf713444ea65

ECMAScript 2017：理解 import 和 export 关键字