ECMAScript 2021 (ES12) 中的 import 语句详解

随着前端技术日新月异的发展，ECMAScript 2021 (ES12)日益成为大家关注的焦点。其中，import 语句作为 ES6 中引入的重要语法，在 ES12 中仍然发挥着巨大的作用。本文将为大家详解 import 语句的相关知识点及其用法，以期为大家深入理解前端技术的重要性提供指导。

import 的作用

ES6 中引入的 import 语句可以帮助我们将其他模块中的数据或者代码引入到当前模块中使用。通过 import 语句，我们可以将其他模块中的 components、functions 和其他变量等引入到当前模块中，从而提高了代码的可读性和可维护性。同时，import 还可以帮助开发者更好地进行模块化开发，减少全局变量污染，提高代码质量。

import 的语法

ES6 中引入的 import 语句具有简洁明了的语法结构，其基本语法格式为：

import defaultExport from "module-name";
import * as name from "module-name";
import { export1 } from "module-name";
import { export1 as alias1 } from "module-name";
import { export1 , export2 } from "module-name";
import { foo , bar } from "module-name/path/to/specific/un-exported/file.js";

下面我们来逐一详解各个语法格式。

import defaultExport from "module-name"

该语法格式用于引入模块默认导出的值，比如一个函数、一个类、一个对象等，示例如下：

// 引入默认导出的对象
import myObject from './myModule.js';

// 引入默认导出的函数
import myFunction from './myModule.js';

// 引入默认导出的类
import myClass from './myModule.js';

import * as name from "module-name"

该语法格式用于引入模块中所有的导出值，并存储在一个名为 name 的对象中。可以在 name 对象中访问模块中的所有导出项，示例如下：

// 引入 myModule.js 中所有导出项
import * as myModule from './myModule.js';

// 访问 myModule.js 中的导出项
console.log(myModule.myFunction());
console.log(myModule.myObject);

import { export1 } from "module-name"

该语法格式用于引入一个或多个名称为 export1、export2 等的导出项，示例如下：

// 引入 myFunction 导出项
import { myFunction } from './myModule.js';

// 引入 myClass 导出项和 myFunction 导出项
import { myClass, myFunction } from './myModule.js';

import { export1 as alias1 } from "module-name"

该语法格式用于通过一个别名引入一个名称为 export1 的导出项，示例如下：

// 引入 myFunction 导出项，并使用 myFunc 作为别名
import { myFunction as myFunc } from './myModule.js';

import { export1 , export2 } from "module-name"

该语法格式用于引入多个导出项，示例如下：

// 引入 myFunction 导出项和 myClass 导出项
import { myFunction, myClass } from './myModule.js';

import { foo , bar } from "module-name/path/to/specific/un-exported/file.js"

该语法格式用于引入模块中未导出的文件，示例如下：

// 引入 myFunction 导出项和 myClass 导出项
import { foo, bar } from './myModule/path/to/specific/un-exported/file.js';

import 的使用场景

在实际的开发中，import 语句可以广泛应用于各种场景中，包括组件化开发、模块化开发、模块引入等等，下面我们分别详细解释。

组件化开发

在组件化开发中，我们需要将不同组件中的数据合并在一起，以便于实现功能复用。此时，我们可以通过 import 语句将另一个组件中的数据引入到当前组件中使用。

-- -------------------- ---- -------
-- ----
------ ------- -
  ----- --------------
  ------ -
    ------ -
      -------- ------ -------
    -
  -
-

-- ----
------ ----------- ---- --------------------

模块化开发

在模块化开发中，我们需要将代码按照功能拆分成多个独立的模块，从而提高代码的可读性和可维护性。此时，我们可以通过 import 语句将其他模块中的代码引入到当前模块中使用。

// 模块1
export const myFunction1 = () => console.log('myFunction1');

// 模块2
export const myFunction2 = () => console.log('myFunction2');

// 引入模块1和模块2中的 myFunction1 和 myFunction2
import { myFunction1, myFunction2 } from './myModule.js';

模块引入

在实际开发中，我们经常需要在当前模块中引入其他第三方库或框架，以便于使用第三方库中的功能。此时，我们可以通过 import 语句来引入第三方库中的代码，示例如下：

// 引入 lodash 库
import _ from 'lodash';

支持 import 的浏览器

在实际的开发中，我们需要根据项目的需求来选择不同版本的 JavaScript，并且需要了解当前浏览器环境是否支持 import 语句。下表列出了目前支持 import 语法的主流浏览器及版本。

总结

本文为大家详解了 ES2021 (ES12) 中 import 语句的相关知识点及其用法，以及在具体场景中的应用。通过阅读本文，相信大家对 import 语句的操作及适用范围有了更为深入的了解和认识，有助于我们在实际开发中更加熟练地运用此语法，提高我们的工作效率和代码质量，进而推动前端技术不断发展和进步。

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