记得之前的一次面试中,有个面试官问了我关于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. c语言实践 1/1-1/2+1/3-1/4+...

    其实这个题目和上面那个是一样的 /* 1/1-1/2+1/3-1/4+...1/n; */ int n = 1; double sum = 0; double frac = 0; int i = 1; ...

  2. 14.UNION 和 UNION ALL 操作符

    union all   union UNION 操作符用于合并两个或多个 SELECT 语句的结果集.请注意,UNION 内部的 SELECT 语句必须拥有相同数量的列.列也必须拥有相似的数据类型.同 ...

  3. npm 升级

    当我们运行某个项目是 会提示 > my-first-vue-project@1.0.0 dev C:\Users\ASUS\my-project > node build/dev-serv ...

  4. [GO]随机生成四们数字

    package main import ( "math/rand" "time" "fmt" ) func InitData(p *int) ...

  5. brk/sbrk和mmap行为分析程序

    #include <stdio.h> #include <stdlib.h> #include <unistd.h> // #include <malloc. ...

  6. 编写高质量代码改善C#程序的157个建议——建议58:用抛出异常代替返回错误代码

    建议58:用抛出异常代替返回错误代码 CLR异常机制的优点: 正常控制流会被立即中止,无效值或状态不会在系统中继续传播. 提供了统一的处理错误的方法. 提供了在构造函数.操作符重载及属性中报告异常的遍 ...

  7. 激光样式——第九届蓝桥杯C语言B组(国赛)第二题

    原创 标题:激光样式x星球的盛大节日为增加气氛,用30台机光器一字排开,向太空中打出光柱.安装调试的时候才发现,不知什么原因,相邻的两台激光器不能同时打开!国王很想知道,在目前这种bug存在的情况下, ...

  8. DELPHI XE5 UP2 运行IOS 遇到 Wrapper init failed: (null)问题的解决办法

    一.问题表现: 在MAC OSX(10.9.2)上安装了比较新的XCODE5.1 和COMMAND LINE TOOLS 在DELPHI XE5 UP2上放了一个按钮,输出到MAC OSX上,出现: ...

  9. Sharepoint2013搜索学习笔记之自定义结果源(七)

    搜索中心新建好之后在搜索结果页上会默认有所有内容,人员,对话,视频这四个结果分类,每个分类会返回指定范围的搜索结果,这里我再添加了部门日志结果分类,搜索这个分类只会返回部门日志内容类型的搜索结果,要实 ...

  10. JavaScript 如何工作:渲染引擎和性能优化技巧

    翻译自:How JavaScript works: the rendering engine and tips to optimize its performance 这是探索 JavaScript ...