简介
ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
学习顺序为我在项目中遇到的问题先后顺序。
先统计 部分 新内容
- let：声明属性关键字，块级作用域，不存在变量提升，并且有暂时性死区。
- const：声明一个只读的常量。指向地址固定不变，对象内容仍可改变 。
- 模板字符串：es6字符串拓展。模板字符串（template string）是增强版的字符串，用反引号（`）标识。可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。还可以用做“标签模版”，代替方法后的小括号使用。
- includes()：返回布尔值，表示是否找到了参数字符串。
- startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
- endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。
- repeat()：返回一个新字符串，表示将原字符串重复n次。
'hello'.repeat(2) // "hellohello" - padStart()：字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全。
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12" - padEnd()：字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。padEnd()用于尾部补全。
'x'.padEnd(4, 'ab') // 'xaba' - trimStart()：消除字符串头部的空格。
- trimEnd()：消除尾部的空格。
Module 的语法
ES6的 模块 是什么
栗子：A.js里面有一个calc方法，B.js想要引用A.js的calc方法，以往是把他们有序的引入到html中。而模块语法却可以明确的指出A.js里面的calc为模块方法，然后B.js再进行引入便可以调用calc方法。
ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。
模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。
// ES6 模块
import { stat, exists, readFile } from 'fs';
上面代码的实质是从fs模块加载 3 个方法，其他方法不加载。这种加载称为“编译时加载”或者静态加载，即 ES6 可以在编译时就完成模块加载，效率要比 CommonJS 模块的加载方式高。当然，这也导致了没法引用 ES6 模块本身，因为它不是对象。
export 命令
一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。下面是一个 JS 文件，里面使用export命令输出变量。
举栗子就完事：
// 声明时 export
export var firstName = 'Michael';
export function multiply(x, y) {
return x * y;
};
// 声明后 export
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
function v1() { ... }
function v2() { ... }
export {
firstName, lastName,year,v1,
v2 as streamV2,
v2 as streamLatestVersion
};
语法上总结一下，使用模块只有两种方法：
- 在声明字段/方法时就export声明模块
- 在最后统一export声明模块，一定需要大括号但不一定使用as别名
最后export有两点需要注意：
1.export语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。
export var foo = 'bar';
setTimeout(() => foo = 'baz', 500);
//上面代码输出变量foo，值为bar，500 毫秒之后变成baz。
2.export命令可以出现在模块的任何位置，只要处于模块顶层就可以。如果处于块级作用域内，就会报错。
export 官方资料
import 命令
使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。
// main.js
import { firstName, lastName, year } from './profile.js';
function setName(element) {
element.textContent = firstName + ' ' + lastName;
}
基本语法就是import大括号指定导入的模块成员，然后from对应的模块文件。
总结一下 import 语法：
1.import导入成员也可以使用as取别名。
2.from的路径可以是相对路径，也可以是绝对路径，可以不写.js后缀，更可以是单独一个模块名称但需要使用配置告诉javascript引擎盖模块名指定哪个文件。
3.多条import导入同一个模块的同一个成员时只会执行一次。
4.import命令导入的属性是readonly，而导入的对象是可以修改值的，并且是修改原来的对象真实的值（官方不建议这样做）。
5.import命令是静态的，所以无论在文件什么位置都是首先执行的，也因此不能在inport内使用javascript表达式和变量。
import 官方资料
模块的整体加载
上面介绍的import命令是指定加载某个模块成员，还可以直接加载整个模块文件。
// circle.js
export function area(radius) {
return Math.PI * radius * radius;
}
export function circumference(radius) {
return 2 * Math.PI * radius;
}
// 整体加载
// main.js
import * as circle from './circle';
console.log('圆面积：' + circle.area(4));
console.log('圆周长：' + circle.circumference(14));
export default 命令
从前面的例子可以看出，使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。
为了方便和快速上手，有了export default命令。为模块指定默认输出。
// export-default.js
export default function () {
console.log('foo');
}
其他模块加载该模块时，import命令可以为该匿名函数指定任意名字。
// import-default.js
import customName from './export-default';
customName(); // 'foo'
需要注意的是，这时import命令后面，不使用大括号。
1.export default命令可以输出变量、方法或类。
2.export default命令的本质是输出一个default名字的成员，所以default后面不可以跟声明语句，但当别的成员使用别名为default时其实也是匿名指出，default后可以为一个具体的值。
3.default是模块唯一。
如果想在一条import语句中，同时输入默认方法和其他接口，可以写成下面这样。
export default function (obj) {}
export function each(obj, iterator, context) {}
export { each as forEach };
import _, { each, forEach } from 'lodash';
export default输出类
// MyClass.js
export default class { ... }
// main.js
import MyClass from 'MyClass';
let o = new MyClass();
export 与 import 的复合写法
当需要引入某模块后再将其指出时，可以混合export和import这样写
// 混合写法
export { foo, bar } from 'my_module';
// 可以简单理解为
import { foo, bar } from 'my_module';
export { foo, bar };
但需要注意的是，写成一行以后，foo和bar实际上并没有被导入当前模块，只是相当于对外转发了这两个接口，导致当前模块不能直接使用foo和bar。
接口的别名和默认指出都可以使用混合写法
export 与 import 的复合写法 官方资料
import()
import命令与import()函数不同，import命令为静态编译阶段运行，import()函数喂运行时运行。
import()函数目标在动态加载。
未完待续
版权声明：文章内容总结于网络，如侵犯到原作者权益，请与我联系删除或授权事宜
网友评论