Web前端基础教程:import,export深入理解

在shell中执行程序时，shell会提供一组环境变量。export可新增，修改或删除环境变量，供后续执行的程序使用。export的效力仅及于该次登录操作。

export

最正常:

　　varfirstName='Michael';

　　varlastName='Jackson';

　　varyear=1958;

　　export{firstName,lastName,year};

输出函数或类:

　　exportfunctionmultiply(x,y){

　　returnx*y;

　　};

重命名:

　　functionv1(){...}

　　functionv2(){...}

　　export{

　　v1asstreamV1,

　　v2asstreamV2,

　　v2asstreamLatestVersion

　　};

动态改变输出的值:

　　exportvarfoo='bar';

　　setTimeout(()=>foo='baz',500);

　　//上面代码输出变量foo，值为bar，500毫秒之后变成baz。

多个输出,import

　　//circle.js

　　exportfunctionarea(radius){

　　returnMath.PI*radius*radius;

　　}

　　exportfunctioncircumference(radius){

　　return2*Math.PI*radius;

　　}

　　import*ascirclefrom'./circle';

　　console.log('圆面积：'+circle.area(4));

　　console.log('圆周长：'+circle.circumference(14));

　　export和exportdefault

理解:

1.export的时候,单个变量输出,可以import变量({area}或者*ascircle(circle为对象))

2.exportdefault的时候,相当于导出的整个对象,所以不用括号,可以对象.属性(直接定义对象名circle(对象))

　　//第一组

　　exportdefaultfunctioncrc32(){//输出

　　//...

　　}

　　importcrc32from'crc32';//输入

　　//第二组

　　exportfunctioncrc32(){//输出

　　//...

　　};

　　import{crc32}from'crc32';//输入

第一组是使用exportdefault时，对应的import语句不需要使用大括号；

第二组是不使用exportdefault时，对应的import语句需要使用大括号。

exportdefault命令用于指定模块的默认输出。显然，一个模块只能有一个默认输出，因此exportdefault命令只能使用一次。所以，import命令后面才不用加大括号，因为只可能唯一对应exportdefault命令。

　　//正确

　　exportvara=1;

　　//正确

　　vara=1;

　　exportdefaulta;

上面代码中，exportdefaulta的含义是将变量a的值赋给变量default。

import

导入组件中的部分对象

　　import{stat,exists,readFile}from'fs';

导入整个对象

　　importfsfrom'fs';

使用的时候

　　fs.stat

　　fs.exists

　　fs.readFile

导入对象重命名

　　import{lastNameassurname}from'./profile.js';

　　import命令输入的变量都是只读的

　　import命令具有提升效果，会提升到整个模块的头部，首先执行

　　foo();

　　import{foo}from'my_module';

　　//不会报错

仅仅执行lodash模块，但是不输入任何值.代码加载了两次lodash，但是只会执行一次。

　　import'lodash';

　　import'lodash';

　　Linuxexport命令

功能说明:设置或显示环境变量。

语法:export[-fnp][变量名称]=[变量设置值]

补充说明:在shell中执行程序时，shell会提供一组环境变量。export可新增，修改或删除环境变量，供后续执行的程序使用。export的效力仅及于该次登录操作。

以上就是酷仔今日整理的“Web前端基础教程：import,export深入理解”一文，希望对正在学习Web前端的同学提供参考。酷仔会持续更新Web前端教程及Python基础教程相关的内容，为有需求的同学提供学习资料。