关于es6 import export的学习随笔
记得之前的一次面试中,有个面试官问了我关于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的学习随笔的更多相关文章
- JavaScript ES6 数组新方法 学习随笔
JavaScript ES6 数组新方法 学习随笔 新建数组 var arr = [1, 2, 2, 3, 4] includes 方法 includes 查找数组有无该参数 有返回true var ...
- es6 import export 与 node 中的module.exports exports
1.export a.export 变量 export var name = 'jack';export var age = 18;//等同于 var name = 'jack';var age = ...
- ES6 import export
import import './module1.js'; (无对象导入) import d from './module1.js'; (导入默认对象) import {Employee, getEm ...
- [转] ES6 import/export:模块导入导出方式
export导出语法 // default exports export default 42; export default {}; export default []; export defaul ...
- es6 import export 引入导出变量方式
var testdata='sdfkshdf'; //export testdata;//err export {testdata as ms}; export var firstName = 'Mi ...
- JavaScript ES6中export、import与export default的用法和区别
前言 相信很多人都使用过export.export default.import,然而它们到底有什么区别呢? 在看他们之间的区别之前,我们先来看看它们的用法. ES6 import和export的用法 ...
- ES6/ES2015核心内容 import export
ES6/ES2015核心内容:https://www.cnblogs.com/doit8791/p/5184238.html Javascript ES6学习 import export https ...
- 探讨ES6的import export default 和CommonJS的require module.exports
今天来扒一扒在node和ES6中的module,主要是为了区分node和ES6中的不同意义,避免概念上的混淆,同时也分享一下,自己在这个坑里获得的心得. 在ES6之前 模块的概念是在ES6发布之前就出 ...
- es6中的import,export浏览器已经支持
直接上代码, 成功测验了es6的新特性 import , export语法. 服务器返回 js文件时,要加上content-type: applicaiton/javascript 这个字段. ind ...
随机推荐
- solr开发之基本操作
package zr.com.util; import java.io.IOException; import java.util.List; import java.util.Map; import ...
- Android NDK打印log到logcat的方法
头文件 : <android/log.h> 函数: __android_log_print(ANDROID_LOG_XXX,LOG_TAG,content) 第一个参数是Log级别,比如: ...
- xamarin.droid自己的示例工程有些都装不上模拟器,是因为它的architectures选项没设对
也许是版本更迭导致的,有些老工程的architectures不对,如果x86不勾的话,是不能在genymotion的模拟器上跑的.
- NOIP2018 解题笔记
D1T1 铺设道路 在场上并没有想到积木大赛这道原题. 差分之后可以把在$[l, r]$这段区间$ - 1$变成在$l$处$ - 1$,在$r + 1$处$ + 1$,然后最终目标是使$\forall ...
- su 和sudo su 的区别
su "user" 执行该命令,需要输入password,它是"user"中定义的用户的password,即,要变换成的用户的password.(如果已经用ro ...
- Customizing Site-Wide Behavior for ASP.NET Web Pages (Razor) Sites
Customizing Site-Wide Behavior for ASP.NET Web Pages (Razor) Sites By Tom FitzMacken|February 17, 20 ...
- C# How To Read .xlsx Excel File With 3 Lines Of Code
Download Excel.zip - 9.7 KB Download ExcelDLL.zip - 3.7 KB Introduction We produce professional busi ...
- LibreOJ 6004 圆桌聚餐 (最大流)
题解:天啊,这道最大流真是水的一批……只需要每张桌子向每个单位建一条容量为1的边,源点向桌子建边,容量为桌子能坐的人数;单位向汇点建边,容量为单位人数即可,然后根据单位与桌子的连边值是否为一来了解每个 ...
- Bitmap类、BitmapFactory及BitmapFactory类中的常用方法
1.Bitmap 1.1非静态方法 public void recycle()——回收位图占用的内存空间,把位图标记为Dead public final boolean isRecycled() —— ...
- 组合(Composite)模式 *
组合(Composite)模式:将对象组合树形结构以表示‘部分-整体’的层次结构. 组合模式使得用户对单个对象和组合对象具有一致性 /* * 抽象构件(Component)角色:这是一个抽象角色,它给 ...