记得之前的一次面试中,有个面试官问了我关于es6导入和导出的一些知识点,可惜当时对这方面没在意,只知道每次机械的import和export,也不知道为啥要这样用,现在静下心来,好好的把这块看了下,顺便把自己的学习内容记录下来,方便将来的时候翻阅。

简介:

es6模块主要是由export和import组成。一个模块就是一个独立的文件,该文件内容的变量外部无法获取。export用于规定模块的对外接口,import用于输入其他模块的功能。  它有以下的几个特点:

  1,es6模块化是静态化的,编译时就能确定模块的依赖关系、输入和输出的变量。

      import {path, getName} from './common'

    上面代码就是从common模块加载了path和getName两个方法,而不加载其他的方法,这种加载就叫做编译时加载或者静态加载。效率比较高。

  2,es6的模块自动采用严格模式。

  3,注意this! 在模块中,顶层的this指向undefined,所以不要在顶层中使用this

  4,export和import不能处于块级作用域中,必须处于模块的顶层。

export:(输出)

  export的写法分别有以下几种:

    

1,  export let a = 1

2,  let a = 1;  export {a}

3,  let a = 1;  export {a as  n}

  同样的,导出function和class都要遵守上面的写法

  export导出的是值的引用,所以可以获取模块内部的实时值。

import:(输入)

  

1,   import {getName, getAge} from './common'

2,   import {getName as gName, getAge as gAge} from './common'

3,  import * as get from './common'     ---->   get.getName    get.getAge   

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

export default:(默认输出)

  因为使用import需要知道所要加载的变量名或者函数名,有没有方法可以在不了解模块有哪些属性和方法的情况下使用模块呢?

  答案是有的,可以使用export default命令为模块指定默认的输出。

  本质上,export default就是输出一个叫做default的变量或者方法,所以后面不能跟变量声明语句。

1,   export default function getName () {}

2,   function getName(){}      export default getName 

  每个模块只有一个默认的输出,所以可以默认输出一个匿名函数。 在import使用的时候,可以不使用大括号。

关于es6 import export的学习随笔的更多相关文章

  1. JavaScript ES6 数组新方法 学习随笔

    JavaScript ES6 数组新方法 学习随笔 新建数组 var arr = [1, 2, 2, 3, 4] includes 方法 includes 查找数组有无该参数 有返回true var ...

  2. es6 import export 与 node 中的module.exports exports

    1.export a.export 变量 export var name = 'jack';export var age = 18;//等同于 var name = 'jack';var age = ...

  3. ES6 import export

    import import './module1.js'; (无对象导入) import d from './module1.js'; (导入默认对象) import {Employee, getEm ...

  4. [转] ES6 import/export:模块导入导出方式

    export导出语法 // default exports export default 42; export default {}; export default []; export defaul ...

  5. es6 import export 引入导出变量方式

    var testdata='sdfkshdf'; //export testdata;//err export {testdata as ms}; export var firstName = 'Mi ...

  6. JavaScript ES6中export、import与export default的用法和区别

    前言 相信很多人都使用过export.export default.import,然而它们到底有什么区别呢? 在看他们之间的区别之前,我们先来看看它们的用法. ES6 import和export的用法 ...

  7. ES6/ES2015核心内容 import export

    ES6/ES2015核心内容:https://www.cnblogs.com/doit8791/p/5184238.html Javascript ES6学习 import export  https ...

  8. 探讨ES6的import export default 和CommonJS的require module.exports

    今天来扒一扒在node和ES6中的module,主要是为了区分node和ES6中的不同意义,避免概念上的混淆,同时也分享一下,自己在这个坑里获得的心得. 在ES6之前 模块的概念是在ES6发布之前就出 ...

  9. es6中的import,export浏览器已经支持

    直接上代码, 成功测验了es6的新特性 import , export语法. 服务器返回 js文件时,要加上content-type: applicaiton/javascript 这个字段. ind ...

随机推荐

  1. MySQL - pt-query-digest的下载与使用

    对于脚本文件,是可以执行的,我们不用安装.所以,但是这个脚本文件没有执行的权限,所以,我们首先赋予这个脚本文件的可执行的权限. 再次查看文件的信息后. 已经有了执行的权限了. 运行脚本的时候,可要注意 ...

  2. Docker ubuntu镜像更换apt-get源

    在Dockerfile中添加 RUN sed -i s@/archive.ubuntu.com/@/mirrors.aliyun.com/@g /etc/apt/sources.list RUN ap ...

  3. 在Windows 8上安装SQL Server2012

    SQL Server 2012 的安装方法跟2008差不多,基本上都是点击下一步,不过在安装的时候可能会进度条一直停留在“正在启动操作系统功能”NetFx3””处不动,出现这个问题的原因是在Windo ...

  4. Part4_lesson4---Bootloader架构设计

    1.第一阶段程序设计 第二阶段程序设计

  5. Part5核心初始化_lesson4---关闭中断

    1.关闭cpsr寄存器里面的I(中断)和F(快速中断)位: 2.设置中断屏蔽寄存器. 针对2440: 这是中断处理过程,当有中断源(没有子中断源)来的时候,它会把这个中断记录在SRCPND里面:它还要 ...

  6. Python基础入门-os模块

    今天我们来介绍一下os模块中常用的一些方法,当然python中的os模块中提供的使用方法有很多,但是这里面小编会列举出来一些和实际工作中应用的相关的方法,而且会有一些实际的例子方便大家对os模块理解. ...

  7. fabric Clone

    记录下: var newObj = fabric.util.object.clone(obj); decDoc.dropCanvas.add(newObj., top: }));

  8. windows phone 换肤(2)

    //这里有篇参考文章 http://www.cnblogs.com/tianhonghui/p/3373276.html#commentform 以下思路是来自徐老师,昨晚看了一个晚上球赛,睡了不到6 ...

  9. 用firebug 进行表单自定义提交

    在一些限制网页功能的场合,例如,防止复制内容,防止重复提交,限制操作的时间段/用户等,网页上一些按钮是灰化的(禁用的),这通常是通过设置元素的 disable属性来实现的.但在后台并没有做相应的功能限 ...

  10. .Net中的并行编程-1.路线图(转)

    大神,大神,膜拜膜拜,原文地址:http://www.cnblogs.com/zw369/p/3834559.html 目录 .Net中的并行编程-1.路线图 分析.Net里线程同步机制 .Net中的 ...