ES6

对象字面量简写

https://zhuanlan.zhihu.com/p/56215043

模板字符串

模板字符串就是一种字符串的新的表现形式,模板字符串的出现，极大的改变传统字符串的拼接方法，减少代码出现错误的几率。提高开发效率

• 基本用法

let s1 = ` hello `
let s2 = ' hello '

• 字符串和变量拼接

let s3 =" a " + s1 + " b " + s2;
let s4 = ` a ${s1} b ${s2}`;  

• 字符串换行

var box =`<div>
            <p>
              <span>123</span>
            </p>
            <p>${a1}</p>
         </div>`;

解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构

• 对象结构赋值

var obj ={ name:"abc",age:18 };
    //用解构赋值的方式获取name、age

    let { name } = obj; //创建了一个变量name，值=obj.name
    console.log(name);  //"abc"

    let { age } =obj;
    console.log(age);  //18

• 函数参数结构赋值

function f1(obj){
        console.log(obj.age);
        console.log(obj.height)
    }
    //等价于
    function f1({ age,height }){
        console.log(age);
        console.log(height)
    }

    f1({age:5,height:180})

rest参数

ES6 引入 rest 参数（形式为...变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。es6箭头函数内部不能使用arguments，为了弥补这个问题，rest参数应孕而生

function fn(){
        //arguments是函数内部的一个局部变量，
        //arguments.length表示函数的实参的个数
        console.log(arguments.length);

        for(var i =0 ; i<arguments.length; i++){
            console.log(arguments[i]);
        }

    }
    fn(1,3,5)       //3
    // fn("a","b","c","d","e") //5

    //...args就是rest参数
    //-->产生了一个变量，这个变量是一个数组，数组里面包含了这个函数调用时传递的所有实参
    function q(...args){
        //验证args是不是数组？
        console.log(args instanceof Array);//true
        console.log(Object.prototype.toString.call(args));//"[object Array]"
        console.log(Array.isArray(args));   //true es5中的新方法

        console.log(args);
    }
    q(1,3,5);
    q(2,3,4,5,6,7,8);

箭头函数

ES6 允许使用“箭头”（=>）定义函数。
箭头函数和普通匿名函数有哪些不同？
1.函数体内的this对象，就是定义所在的对象，而不是使用所在的对象
2.不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误
3.不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
4.不可以使用yield命令，因此箭头函数不能用作 Generator 函数。
5.generator函数现在经常用async替代

• 用于替换匿名函数

基本用法

//匿名函数
div.onclick=function(){
    console.log("你好")
}
//箭头函数
div.onclick=()=>{
    console.log("你好")
}

• 有一个参数的箭头函数

var fn=(a)=>{
        console.log("abc");
    }
    //等价于：
    var fn=a=>{
        console.log("abc");
    }

• 有2个及更多参数的箭头函数

 var f=(a,b,c)=>{
        console.log("abc")
    }

var p={
        age:18,
        //es6中对象方法的箭头函数表示形式
        run:()=>{
            setTimeout(()=>{
                //this:window
                console.log(this);//this是window
            },100)
        },
        travel:function(){
            //this:p
            setTimeout(()=>{
                console.log(this);//this是p
            },100)
        },
        //推荐使用的方式☆☆☆：es6中对象方法的简写形式
        say(){
            console.log("say方法中的this：",this);
            setTimeout(()=>{
                console.log("say内部的延迟函数：",this);//this是p
            },100)
        },
    }

    p.run();

    p.travel();

    p.say();

let

用来声明变量。它的用法类似于var,但是所声明的变量，只在let命令所在的代码块内有效。

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

const

用来声明一个只读的常量，一旦声明，常量的值就不能改变。，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。

const a = 10；
a = 20；
console.log(a)  //TypeError: Assignment to constant variable.
上面代码表明改变常量的值会报错。

Promise

Promise是异步编程一种解决方案(回调地狱)

在没有promise都是这样写的回调，一层一层的写，
$.get("/getUser",function(res){
        $.get("/getUserDetail",function(){
            $.get("/getCart",function(){
                $.get("/getBooks",function(){
                    //...
                })
            })
        })
    })

• promise的基本用法

var promise=new Promise((resolve,reject)=>{
       //b 把需要执行的异步操作放在这里
       $.get("/getUser",res=>{
           //获取数据的异步操作已经执行完毕了，等待下一步的执行，通过执行resolve函数，告诉外界你可以执行下一步操作了
           //c、
           resolve(res)
           //而执行的下一步操作，其实就是写在then的回调函数中的
       })
   })
   //a、
   promise.then(res=>{
       //d、执行后续的操作
       console.log(res);
   })

• promise实现多层回调

new Promise((resolve,reject)=>{
        $.get("/getUser",res=>{
            resolve(res)
        })
    }).then(res=>{
        //用户基本信息
        return new Promise(resolve=>{
            $.get("/getUserDetail",res=>{
                resolve(res)
            })
        })
    }).then(res=>{
        //用户详情
        return new Promise(resolve=>{
            $.get("/getCart",res=>{
                resolve(res)
            })
        })
    }).then(res=>{
        //购物车信息
    })

• promise实现错误处理

new Promise((resolve,reject)=>{
        $.ajax({
            url:"/getUser",
            type:"GET",
            success:res=>{
                resolve(res);
            },
            error:res=>{
                reject(res)
            }
        })
    }).then(resSuccess=>{
        //成功的返回值
    },resError=>{
        //失败的返回值
    })