ECMAScript 6（以下简称ES6）是 JavaScript 语言的下一代标准。因为当前版本的 ES6 是在2015年发布的，所以又称 ECMAScript 2015。
虽然目前并不是所有浏览器都能兼容 ES6 全部特性，但越来越多的程序员在实际项目当中已经开始使用 ES6 了。
Node.js 是运行在服务端的 JavaScript，它对 ES6 的支持度更高。后续整理均在 Node.js 环境中运行 ES6 标准的 js 文件。
1. let、const
let允许创建块级作用域，相当于局部变量。ES6 推荐在函数中使用 let 定义变量，而非 var：
var a = 2;
{
let a = 3;
console.log(a); // 3
}
console.log(a); // 2
const 声明一个只读的常量，一旦声明，常量的值就不能改变。
const a = 10;
a = 20; //运行报错：TypeError: Assignment to constant variable.
console.log(a)
const 声明的变量不能改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。
const a; //运行报错：SyntaxError: Missing initializer in const declaration
console.log(a)
注意 ：如果 const 的是一个对象 ，对象包含的值是可以被修改的 ，抽象一点说 ，就是对象所指向的地址不能改变 ，里面的成员是可以改变的。
- let 和 const 声明只在最靠近的一个块中（花括号内）有效
- 当使用常量 const 声明时，请使用大写变量，如：CAPITAL_CASING
- const 在声明时必须被赋值
2. 模板字符串
用一对反引号（模板字符串）标识 ，它可以当普通字符串使用（‘普通字符串’），也可以用来定义多行字符串 ，在模板字符串中可以嵌入变量 、js表达式或函数等。
变量、js表达式或函数需要写在 ${} 中
//基本用法
let s1 = ` hello `
let s2 = ' hello '
//字符串和变量拼接
let s3 =' a ' + s1 + ' b ' + s2;
let s4 = ` a ${s1} b ${s2} `;
console.log(s1)
console.log(s2)
console.log(s3)
console.log(s4)
运用到组件：
let a = 20
const component = {
template:`<div> A custom component! --- ${a} </div>`
}
console.log(component)
组件可以被引用。
3. 箭头函数
ES6 中，箭头函数就是函数的一种简写形式，使用括号包裹参数，跟随一个 =>，紧接着是函数体
let arr = ['apple', 'banana', 'orange'];
let breakfast = arr.map(vo => vo + 's');
console.log(breakfast); //[ 'apples', 'bananas', 'oranges' ]
箭头函数不仅仅是让代码变得简洁，还有个特性：箭头函数内部的 this 总是指向对象自身，永远和箭头函数外部的 this 保持一致 。
<body>
<button id="btn">按钮</button>
<button id="btn2">按钮2</button>
</body>
<script>
document.getElementById('btn').onclick = function () {
console.log(this) //指向 btn 按钮对象
let that = this
setTimeout(function () {
console.log(this) //指向window对象
that.style.backgroundColor = 'red' //这里不能用this，因为此时this指向windows，不会指向btn，也不会变色
}, 1000)
}
document.getElementById('btn2').onclick = function () {
setTimeout(() => {
console.log(this) //指向 btn2 按钮对象
this.style.backgroundColor = 'red'
}, 1000)
}
</script>
普通函数内部调用 this 实际指向window对象
箭头函数内部的 this 总是指向对象自身，本例中指向 “btn2 按钮对象” 。
4. 解构赋值
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。
数组：
let [name, age, sex] = ['lili', 20, 'male']
console.log(name) //lili
console.log(age) //20
console.log(sex) //male
对象：
变量必须和对象的属性同名
let user = {
name: 'pxshen',
eat(){
console.log("eat");
}
}
let {name} = user;
console.log(name) //pxshen
let {eat} = user;
eat(); //eat
5. 扩展运算符（…）
扩展运算符 … 用于取出参数对象所有可遍历属性然后拷贝到当前对象
数组：
- 将字符串转成数组
- 合并数组
// 1、字符串转数组
let str = "abcd"
const arr = [...str]
console.log(arr) //[ 'a', 'b', 'c', 'd' ]
// 2、合并数组
const arr1 = [1,2,3]
const arr2 = [7,8,9]
const arr3 = [...arr1,...arr2]
console.log(arr3) //[ 1, 2, 3, 7, 8, 9 ]
对象：
//1、拷贝对象（深拷贝）
let p1 = { name : 'lili', age : 20 }
let obj = { ...p1 }
console.log(obj) //{ name: 'lili', age: 20 }
//2、合并对象
let age1 = { age: 24 }
let name1 = { name: "qiyue" }
//如果 obj 中原本有 name,age 属性会被覆盖
obj = { ...age1, ...name1 }
console.log(obj) //{ age: 24, name: 'qiyue' }
//3、合并对象数组
let o3 = [{ name : 'lili', age : 20 }]
let o4 = [{ name : 'jack', age : 23, sex : 'male' }]
let o5 = [...o3, ...o4]
console.log(o5) //[ { name: 'lili', age: 20 }, { name: 'jack', age: 23, sex: 'male' } ]
被赋值的对象如果有相同属性值，属性值会被覆盖。上例中 obj 对象属性值被覆盖。
let o1 = { name : 'lili', age : 20 }
let o2 = { name : 'jack', age : 23, sex : 'male' }
let obj2 = {...o1, ...o2}
console.log(obj2) //{ name: 'jack', age: 23, sex: 'male' }
obj2 = {...o2, ...o1}
console.log(obj2) //{ name: 'lili', age: 20, sex: 'male' }
赋值的对象如果有相同属性，前面对象的属性值会被后面覆盖。
函数：
不定参数：不定参数用了表示不确定的参数个数，形如…变量名，具名参数只能放在参数列表的最后，并且有且只有一个不定参数。
function fun(p1, ...params) {
console.log(params)
}
fun(1, 2) // [ 2 ]
fun(1, 2, 3, 4) // [ 2, 3, 4 ]
6. map和reduce方法
map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。
let arr = ["1", "3", "4", "23"]
arr = arr.map(item => item * 2)
console.log(arr) //[2, 6, 8, 46]
reduce()：为数组中的每一个元素依次执行回调函数，不包括数组中被删除或未被赋值的元素。
let arr1 = [2, 40, -10, 6]
let result = arr1.reduce((a, b) => {
return a + b
}, 10)
console.log(result)//48
Es6还简化操作的一些数组方法，比如：forEach、filter等
7. 模块化
模块化：模块化就是把代码进行拆分，方便重复利用。类似Java中的导包。模块的功能主要有两个命令构成：export、import
export：用于规定模块的对外接口，export不仅可以导出对象，一切js变量都可以导出。比如：基本类型变量、函数、数组、对象
import：用于导入其他模块提供的功能
a.js:
let user = {
name: 'pxshen',
eat(){
console.log("eat");
}
}
//导出 只能有一个默认 default ，在引入的地方可以随意命名
export default user;
export let a = 'xxx';
b.js：
import user from "./b.js"
import {a} from "./b.js"
console.log(name);
console.log(a);
8. promise 异步执行
先说一个异步任务示例：
setTimeout(function(){
console.log('我在2s后执行');
},2000)
setTimeout(function(){
console.log('我在1s后执行');
},1000)
//我在1s后执行
//我在2s后执行
程序将会异步执行两个定时任务。但如果我想第一个任务先执行，第二个任务等待第一个任务的执行结果后，再执行呢？ Promise
ES6 对 Promise 有了原生的支持，一个 Promise 是一个等待被异步执行的对象，当它执行完成后，会返回两个状态：
resolve：成功回调函数reject：失败回调函数。
new Promise( (resolve, reject) => {
//做一些异步操作
setTimeout(function(){
var sheng = "安徽省"
console.log(sheng);
//执行成功，resolve返回结果
resolve(sheng);
}, 2000);
})
.then( res => {
return new Promise( (resolve, reject) => {
setTimeout(function(){
var shi = "合肥市"
console.log(res + shi);
//执行成功，resolve返回结果
resolve(res + shi);
}, 1000);
})
})
.then( res => {
return new Promise( (resolve, reject) => {
setTimeout(function(){
var xian = "肥东县"
//执行成功，resolve返回结果
console.log(res + xian);
resolve(res + xian);
}, 2000);
})
})
.catch( err => {
console.log(err);
});
9. async和await
await后面接一个会 return newpromise的函数并执行它await只能放在async函数里，作用Promise对象async：定义异步函数，自动把函数转为Promise
function fun1() {
return new Promise( (resolve,reject) => {
setTimeout(function(){
var sheng = "安徽省"
resolve(sheng);
},2000)
})
}
async function fun2() {
let f1 = await fun1();
console.log(f1)
}
fun2()
//安徽省
上述代码，async内部的 await fun1() 先执行，等待 2s 后把执行结果赋值给左边的 f1 ，也就是说 fun2() 函数需要等待 2s 才执行，所以 fun2() 是异步的，因此前面必须写async。
async和await 改进版：
function fun1() {
return new Promise( (resolve,reject) => {
setTimeout(function(){
var sheng = "安徽省"
console.log(sheng);
resolve(sheng);
}, 2000);
})
}
async function fun2() {
let ret = await fun1();
return new Promise( (resolve, reject) => {
setTimeout(function(){
var shi = "合肥市"
console.log(ret + shi);
resolve(ret + shi);
}, 1000);
})
}
async function fun3() {
let ret = await fun2();
return new Promise( (resolve, reject) => {
setTimeout(function(){
var xian = "肥东县"
console.log(ret + xian);
resolve(ret + xian);
}, 2000);
})
}
fun3()
async 函数返回一个 Promise 对象，可以使用 then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。
参考：async和await
1576
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
