import和export的用法

import


概念 : import语句用于导入由另一个模块导出的绑定。无论是否声明了strict mode,导入的模块都运行在严格模式下。import语句不能在嵌入式脚本中使用。

语法 :

`import defaultExport from "module-name";//导入使用默认导出名称的导出
 import * as name from "module-name";//导入带有别名的所有导出
 import { export } from "module-name";//导入单个导出
 import { export as alias } from "module-name";//导入单个带有别名的导出
 import { export1 , export2 } from "module-name";//导入多个导出
 import { export1 , export2 as alias2 , [...] } from "module-name";//导出时重命名多个
 import defaultExport, { export [ , [...] ] } from "module-name";//
 import defaultExport, * as name from "module-name";
 import "module-name";`

defaultExport : 将引用模块默认导出的名称。

如:

导出:export default Index

导入: import defaultExport from './Index'

那么:defaultExport代表 Index(默认导出的名称)

module-name : 要导入的模块。这通常是包含模块的.js的相对或绝对路径名,不包括.js扩展名。某些打包工具可以允许或要求使用该扩展;检查你的运行环境。只允许单引号和双引号的字符。

name : 引用时将用作一种命名的空间的模块对象的名称

export,exportN :要导入的导出名称。

export

概念 : 用于在创建JavaScript模块时,从模块中导出函数、对象或原始值,一边其他程序可以通过import语句使用它们。

语法:

   `export { name1, name2, …, nameN };
    export { variable1 as name1, variable2 as name2, …, nameN };
    export let name1, name2, …, nameN; // also var
    export let name1 = …, name2 = …, …, nameN; // also var, const
    export function FunctionName() {...}
    export class ClassName {...}

    export default expression;
    export default function (…) { … } // also class, function*
    export default function name1(…) { … } // also class, function*
    export { name1 as default, … };

    export * from …;
    export { name1, name2, …, nameN } from …;
    export { import1 as name1, import2 as name2, …, nameN } from …;`

有两种不同的导出方式,每种方式对应于上述的一种语法: 1.命名导出

`export default function() {}`

如:

导出:

//module "index.js"

`function myFunction(x) {
  return x*2;
}
const a = 4;
export { myFunction,a };`

导入: import { myFunction, a } from 'index.js'; console.log(myFunction(3)); // 6 console.log(a); // 4

2.默认导出(函数/类)

`export default function() {}`

`export default class {}`

如(函数): 导出:

 `// module "index.js"
export default function myFunction(x) {
  return x*x;
}`

导入:

    `// module "index.js"
    import myFunction from 'index.js';
    console.log(myFunction(3)); // 9`

你可能感兴趣的:(JavaScript)