首页技术文章正文

-ES6中export 和 import【黑马web前端】

更新时间:2019年07月26日 10时54分46秒 来源:黑马程序员论坛



  在ES6中我们可以通过export导出一个模块,有一下几种方法:
  1.1  export default xx ,默认导出一个模块
[AppleScript] 纯文本查看 复制代码
export default function(a, b) {
  console.log(a + b);
}

在另一个页面导入这个js文件:
[AppleScript] 纯文本查看 复制代码
// import a from "./base.mjs";
// a(1, 2);


这里我们要注意的是,此处我们引入的是export default默认的模块,所以我们这里要给引入的东西起一个名字。

1.2  注意,一个文件只能export default 一次 ,如果多次导出default就会报错
Identifier '*default*' has already been declared

显示default已经被声明的错误。

1.3  export default {} 还可以导出一个对象模块
[AppleScript] 纯文本查看 复制代码
export default {
  name: "jack",
  tell: function() {
    console.log(this.name);
  }
};

在引入代码的地方依旧是起一个别名
[AppleScript] 纯文本查看 复制代码
import a from 'base.mjs'


1.4 如果要导出多个数据,可以使用export xx
比如:
[AppleScript] 纯文本查看 复制代码
export const a = function(){}


注意: 这种可以导出很多个
1.5  上述代码是直接在导出声明,你也可以先声明,再一起导出:
[AppleScript] 纯文本查看 复制代码
// 4. export 可以 导出一些其他数据
const name = "harry";
const age = 19;
// 错误写法 要么直接声明在export中要么用类对象的形式表示
// export name,age
export { name, age };


注意: 不过export name,age的写法是错误的 。要用一个类似对象的格式接收要导出的对象。

1.6 在导入页面:
我们可以同时引入 default暴露的数据和export的数据

[AppleScript] 纯文本查看 复制代码
// 可以和default导入的模块共存
// 使用es6的解构方式把导出的数据传递出来
// import { name, age } from "./base";
// 也可以简写到一起
// import a, { name, age } from "./base";


1.7 可以起一个别名:
[AppleScript] 纯文本查看 复制代码
// 也可以导出部分属性 用别名表示 及时和a重名也没关系
// import { name as a, age } from "./base";
// console.log(a);


但是不可以重名。

1.8 如果想导入全部数据:
[AppleScript] 纯文本查看 复制代码
// 一次性大丰收 获取全部数据
// 但是由于我们导出的模块不是当前页面全部都要用到,所以不建议使用这种全部导入的方式,选择按需导入 es6的解构方式会好很多
import * as a from "./base";
console.log(a);



最后: 在node中,es6中的module语法处于试验阶段,所以在node中运行的代码要把后缀名js 改成 mjs

点击查看更多精彩前端资源

点击有惊喜


推荐了解热门学科

java培训 Python人工智能 Web前端培训 PHP培训
区块链培训 影视制作培训 C++培训 产品经理培训
UI设计培训 新媒体培训 产品经理培训 Linux运维
大数据培训 智能机器人软件开发




传智播客是一家致力于培养高素质软件开发人才的科技公司“黑马程序员”是传智播客旗下高端IT教育品牌。自“黑马程序员”成立以来,教学研发团队一直致力于打造精品课程资源,不断在产、学、研3个层面创新自己的执教理念与教学方针,并集中“黑马程序员”的优势力量,针对性地出版了计算机系列教材50多册,制作教学视频数+套,发表各类技术文章数百篇。

传智播客从未停止思考

传智播客副总裁毕向东在2019IT培训行业变革大会提到,“传智播客意识到企业的用人需求已经从初级程序员升级到中高级程序员,具备多领域、多行业项目经验的人才成为企业用人的首选。”

中级程序员和初级程序员的差别在哪里?
项目经验。毕向东表示,“中级程序员和初级程序员最大的差别在于中级程序员比初级程序员多了三四年的工作经验,从而多出了更多的项目经验。“为此,传智播客研究院引进曾在知名IT企业如阿里、IBM就职的高级技术专家,集中研发面向中高级程序员的课程,用以满足企业用人需求,尽快补全IT行业所需的人才缺口。

何为中高级程序员课程?

传智播客进行了定义。中高级程序员课程,是在当前主流的初级程序员课程的基础上,增加多领域多行业的含金量项目,从技术的广度和深度上进行拓展“我们希望用5年的时间,打造上百个高含金量的项目,覆盖主流的32个行业。”传智播客课程研发总监于洋表示。




黑马程序员热门视频教程【点击播放】

Python入门教程完整版(懂中文就能学会) 零起点打开Java世界的大门
C++| 匠心之作 从0到1入门学编程 PHP|零基础入门开发者编程核心技术
Web前端入门教程_Web前端html+css+JavaScript 软件测试入门到精通


在线咨询 我要报名
和我们在线交谈!