ES6模块化导入导出 import 和export

62 阅读1分钟

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 

需要注意的是,在同一个模块中,不能同时使用普通导出和默认导出