export 命令
一个模块就是一个独立的js文件,该文件内部的所有变量,外部都无法获取。如果你希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量。
import 命令
使用export命令定义了模块的对外接口以后,其他 JS 文件就可以通过import命令加载这个模块。
ES6模块中,有两种导出方式:普通导出和默认导出
区别主要在于语法和使用方式上:
1、默认导出只能导出一个值,而普通导出可以导出多个值。
2、普通导出需要使用花括号 {} 包裹变量名,而默认导出在导入时不需要使用花括号 {} 包裹变量名。
一、普通导出
使用export语法进行普通导出。导出的变量必须与导入时的变量名相同。
export const name = 'zs';
export const age = 18;
使用import语法进行普通导入。导入的变量必须与导入时的变量名相同。
import {name,age} from './export-named.js';
console.log(name,age)
//输出:zs 18
二、默认导出
使用export default语法进行默认导出。导出的变量名可以是任意的,不需要与导出的变量名保持一致。
const name = 'zs';
export default name;
使用import语法进行默认导入。导入时可以使用任意变量名,而不需要与导出的变量名一致。
import myName from './export-default.js';
console.log(myName )
//输出:zs
需要注意的是,在同一个模块中,不能同时使用普通导出和默认导出