ES新特性，let和const，模板字符串，ES5和ES6函数的不同及其案例，箭头函数和this的指向及其案例，解构赋值

ES新特性

ES全称EcmaScript，是脚本语言的规范，而平时经常编写的JavaScript是EcmaScript的一种实现，所以ES新特性其实指的就是JavaScript的新特性。

let

1.let声明变量，没有变量提升
2.let是一个块作用域
3.不能重复声明

const

1.const声明常量，一旦被声明，无法修改
2.没有变量提升
3.const是一个块作用域
4.不能重复声明
5.const声明对象，不能修改，但是可以修改对象里的属性
作用1：for循环经典应用：

const arr = [];
        for (let i =0;i < 10; i++){
            arr[i] = function () {
                return i;
            }
        }
        console.log(arr[5]());//5

作用2：不会污染全局变量
建议：在默认情况下用const，而只有在你知道变量值需要被修改的情况下建议使用let

模板字符串

使用tab健上面的反引号``，插入变量时使用${变量名}
应用：

 const oBox = document.querySelector('.box');
    let id =1,
        name = 'hh';
    let htmlStr= `<ul>
        <li>
            <p id="${id}">${name}</p>
        </li>
    </ul>`;
    oBox.innerHTML =htmlStr;

函数

1、带参数默认值的函数

ES5：

function add(a,b) {
        a =10||a;
        b =10||b;
        return a+b;
    }
    console.log(add());

ES6：

function add(a=10,b=10) {
        return a+b;
    }
    console.log(add());

2、默认的表达式也可以是函数

function add(a,b=getval(5)) {
        return a+b;
    }
    function getval(val){
        return val+5;
    }
    console.log(add(10));

3、剩余参数：

ES5：

function pick(obj) {
        let result =Object.create(null);
        for (let i=1;i<arguments.length;i++){
            result[arguments[i]]=obj[arguments[i]]
        }
        return result;
    }
    let book ={
        title:"hhh",
        auther:"hhh",
        year:1111
    }
    let bookDate = pick(book,"title","auther","year");
    console.log(bookDate);

ES6：有三个点…和一个紧跟的具名参数来制定 …keys，…keys解决了arguments不确定的问题。

function pick(obj,...keys) {
        let result =Object.create(null);
        for (let i=0;i<keys.length;i++){
            result[keys[i]]=obj[keys[i]]
        }
        return result;
    }
    let book ={
        title:"hhh",
        auther:"hhh",
        year:1111
    }
    let bookDate = pick(book,"title","auther","year");
    console.log(bookDate);

4、扩展运算符…

剩余运算符：把多个独立的合并到一个数组中
扩展运算符：将一个数组分隔，并且将各个项作为分离的参数传递给函数。
ES5：
处理数组中的最大值，使用apply

    const arr = [14,54,66,33,78,96];
    console.log(Math.max.apply(null,arr));

ES6：使用扩展运算符更方便

    const arr = [14,54,66,33,78,96];
    console.log(Math.max(...arr));

5、es6的箭头函数使用()=>定义，取代function(){} 等价于 ()=>{}

ES5:

let add = function (a,b){
        return a+b;
    }
    console.log(add(10,20));

ES6:

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

如果只有一个参数：

let add = a =>{
        return a+5;
    }
    console.log(add(10));//15

等价于

    let add = val => val+5;
    console.log(add(10));

如果只返回参数

    let add = val => val;
    console.log(add(10));

如果是两个参数并且返回两参数相加

    let add = (val1,val2) => val1+val2;
    console.log(add(10,20));

如果没有参数()括号要保留

    let fn = ()=>"hhh"+123;
    console.log(fn());

如果返回的是对象，对象要用()包裹起来

let fn = id=>({
        id:id,
        age:1
    });
    console.log(fn(1));

闭包：

let fn = (()=>{
        return ()=>{
            console.log("闭包");
        }
    })();
    fn();

箭头函数this指向

es5中this指向：取决于调用该函数的上下文对象
es6中箭头函数：this是静态的，this始终是指向函数声明时所在作用域下的this的值，即使是使用call改变，this指向也不会发生改变。
案例1：点击div2s后改变颜色
ES5：

let dv = document.getElementById("dv");
    dv.addEventListener("click",function () {
        //保存当前this到_this
        let _this = this;
        setTimeout(function () {
            _this.style.backgroundColor="yellow";
        },2000)
    })

ES6：

let dv = document.getElementById("dv");
    dv.addEventListener("click",function () {
        setTimeout( ()=> {
            this.style.backgroundColor="yellow";
        },2000)
    })

案例2：从数组中返回偶数元素
ES5：

const arr = [12,33,56,21,345];
    const result = arr.filter(function (item) {
        if(item % 2 ==0){
            return true;
        }else false;
    })
    console.log(result);

ES6：

    const arr = [12,33,56,21,345];
    const result = arr.filter(item=>item % 2 ==0);
    console.log(result);

总结：箭头函数适合与this无关的回调，定时器，数组的方法回调，不适合与this有关的的回调，事件回调，对象的方法。
注意事项：
1、不能作为构造函数实例化对象。
2、不能使用arguments变量。

解构赋值

是对赋值运算符的一种扩展，通常它是针对数组和对象来进行操作，优点：代码书写上简洁易读。

对于对象解构

ES5：

let node = {
        type:"iden",
        name:"foo"
    }
    let type = node.type;
    let name = node.name;

ES6：
完全解构

    let node = {
        type:"iden",
        name:"foo"
    }
    let{type,name} = node;

不完全解构，可以忽略某些属性

 let node = {
        type:"iden",
        name:"foo"
    }
    let{type} = node;

也可以用剩余运算符,以对象的方式传给它

    let node = {
        type:"iden",
        name:"foo"
    }
    let{type,...aaa} = node;
    console.log(aaa);

也可以用默认值赋值

    let node = {
        type:"iden",
        name:"foo"
    }
    let {type,name=10} = {type:20}
    console.log(type,name);

对数组解构

完全解构

    let arr = [1,2,3];
    let [a,b,c] = arr;
    console.log(a,b,c);

不完全解构

    let arr = [1,2,3];
    let [a,b,c] = arr;
    console.log(a,b);

可嵌套

    let arr = [1,[2],3];
    let [a,[b],c] = arr;
    console.log(a,b);