4.import命令

使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块

上面代码的import命令，用于加载profile.js文件，并从中输入变量。import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（profile.js）对外接口的名称相同

如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名

注意import命令具有提升效果，会提升到整个模块的头部首先执行

上面的代码不会报错，因为import的执行早于foo的调用。这种行为的本质是，import命令是编译阶段执行的，在代码运行之前

由于import是静态执行，所以不能使用表达式和变量，这些只有在运行时才能得到结果的语法结构

上面三种写法都会报错，因为它们用到了表达式、变量和if结构。在静态分析阶段，这些语法因为都没有执行，所以是没法得到值的

如果多次重复执行同一句import语句，那么只会执行一次，而不会执行多次

5.模块的整体加载

除了指定加载某个输出值，还可以使用整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上面

现在，加载这个模块

上面写法是逐一指定要加载的方法，整体加载的写法如下

6.export default 命令

从前面的例子可以看出，使用import命令的时候，用户需要知道所要加载的变量名或函数名，才能按照export对应输出的名称去加载，否则无法加载。但是，用户肯定希望快速上手，未必愿意阅读文档，去了解模块有哪些属性和方法

为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出

其他模块加载该模块时，import命令可以为该匿名函数指定任意名字

上面代码的import命令，可以用任意名称指向export-default.js输出的方法，这时就不需要知道原模块输出的函数名。需要注意的是，这时import命令后面，不使用大括号

export default命令用在非匿名函数前，也是可以的

注意：上面代码的两组写法，第一组是使用export default时，对应的import语句不需要使用大括号；第二组是不使用export default时，对应的import语句需要使用大括号

export default命令用于指定模块的默认输出。显然，一个模块只能有一个默认输出，因此export default命令只能使用一次。所以，import命令后面才不用加大括号，因为只可能对应一个方法

本质上，export default就是输出一个叫做default的变量或方法，系统允许你为它取任意名字或者给他赋予任意的值

这里实际的意思就将add变量赋值给了default变量作为输出

正是因为export default命令其实只是输出一个叫做default的变量，所以它后面不能跟变量声明语句

上面代码中，export default a的含义是将变量a的值赋给变量default。所以，最后一种写法会报错

因为export default本质是将该命令后面的值，赋给default变量以后再输出，所以直接将一个值写在export default之后也是可以的

如果想在一条import语句中，同时输入默认方法和其他变量，可以写成下面这样

ES6之Module的语法(2)相关推荐

ES6之Module的语法(1)
1.概述 CommonJS 和 AMD 模块,都只能在运行时确定这些东西.比如,CommonJS 模块就是对象,输入时必须查找对象属性上面代码的实质是整体加载fs模块(即加载fs的所有方法),生成一 ...
ES6之Module的语法(3)
7.export 与 import 的复合写法如果在一个模块之中,先输入后输出同一个模块,import语句可以与export语句写在一起模块的接口改名和整体输出,也可以采用这种写法默认接口的写法 ...
【ES6】阮一峰ES6学习之Module的语法
Module的语法 1. 前言 2. 严格模式 3. export命令 4. import命令 5. 模块的整体加载 6. export default 命令 7. export 与 import 的 ...
【ES6】Module模块详解
[ES6]Module模块详解一.Module的由来二.严格模式三.export命令四.import命令查看更多ES6教学文章: 参考文献引言:由于两个JS文件之间相互使用必须通过一个ht ...
ES6 模块化的基本语法——默认导出与默认导入、按需导出与按需导入、直接导入并执行模块代码
ES6 模块化的基本语法注意:每个模块中,只允许使用唯一的一次 export default,否则会报错! 按需导出与按需导入注意:每个模块中,可以使用多次按需导出直接导入并执行模块代码有 ...
[ECMAScript] 谈谈你对es6的module体系的理解
[ECMAScript] 谈谈你对es6的module体系的理解 es5的模块规范出来之前,前端也实现了比如AMD CMD模块规范,对前端模块进行管理. es6的模块规范在语言层面实现了模块功能为什 ...
[vue-cli]vue-cli生成的项目可以使用es6、es7的语法吗？为什么？
[vue-cli]vue-cli生成的项目可以使用es6.es7的语法吗?为什么? vue-cli 配置了babel,可以将es6,es7....etc在webpack打包的时候转换成es5的代码,所 ...
为什么说ES6的class是语法糖?
0. 前言我们带着问题去阅读本文: 为什么说ES6的class是语法糖? class是原型的语法糖吗? 那又是如何使用原型来实现class这一语法糖的呢? 1. 基于Prototype的OOP 先来 ...
ES6入门：方括号语法
ES6入门:方括号语法 1.方括号语法的用法 const prop = 'age'; const person = {}; //给person添加属性age //person.prop = 18; 错 ...

ES6之Module的语法(2)