记得之前的一次面试中,有个面试官问了我关于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. Ajax——jQuery实现

    紧接上文 一.load()方法 load() 方法师jQuery中最为简单和常用的Ajax方法,能载入远程的HTML代码并插入到DOM中.它的机构是:load(url[,data][,callback ...

  2. 20169219 SEED SQL注入实验

    实验环境SEED Ubuntu镜像 环境配置 实验需要三样东西,Firefox.apache.phpBB2(镜像中已有): 1.运行Apache Server:只需运行命令sudo service a ...

  3. ORCHARD学习教程-安装

    安装说明:测试对象为正式版1.8 安装方法: 使用Microsoft Web Platform Installer 利用Microsoft WebMatrix 来安装 Working with Orc ...

  4. windows phone开发必备工具翔

    1.图标设计 http://www.flaticon.com/ http://www.iconfont.cn/ 2.界面设计: 2.1.behance.com    2.2.dribbble.com  ...

  5. ubuntu 14.04 x64下安装libreoffice

    LibreOffice是ubuntu 上的办公软件很多人都知道微软公司的的Word.Excel.PowerPoint和Outlook,但是很少有人知道LibreOffice. LibreOffice靠 ...

  6. docker 镜像创建

    dockerfile FROM microsoft/aspnetcore:2.0 ARG source WORKDIR /app EXPOSE COPY ${source:-/} . ENTRYPOI ...

  7. Android学习笔记 Gallery图库组件的使用

    activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&qu ...

  8. 如何优雅地使用win10的Linux子系统

    转自: http://blog.csdn.net/u010053050/article/details/52388663 http://www.rehack.cn/techshare/devtools ...

  9. tomcat访问日志关闭

    在tomcat(实例)路径下[conf/server.xml]中修改,以下节点(注释掉该节点): tomcat catalina.out日志关闭 在tomcat(主目录)路径下[bin/catalin ...

  10. 移动端头部适配 meta基础知识

    meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-wid ...