ES6 中export 命令

ES6 中引入了模块功能，模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

一.export 命令

1.export命令作用

• ① ES6中引入了模块的概念，一个模块就是一个独立的JS文件。该文件内部的所有变量，外部无法获取。
• ② 我们希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。

2.export的定义方式

1. export的定义方式，一种是输出整个表达式；另一种是使用大括号，大括号中写入导出变量。

2. export输出变量，函数，类。

3. export输出时可以使用as指定别名。

   //1.======输出变量======
   // profile.js
   export var firstName = 'Michael';
   export var lastName = 'Jackson';
   export var year = 1958;
   
   // profile.js
   var firstName = 'Michael';
   var lastName = 'Jackson';
   var year = 1958;
   
   export { firstName, lastName, year };
   //2.======输出函数======
   export function multiply(x, y) {
     return x * y;
   };
   
   function v1() { ... }
   function v2() { ... }
   
   export {
     v1 as streamV1,
     v2 as streamV2,
     v2 as streamLatestVersion
   };
   

3.export的输出注意点

1. 如下方式都是定义错误的

   // 报错
   export 1;
   
   // 报错
   var m = 1;
   export m;
   
   // 报错
   function f() {}
   export f;
   

2. export命令可以出现在模块的任何位置，只要处于模块顶层就可以。如果处于块级作用域内，就会报错

   function foo() {
     export default 'bar' // SyntaxError
   }
   foo()
   

二.export default 命令

1.export default命令作用

1. export default输出默认的js模块，在import引入的时候可以以任意名称导入。

2. export default命令用于指定模块的默认输出。一个模块只能有一个默认输出，输出一个函数，或者一个对象。

   //导出函数
   // export-default.js
   export default function () {
     console.log('foo');
   }
   
   //import 加载export-default.js默认模块的时候，不需要使用大括号
   // import-default.js
   import customName from './export-default';
   customName(); // 'foo'
   

   //导出对象
   // export-default.js
   export default{
     say:'hi  I am Joey'
   }
   
   <script  type="module" >
    import m from './model.js'
     alert(m.say)
   </script>
   

3. export default命令用在非匿名函数前，也是可以的。引入的时候和匿名函数相同。

   //如下代码，foo函数的函数名foo，在模块外部是无效的。加载的时候，视同匿名函数加载。
   // export-default.js
   export default function foo() {
     console.log('foo');
   }
   
   // 或者写成
   function foo() {
     console.log('foo');
   }
   
   export default foo;
   

2.export default和正常输出比较

1. 第一组输入不需要大括号，第二组需要大括号

   // 第一组
   export default function crc32() { // 输出
     // ...
   }
   
   import crc32 from 'crc32'; // 输入
   
   // 第二组
   export function crc32() { // 输出
     // ...
   };
   
   import {crc32} from 'crc32'; // 输入
   

3.export default实质

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

   扫描二维码关注公众号，回复： 8784565 查看本文章

   // 正确
   export var a = 1;
   
   // 正确  将变量a的值赋给变量default
   var a = 1;
   export default a;
   
   // 错误
   export default var a = 1;
   
   // 正确
   export default 42;
   
   // 报错
   export 42;
   

4.同时导出，导入默认模块和正常输出

1. 在一条import语句中，同时输入默认接口和其他接口

   export default function (obj) {
     // ···
   }
   
   export function each(obj, iterator, context) {
     // ···
   }
   
   export { each as forEach };
   
   //导入默认
   import _ from 'lodash';
   //导入默认和正常函数
   import _, { each, forEach } from 'lodash';