ES6全称 ECMAScript 6.0，也是一个统称，是 Javascript 2015.06 及以后版本的统称

1. let关键字

自从知道 let 关键字后，我就很少用 var 关键字来声明变量了，它有以下几个特点要注意一下：

1.1 使用 let 关键声明的变量有块级作用域

块级作用域就是 { } 中的作用域，像if中和for中的 { } 就是一个块级作用域，如果在for中使用 var 来声明计数器 i 的话，那这个 i 就会成为全局变量，在for循环结束后 i 的值还会存在，如下所示：

 for (var i = 0; i < 10; i++) {
 }
console.log(i); // 10

而使用 let 来声明计数器就不会有这个问题

  for (let i = 0; i < 10; i++) {
  }
console.log(i); // i is not defined

1.2 使用 let 声明的变量没有变量提升，必须先声明才能使用

变量提升就是把所有的变量声明全部提升到最前面

console.log(a)
var a = 10 // undefined

// 相当于如下代码
var a
console.log(a);
a = 10

console.log(a)
let a = 10 // 直接报 Cannot access 'a' before initialization

1.3 使用 let 关键字声明的变量具有暂时性死区特性

// 定义一个全局变量
 var a = 10
// 一个块级作用域
{
console.log(a);
let a = 20
}

上面代码执行后会报 Cannot access 'a' before initialization（初始化之前无法访问）的错误，它无法访问到外部的 a ，因为在块级作用域中声明了一个变量 a ，这个 a 就和这个块级作用域绑定了。

2. const关键字

const 关键字是 js 用来声明常量的，常量懂的都懂，就是无法被更改的值，这么说好像也不对，也可以说是无法被更改的变量，反正大概就是这个意思吧。

用 const 关键字声明的常量也有块级作用域和不存在变量提升

2.1 使用 const 定义的常量必须赋初始值

 const a

这段代码直接就会报错

 const a = 10

这样才是正确的

2.2 使用const定义常量后的值不可更改

当然，这得分情况，如果是基本数据类型，那值确实无法修改，但如果是复杂数据类型的话，数据结构内部的值是可以更改的，但是数据结构本身的值是不可更改的。

// 利用字面量的方式定义了一个数组
const arr = ['bbb', 'yuanshen', 'epic seven']
arr[0] = 'lol'
arr[1] = 'cf'

因为数组属于复杂数据结构，所以它内部的值是可以更改的，上面操作正确

const arr = ['bbb', 'yuanshen', 'epic seven']
arr = ['a', 'b']

直接对数组赋值会报Assignment to constant variable.（赋值给常数变量）的错误。

3. 数组解构

数组解构允许我们按照一一对应的关系从数组中提取值

let arr = ['bbb', 'yuanshen', 'epic seven']
let [a, b, c, d, e] = arr
console.log(a); // bbb
console.log(b); // yuanshen
console.log(c); // epic seven
console.log(d); // undefine
console.log(e); // undefine

4. 对象解构

对象解构允许我们使用变量的名字匹配对象的属性，匹配成功将对象的值赋值给变量

let obj = {
name: 'bbb',
time: 687
}

let {name,time} = obj

使用指定的变量名字来接收解构的变量

let obj = {
name: 'bbb',
time: 687
}
// 此处的 n 和 t 才是用户声明并接收对象值的变量名
let{name:n,time:t} = obj

5. 箭头函数

这是我最喜欢的一个了，它的出现大大的简化了函数定义的语法，太妙了

5.1 简单使用

const fn = () => {
console.log('bbb');
}
fn()

5.2 省略函数体大括号和return

const fn = (v, i) => console.log(v, i)
fn('bbb', 1)

在箭头函数中，如果函数体中只有一句代码，并且代码的执行结果就是函数的返回值，函数体大括号可以省略

5.3 省略形参外侧的小括号

const fn = v => console.log(v)
fn('bbb')

在箭头函数中，如果形参只有一个，形参外侧的小括号也是可以省略的

5.4 箭头函数中this指向的问题

const obj = {
name: 'bbb'
}

function fn() {
console.log(this);
return () => {
console.log(this);
 }
}

var fun = fn.call(obj)
fun()

// 结果是 {name: 'bbb'} {name: 'bbb'}

箭头函数不绑定this，箭头函数没有自己的 this 关键字，如果在箭头函数中使用 this，那么 this 将指向箭头函数定义位置中的 this

上面代码中因为使用了call 改变了fn 函数的 this 指向，现在 fn 函数中的 this 指向的是 obj 对象，fun中保存的是返回的箭头函数，因为箭头函数中的 this 指向的是箭头函数定义位置中的 this，也就是指向 fn，而 fn 已经被改变了指向，所以箭头函数也跟着改变了指向，最后指向了obj对象

6. 剩余参数

因为箭头函数中是无法使用argument来访问所有实参的，所以只能使用剩余参数来获取箭头函数的实参

const fn = (...args) => {
args.forEach(v => console.log(v))
}

fn(1, 2)
fn(1, 2, 3)

剩余参数和数组解构配合使用来合并数组

const arr = ['yuanshe', 'bbb', 'epic seven']
// s1得到的是'yuanshe',s2得到的仍然是一个数组,是['bbb', 'epic seven']
let [a1, ...a2] = arr
console.log(a1);
console.log(a2);

7. 扩展运算符

扩展运算符 ... 可以把数组类型转换成类似离散型数据，也就是将本来 [1,2,3] 的数据转换成 1,2,3 类型的数据

利用扩展运算符也可以来合并数组，就像上面写的那样，在函数形参中 ... 叫剩余参数，而在别的地方它又叫扩展运算符，可以将伪数组转换成真正的数组，如下：

let lis = document.querySelectorAll('li')
let arr = [...lis]
// 此时 arr 是一个真正的数组了，所以可以使用数组中的push方法来追加数据
arr.push('span')

8. 模板字符串

模板字符串是用 反引号来包括的，其上档符号是“~ ”

8.1 模板字符串中可以引用变量、常量

let a = '变量'
const b = '常量'
const str = `我要引用${a}，我还要引用${b}`

8.2 模板字符串中可以换行

const str = `
        我要换行了，啊哈哈哈哈
        -----------------
        我真的换行了
        `

8.3 模板字符串中可以调用函数

const fn = () => console.log('我是一个被调用的函数');
const str = `啊哈哈哈哈${fn()}`

以上就是我所学的ES6新增的部分功能，还有很多新特性还没学，学了之后再添加进来。

ES6新增功能（部分）