ECMAScript 6学习记录（一）

简介

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
};

语法上总结一下，使用模块只有两种方法：

1. 在声明字段/方法时就export声明模块
2. 在最后统一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 default 命令 官方资料

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()函数目标在动态加载。

import() 官方资料

未完待续
版权声明：文章内容总结于网络，如侵犯到原作者权益，请与我联系删除或授权事宜