前段时间一直在用Vue和ElementUI作为UI框架开发一个小型的业务系统，其中要用到很多ES6的语法。于是花了些时间在网上科普了下前端ES6的一些知识，这篇主要是作为学习ES6的一些总结，并不是很详细的介绍，只列出了一些重点作为参考和回顾，感兴趣的可以扫一遍。
let
用于声明变量。let menu = {name: 'system'}
1. let声明的变量只存在于块级作用域。
2. 不存在变量提升
3. 暂时性死区:只要一进入当前作用域，所要使用的变量就已经存在，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。
4. 不允许重复声明
const
用于声明常量。export const EXPAND_MENU = 'EXPAND'
1. const 声明常量，一旦声明，不可改变。
2. const 在声明时必须初始化。
3. const 所在的代码块为块级作用域，所以其变量只在块级作用域内使用或其中的闭包使用。
4. const 声明的变量不存在变量提升。
5. const 不可重复声明常量。
6. const 声明只保证变量名指向的地址不变，并不保证该地址的数据不变。
7. 如果希望将对象本身冻结，可以使用Object.freeze()方法。
export, import
导出所有的最外层函数、类以及var、let或const声明的变量。
1. ES6模块只支持静态导入和导出，只可以在模块的最外层作用域使用import和export，
2. 不可在条件语句中使用，也不能在函数作用域中使用import。
3. 所有导出的标识符一定要在源代码中明确地导出它们的名称，不能通过编写代码遍历一个数组然后用数据驱动的方式导出一堆名称。
名字导出（name export）
可以在模块中导出多个声明，导出和导入的名称要一致。
export function add (x, y) {
return x + y;
}
import { add } from 'lib';
//或这直接导出一个列表：
function sqrt()
function square()
function add()
export {sqrt, square, add}
默认导出（default export）
一个模块只能有一个默认导出，默认导出，导入和导出的名称可以不一致。export default function() {...};
重命名export和import
//导入重命名
import {flip as flipOmelet} from "eggs.js";
import {flip as flipHouse} from "real-estate.js";
//导出重命名
function v1() { ... }
function v2() { ... }
export {
v1 as streamV1,
v2 as streamV2,
v2 as streamLatestVersion
};
//名称as为default来默认导出
const D = 123;
export { D as default };
...运算符
扩展运算符...将一个数组转为用逗号分隔的参数序列。console.log(1, ...[2, 3, 4], 5)
// 1. 替代数组的 apply 方法
// ES5 的写法
function f(x, y, z) {
}
var args = [0, 1, 2];
f.apply(null, args);
// ES6 的写法
function f(x, y, z) {
}
var args = [0, 1, 2];
f(...args);
// 2. 取数组最大元素
Math.max(...[14, 3, 77])
// 3. 创建日期
new Date(...[2015, 1, 1])
// 4. 合并数组
[...arr1, ...arr2, ...arr3]
// 5. 解构赋值
const [first, ...rest] = [1, 2, 3, 4, 5];
// 6. 字符串转数组
[...'hello']
// 7. Map 和 Set 结构
let map = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
]);
let arr = [...map.keys()]; // [1, 2, 3]
对没有iterator接口的对象，使用扩展运算符，将会报错。
箭头函数
//一个表达式
x => x * x
//多个表达式
x => {
if (x > 0) {
return x * x;
}
else {
return - x * x;
}
}
// 两个参数:
(x, y) => x * x + y * y
// 无参数:
() => 3.14
// 可变参数:
(x, y, ...rest) => {
var i, sum = x + y;
for (i=0; i<rest.length; i++) {
sum += rest[i];
}
return sum;
}
// 返回对象
x => ({ foo: x })
注：
1. 箭头函数内的this对象不可变，在函数内是常量。this是定义时所在的对象，不是使用时所在的对象。
2. 箭头函数不能使用 new 关键字来实例化对象。
3. 箭头函数没有arguments对象，不能通过arguments对象访问传入参数。
4. 不可以使用yield命令，箭头函数不能用作Generator函数。
Promise
Promise是异步编程的一种解决方案，它有三种状态，分别是pending-进行中、resolved-已完成、rejected-已失败。
// 方法1
let promise = new Promise ( (resolve, reject) => {
if (success) {
resolve(a)
}else {
reject(err)
}
})
// 方法2
function promise() {
return new Promise (function (resolve, reject) {
if (success) {
resolve(a)
} else {
reject(err)
}
})
}
1. resolve:将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；
reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。
promise.then(
() => { console.log('this is success callback') },
() => { console.log('this is fail callback') }
)
promise.then(
() => { console.log('this is success callback') }
).catch(
(err) => { console.log(err) }
).then(
...
).catch(
...
)
1. .then()方法是Promise原型链上的方法，包含两个参数方法，分别是已成功resolved的回调和已失败rejected的回调。
2. .catch()的作用是捕获Promise的错误，与then()的rejected回调作用几乎一致，不建议使用then()的rejected回调，而统一使用catch()来处理错误。
3. then() 和 catch() 都会返回一个新的Promise对象，可以链式调用。
Promise.resolve()/Promise.reject() 用来包装一个现有对象，将其转变为Promise对象。
var promise = Promise.all([p1, p2, p3])
promise.then(
...
).catch(
...
)
var promise = Promise.race([p1, p2, p3])
promise.then(
...
).catch(
...
)
1. 当p1、p2、p3的状态都变成resolved时，promise才会变成resolved，并调用then()的已完成回调，但只要有一个变成rejected状态，promise就会立刻变成rejected状态。
2. 参数中的p1、p2、p3只要有一个改变状态，promise就会立刻变成相同的状态并执行对于的回调。
Promise.done() / Promise. finally() 在回调链的尾端捕捉前面没有被 .catch() 捕捉到的错误。
基本到这里，我们常用到的大部分语法就都有了，现在再来看项目中的JS，已经不是什么大问题。当然想要深入系统的学习还是需要小伙伴们自己去查找资料的。