export default function 和 export function 的区别

ES6中的一个模块即使一个包含JS代码的文件,在这个模块中所有的变量都是对其他模块不可见的,除非我们导出它。ES6的模块系统大致分为导出(export)和导入(import)两个模块。

1、名字导出(name export)

名字导出可以在模块中导出多个声明。


//------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function add (x, y) {
    return x + y;
}
 
//------ main.js ------
import { square, add } from 'lib';
console.log(square(10)); //100
console.log(add(2,4));  //6

以上对于每一个要导出的变量都加了export,这样导入的变量名必须和导出的名称一致
我们也可以直接导出一个列表,例如上面的lib.js可以改写成:


//------ lib.js ------
const sqrt = Math.sqrt;
function square(x) {
    return x * x;
}
function add (x, y) {
    return x + y;
}
export {sqrt, square, add}

export列表可以在模块文件最外层作用域的每一处声明,不一定非要把它放在模块文件的末尾。

也可以直接导入整个模块,此时的main.js模块将变成这样。


//------ main.js ------
import * as lib from 'lib';
console.log(lib.square(10)); //100
console.log(lib.add(2,4));  //6

2、默认导出(default export)

一个模块只能有一个默认导出,对于默认导出,导入的名称可以和导出的名称不一致,这对于导出匿名函数或类非常有用。

//------ myFunc.js ------
`没有名字`
export default function() {...};
 
//------ main.js ------
`随便命名`
`注意这里默认导出不需要用{}。`
import myFunc from 'myFunc';
myFunc();

当然也可以使用混合的导出。

//------ lib.js ------
export default function() {...};
export function each() {...};
 
//------ main.js ------
import _,{ each } from 'lib';

3、重命名export和import

为了解决导出命名冲突的问题,ES6为你提供了重命名的方法解决这个问题,当你在导入名称时可以这样做:
导入重命名

// 这两个模块都会导出以`flip`命名的东西。
// 要同时导入两者,我们至少要将其中一个的名称改掉。
import {flip as flipOmelet} from "eggs.js";
import {flip as flipHouse} from "real-estate.js";

导出重命名
同样,当你在导出的时候也可以重命名。你可能会想用两个不同的名称导出相同的值,这样的情况偶尔也会遇到:

function v1() { ... }
function v2() { ... }
 
export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

对于默认导出,只是导出了一个特殊的名字叫 default,你也可以就直接用他的名字,把它当做命名导出来用,下面两种写法是等价的:

import { default as foo } from 'lib';
import foo from 'lib';

也可以把名称as为default来默认导出:

//------ module1.js ------
export default 123;
 
//------ module2.js ------
const D = 123;
export { D as default };


作者:lltree
链接:https://www.jianshu.com/p/877e109c23c9
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
上一篇:Hadoop搭建的顺序(/usr/local/src)


下一篇:macbook m1安装jdk,maven,python