ES6复习

声明变量

可以使用let、const关键字声明变量，而不推荐使用var声明变量
var声明变量的问题：

1.可以多次重复声明同一个变量名，存在覆盖的风险
2.在全局声明的变量会挂在全局对象上
3.var不能形成块级作用域，例如：if、for范围外依然可以使用var声明的变量
4.var声明的变量具备变量提升（hoisting）特性— 允许使用在前，声明在后

var存在很多问题，let横空出世。
let允许创建块级作用域，let声明的变量只在它所在的代码块内有效

{
  let test = 10;
  var foo = 1;
}

console.log(test) // ReferenceError: miaov is not defined.
console.log(foo) // 1

**

**
总结 let和const：
声明的变量不具备变量提升（hoisting）特性
只在声明所在的块级作用域内有效
不允许重复声明
暂时性死区（TDZ）所声明的变量绑定在定义的区域，使用let命令声明变量之前，该变量都是不可用的

const 在声明时必须被赋值值

解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。通过这种方式可以避免在对象赋值时产生中间变量。

数组的结构赋值

function test(){
    return [1,2,3,4];
}

var [a,b] = test();
console.log(a,b); // 1,2

test函数执行后，返回的是一个数组。取数组前两个值分别存在变量中，根据解构赋值的规则，在左侧声明变量，放在中括号中，会把右边数组中的值一一对应赋值给左边的变量。

对象的解构赋值

function test(){
    return {a:1,b:2,c:3};
}

var {a,b} = test();
console.log(a,b); // 1,2

test函数执行后，返回的是一个对象。分别取出对象中属性为a和b的值，根据解构赋值的规则，在左侧声明变量，放在大括号中，变量名要和属性名保持一致。

函数参数的解构赋值

function test({a,b}){
    console.log(a,b);
}

test({a:1,b:2,c:3})

在形参中定义变量，得到实参对象指定的属性。

默认值

可以给变量设置默认值和另声明一个变量

var {a:otherVar,b,d='默认值'} = {a:1,b:2,c:3};
console.log(d); // 默认值
console.log(otherVar); // 1
console.log(a); // Uncaught ReferenceError: a is not defined

使用=给变量赋一个默认值，如果右边对象中没有与之对应的属性，则按默认值来。
使用:重新声明一个变量，会把匹配到的a的值赋给新的变量otherVar，此时在外面使用时候，不能使用a。

也可以连着一起使用：

var {a,b,d:foo='默认值'} = {a:1,b:2,c:3};
console.log(foo); // '默认值'

模板字符串

模板字符串（template string）是增强版的字符串，用反引号（`）标识。
定义字符串

var str = `<li>
    hello
</li>`

在模板字符串中拼写HTML结构，无需考虑回车换行。
在模板字符串中要渲染某个变量的值，可以写在占位符${}中

var message = 'hello';
var str = `<li>
        ${message}
    </li>`

打印出：

"<li>
    hello
</li>"

${}中可以写入任意的表达式（表达式是可以被求值的代码），例如：

var message = 'hello';
var str = `<li>
        ${message}
        ${1+1}
        ${1 > 2 ? true : false}
        ${
            [1,2,3].map(function(item){
                return item*2
            })
        }
    </li>`

但不能在${}中写入if和for这样的语句。

箭头函数（Arrow Functions）

在ES6中，箭头函数就是函数的一种简写形式,允许使用“箭头”（=>）定义函数。
之前声明函数：

function foo(){
    return 1;
}

改造为箭头函数:

let foo = () => 1;

上面使用“箭头”（=>）定义的函数，左侧的()包裹函数的形参，如果定义的函数没有形参或者多个形参，一定要使用括号：
// 没有参数，要使用()

let test = () => 1;

// 多个参数，要使用()
let foo = (a,b) => a + b;
let bar = (a,b,c) => a + b + c;

如果形参只有一个，可以省略括号：

let foo = a => a;

“箭头”（=>）的右侧是函数体代码，会在函数执行后作为函数的返回值，不需要显示的使用return

let foo = (a,b) => a + b;
console.log(foo(1,2)); // 3

以上的简写方式，使代码变得非常简洁，忍不住再来个例子：

let arr = [1,2,3];  
let newArr = arr.map(item => item * 2);
console.log(newArr); // [2,4,6]

有多行代码，可以写在一对{}中，手动调用return返回值：

let foo = (a,b) => {
    console.log(a)
    console.log(b)
    return a + b; 
}

当要返回的是对象时，又不想手动调用return，记得加上()保证是一个对象整体，而不被误以为是函数体：

var obj = () => ({a:1,b:2})
console.log(obj());  // {a:1,b:2}

箭头函数中this指向

箭头函数内的this，绑定定义时所在的作用域的this，并不是在调用时候决定this的指向。

document.onclick = function (){
    setTimeout(function (){
        console.log(this); // 定时器执行的函数，在非严格模式下this指向window    
    },1000)    
}

如果

要在setTimeout中使用点击时的元素，通常需要存一个变量。

document.onclick = function (){
    var that = this;
    setTimeout(function (){
        console.log(that); // that变量存的就是触发事件的元素
    },1000)    
}

如果使用箭头函数，一切讲变得非常简单：

document.onclick = function (){
    setTimeout( () => {
        console.log(this); 
    },1000)    
}    

箭头

函数是在事件处理函数中定义，事件处理函数this指向的是触发事件的元素，所以这个this，也就是触发事件的元素。
使用箭头函数的特性：

1.函数体内的this值，绑定定义时所在的作用域的this
2.不可以当作构造函数
3.不可以使用arguments对象

对象扩展运算符

扩展运算符（…）用于取出参数对象的所有可遍历属性，拷贝到当前对象中，相当于浅复制。

var arr = {a:1,b:2,c:3};
console.log({...arr});

利用对象的属性是唯一的特性，后面定义的覆盖前面的属性，可以修改一个属性的值：

        
var arr = {a:1,b:2,c:3};
console.log({...arr,a:'修改了'});