记得之前的一次面试中,有个面试官问了我关于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. Linux内核的特征

    Linux内核的特征 Linux是个人计算机和工作站上的Unix类操作系统.但是,它绝不是简化的Unix.相反,Linux是强有力和具有创新意义的Unix类操作系统.它不仅继承了Unix的特征,而且在 ...

  2. HTML中meta标签的作用与使用

    META标签用来描述一个HTML网页文档的属性 META标签可分为两大部分:HTTP-EQUIV和NAME变量. HTTP实例 HTML代码实例中有一项内容是 <meta http-equiv= ...

  3. 第一章Python简介

    1.Python shell(Python命令解释器) 如下所示 2.Python的交互模式 如下 3.代码编辑器窗口 在上面的那些指令称为源代码. 4.在python中,缩进是有语法意义的. 在某行 ...

  4. Model View Controller (MVC) Overview

    By Rakesh Chavda on Jul 01, 2015 What is MVC?Model View Controller is a type of user interface archi ...

  5. 编写高质量代码改善C#程序的157个建议——建议60:重新引发异常时使用Inner Exception

    建议60:重新引发异常时使用Inner Exception 当捕获了某个异常,将其包装或重新引发异常的时候,如果其中包含了Inner Exception,则有助于程序员分析内部信息,方便代码调试. 以 ...

  6. wpf使用truetype字体ttf

    查了半天都是语焉不详,这篇算是稍微详细点的:http://www.cnblogs.com/junhengml/p/6878933.html 要先查找到字体的字库名称,才能使用: <Window. ...

  7. 如何在DOS下以管理员身份执行命令?

    原创 普通User的DOS窗口: 以管理员身份运行的DOS窗口: 转换(Windows10系统下): 13:11:55 2018-10-18

  8. Android 应用检查更新并下载

    1.在Android应用当中都有应用检查更新的要求,往往都是在打开应用的时候去更新下载. 实现的方法是:服务器端提供接口,接口中可以包含在最新APK下载的URL,最新APK的VersionCode,等 ...

  9. angular 守卫路由

    import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; im ...

  10. C# LINQ(2)

    前一章的代码LINQ都是以select结尾. 之前也说过可以group结尾. 那么怎么使用呢? 还是一样的条件,查询小于5大于0的元素 代码: ,,,,,,,,, }; var list = from ...