ES6 知识点最全解！

1. 模板字符串

var name = 'xiuyan'   
var career = 'coder' 
var hobby = ['coding', 'writing']
var finalString = `my name is ${name}, I work as a ${career} I love ${hobby[0]} and ${hobby[1]}`

2. var 和let const的区别

1. var和let定义的是变量，可修改；const定义的是常量，不可修改；
2. let和const有块级作用域，var没有；
3. var存在变量提升，ES6规定let和const不存在变量提升。

let a = 5
let a = 7   // Identifier 'a' has already been declared

const e = 9
const e = 9  // Identifier 'e' has already been declared

var a = 4
var a = 5
console.log(a)  // 5

变量提升：
什么时变量提升： 在执行一段上下文的时候，执行之前会先分析一下有没有var定义的变量，如果有，会将定义的变量提前拎出来，声明为undefined。

为什么有变量提升：
JS 也有编译阶段，js是一边编译一边执行，在这个短暂的编译阶段里，js引擎将var定义的变量提前拎出来，声明为undefined，所以存在变量提升。

//变量提升  ES5
console.log(a)   //undefined
var a = 100

/* var a
console.log(a)
a = 200 */

函数声明也有变量提升，但是函数声明提升优先于变量提升。

console.log(a)            // [Function: a]
a()                       // 函数a   
var a = '变量a'
function a () {
  console.log('函数a')
}

优先级：函数声明>函数参数>函数局部变量声明

function b (i) {
  console.log(i)       // // [Function: a]
  var i = '变量i'
  function i () {
    console.log('函数i')
  }
}
b(4)

function b (i) {
  console.log(i)              // 4
  var i = '变量i'               // 变量i
  console.log(i)
  // function i () {
  //   console.log('函数i')
  // }
}
b(4)

暂时性死区：

ES6 中有明确的规定：
如果区块中存在 let 和 const 命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。假如我们尝试在声明前去使用这类变量，就会报错。这一段会报错的危险区域，有一个专属的名字，叫”暂时性死区“。

块级作用域：
ES6中才有的块级作用域：一对花括号内的代码都算一个块级作用域。
当我们用 let 或者const声明变量时，变量会被绑定到它被声明的块作用域上。

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

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

const：

1. const 声明的变量，必须在声明同时被初始化，否则会报错；

const c   //Missing initializer in const declaration 
c = 7

2. const 声明的变量，在赋值过后，值不可以再被更改。否则同样会报错；但这个规则在声明引用类型时有点不同——引用类型的属性值（包括数组的元素）可以被更改，只要你不修改变引用的指向。

const me = {
  name: 'xiuyan'
}
me.name = 'Bear' // 没问题
//这样修改 name 这个属性值，而 me 对象的引用仍然指向原有的内存地址

const me = {
  name: 'xiuyan'
}
me = {
  name: 'xiuyan'
} // 报错  // // Assignment to constant variable.
//这样就相当于重新给 me 赋值了，是在尝试把 me 的引用指向一个全新的对象、指向另一块内存空间。

3.箭头函数

箭头函数和普通函数的区别：

（1）简化匿名函数的写法；
（2）箭头函数是匿名函数，不能作为构造函数，不能使用new；
（3）箭头函数不能绑定arguments，取而代之使用rest参数…解决；

function A(a){
  console.log(arguments);
}
A(1,2,3,4,5,8);
// [1, 2, 3, 4, 5, 8, callee: ƒ, Symbol(Symbol.iterator): ƒ] // arguments是一个类数组对象
let C = (...args) => {
  console.log(args);
}
C(3,82,32,11323);
// [3, 82, 32, 11323] // 利用rest参数...将参数序列转化为数组

（4）箭头函数没有原型属性；
（5）普通函数的this由函数调用时的执行上下文动态决定，而箭头函数的this是继承上级作用域的this；
（6）不能使用call，apply，bind函数去直接修改箭头函数的this指向；
（7）箭头函数不能当作Generator函数，不能使用yeild关键字。

4.解构赋值

数组的解构： 以元素的位置为匹配条件来提取我们想要的数据。

const [a, b, c] = [1, 2, 3]   // a 1 // b 2 // c 3
const [a,,c] = [1,2,3]         // a 1  // c 3

对象的解构： 以属性的名称为匹配条件，来提取我们想要的数据。

const stu = {
  name: 'Bob',
  age: 24
}
const { name, age } = stu // name "Bob" // age 24

5. 扩展运算符（…）

对象扩展运算：
取出参数对象中的所有可遍历属性，拷贝到当前对象之中，类似于Object.assign()方法。

const me = { 
  name: 'xiuyan',
  age: 24
}
const meCopy = { ...me }   // Object.assign({}, me)
meCopy // {name: "xiuyan", age: 24}

数组扩展运算： …指的是Spread/Rest操作符。

function mutiple(x, y) {
  return x*y
}
const arr = [2, 3]
mutiple(...arr) // 6
// 当被用于迭代器中时，它是一个 Spread 操作符：

function A(a){
  console.log(arguments);
}
A(1,2,3,4,5,8);
// [1, 2, 3, 4, 5, 8, callee: ƒ, Symbol(Symbol.iterator): ƒ] // arguments是一个类数组对象
let C = (...args) => {
  console.log(args);
}
C(3,82,32,11323);
// [3, 82, 32, 11323] // 利用rest参数...将参数序列转化为数组
// ...被用在函数形参上时，可以把一个分离的参数序列整合成一个数组,常用于获取函数的多余参数，是一个Rest操作符

剩余参数…args和 arguments对象的区别：
剩余参数args和 arguments对象之间的区别主要有三个：

• 剩余参数只包含那些没有对应形参的实参，而 arguments 对象包含了传给函数的所有实参。
• arguments对象不是一个真正的数组，而剩余参数是真正的 Array实例，也就是说你能够在它上面直接使用所有的数组方法，比如 sort，map，forEach或pop。
• arguments对象还有一些附加的属性 （如callee属性）。

考点：合并两个数组

const arr1 = [1, 2, 3, 4]
const arr2 = [5, 6, 7, 8]
const newArr = [...arr1, ...arr2] // [1, 2, 3, 4, 5, 6, 7, 8]

6.类数组的转换

类数组：必须是一个对象，且有length属性
考点：如何把类数组对象转换为真正的数组？

const arrayLike = {0: 'Bob', 1: 'Lucy', 2: 'Daisy', length: 3 }

• Array原型上的slice方法—— 这个方法如果不传参数的话会返回原数组的一个拷贝，因此可以用此方法转换类数组到数组：

const arr = Array.prototype.slice.call(arrayLike);

• Array.from方法——这是 ES6 新增的一个数组方法，可以把类数组转为数组：

const arr = Array.from(arrayLike);

• 扩展运算符——"…"也可以把类数组对象转换为数组，但前提是这个类数组对象上部署了遍历器接口。在这个例子中，arrayLike 没有部署遍历器接口，所以这条路走不通。但一些对象，比如函数内部的 arguments 变量（它也是类数组对象），就满足条件，可以用这种方法来转换：

function demo() {
  console.log('转换后的 arguments 对象：', [...arguments])
} 
demo(1, 2, 3, 4)
// 	[Arguments] { '0': 1, '1': 2, '2': 3, '3': 4 }
// 转换后的 arguments 对象：[1, 2, 3, 4]