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

    1.算法可视化 https://visualgo.net/en

  2. c语言实践 1/1+1/2+1/3+1/4+...+1/n

    给定一个n求这个分式的和. int n = 1; float sum = 0; float frac = 0; int i = 1; scanf_s("%d",&n); w ...

  3. java中的监听事件

    java监听器实现的类 1.ServletContextListener:对servlet上下文的创建和销毁监听 2.ServletContextAttributeListener:监听servlet ...

  4. 使用pycharm运行调试scrapy

    摘要 Scrapy是爬虫抓取框架,Pycharm是强大的python的IDE,为了方便使用需要在PyCharm对scrapy程序进行调试 python PyCharm Scrapy scrapy指令其 ...

  5. EF 常见语句以及sql语句简单 后续继续添加

    1.注意级联删除的时候数据库的外键要设置为开启级联删除,(数据库里sqlserver的外键修改的时候,可以看到级联删除和级联更新) using System;using System.Collecti ...

  6. Part8-不用内存怎么行_6410内存初始化lesson3

    1.6410地址空间 外设区:从0x70000000-0x7FFFFFFF有256MB 主存储区:从0x00000000-0x6FFFFFFF有1972MB 对于主存储区: 静态存储区可以接我们的NO ...

  7. spring是如何由请求地址找到对应的control的

    spring先将所有的action bean放进内存中,然后根据@RequestMapping(value = "/", method = RequestMethod.GET)这种 ...

  8. dssfsfsfs

    一直都好使啊..好使 好使 MainActivity://overover package com.example.sockettest; import java.io.BufferedReader; ...

  9. js任意位数求和

    <script> //任意位数求和 function sum(){ if(arguments.length==1) { console.log(arguments[0]) return; ...

  10. repeater+aspnetpager 组合分页

    页面代码 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="TF_Product. ...