ES6学习笔记

ES6

JS新规范，包括对变量、函数等的扩展。

变量

• var：可以重复定义变量。无块级作用域。
• let：不能重复定义变量，值可以修改。有块级作用域。
• const：不能重复定义，常量不可修改。有块级作用域。

块级作用域：

箭头函数

• 语法：参数 => 函数体
• 当参数只有一个时可以省略()。
• 当返回语句只有一条return语句时可以省略{}。

箭头函数的使用：

函数参数扩展

• 语法：...
• 必须是最后一个：function show(a,b,...arg,c){} 错误

解构赋值

• 左右两边结构一致。
• 右边必须是合法的。
• 声明必赋值，即声明和赋值不能分开。

数组

• map:映射。用法：arr.map(function(item))参数接收一个方法，数组中的每个元素都会调用这个方法，方法的参数即为数组的元素(item)。返回一个数组。

    //数组map方法的使用
    let arr=[12,34,1,23]
    let res=arr.map(function (item) {
        return item*2
    })
    alert(res) //res=[24,68,2,46]
    
    //map使用箭头函数 结果一样
    let res2=arr.map(item=>item*2)
    alert(res2) //res2=[24,68,2,46]

• reduce汇总函数。用法：arr.reduce(function(temp,item,index))参数接收一个函数，其中temp为中间结果，item为数组元素，index为数组下标。返回一个结果（一个数）。

    //reduce 汇总
    let arr=[1,2,3,4,5,6]
    let res=arr.reduce(function(temp,item,index){
        return temp*item  //第一次遍历时temp=第一个元素，计算后的之间结果存到temp中，计算结束返回最终结果。
    })
    alert(res)  //res=720

• filter数组过滤。用法：arr.filter(function(item))其中item为数组元素。返回过滤后的数组。

    //filter 数组过滤
    let arr=[3,4,9,12,31,2]
    let res=arr.filter(function(item){
        if(item%3==0){
            return true
        }else{
            return false;
        }
    })

    alert(res) //res=[3,9,12]
    
    //filter 数组过滤 箭头函数
    let arr=[3,4,9,12,31,2]
    let res=arr.filter(item=>item%3==0)

    alert(res) //res=[3,9,12]

• foreach循环遍历。用法：arr.foreach(function(item,index))其中item为数组元素，index为数组下标。

    let arr=[1,2,3,4]
    arr.forEach(function(item,index){
        alert(item)
        if(index==arr.length-1){
            alert("hello")
        }
    })

• 字符串拼接。用法：可以在反单引号中通过$获取变量值进行拼接。

 //字符串拼接
    let title="数组遍历"
    alert(`hello${title}haha`)  //hello数组遍历haha

面向对象

• ES6增加class关键字，类似于Java的类定义。通过extends关键字继承。

    class User{

        //构造函数
        constructor(name,password){
            this.name=name;
            this.password=password;
        }

        //自定义方法
        showProps(){
            alert(this.name)
            alert(this.password)
        }

    }

    let user=new User("LiMing","123");
    user.showProps();//调用方法
    
    //子类定义
    class aUser extends User{

        constructor(gender,...arg){
            super(...arg)
            this.gender=gender
        }

        showProps(){
            alert(this.gender)
            alert(this.name)
        }

        showProp(){
            alert(this.gender)
            alert("hello")
        }
    }

    let user1=new aUser("male","ZhangSan","123")
    user1.showProps();

JSON

• JSON和JS对象区别：JSON的key需要使用双引号，而JS对象的key不需要。
• JSON与字符串的转换：JSON.stringify(jsonObject)和JSON.parse(jsonStr)

JSON：let json={"name":"sss","pwd":"123"}
JS：let js={NAME:"sss",PWD:"123"}

    let json={"a":12,"b":13}
    alert(JSON.stringify(json))  //json转字符串
    alert(json.a)
    
    let jsonStr=JSON.stringify(json)
    console.log(JSON.parse(jsonStr)) //字符串转JSON

JS对象还可以定义方法：
    //js对象
    let obj={
        name:"ZhangGao",
        showName(){
            alert(this.name)
        },

        list:[1,2,3]
    }

    let newList=obj.list.map(item=>item*2)
    alert(newList)

    obj.showName();

Promise对象

• 解决异步请求的方案。
• 创建一个Promise对象：new Promise(function(resolve,reject))；参数为一个方法，方法的参数为两个函数，其中resolve代表请求成功函数，reject代表请求失败函数。
• .then(func1,func2)表示发送请求后回调的函数，请求成功调用func1函数，请求失败调用func2函数。

    //Promise对象
    let p1=new Promise((resolve,reject)=>{
        resolve("haha成功") 
    });

    //成功与失败函数只调用一个
    p1.then(data=>{  //data表示请求成功返回的数据
        alert("成功了")
        alert(data) //data="haha成功"
    },err=>{    //err表示请求失败的信息
        alert("失败")
        alert(err)
    })
    
    Promise.all([
        $.ajax({url:'http://localhost:10005/backstage/api/transaction/fetchList',dataType:'jsonp'}),
        $.ajax({url:'http://localhost:10005/backstage/api/transaction/fetchList',dataType:'jsonp'}),
        $.ajax({url:'http://localhost:10005/backstage/api/transaction/fetchList',dataType:'jsonp'}),
    ]).then(data=>{

        alert("所有请求成功才能调用成功回调函数")

        let [res1,res2,res3]=data;
        console.log(data)
        alert(res1)
    },err=>{
        alert("只要有一个请求响应失败就调用失败回调函数")
        console.log(err)
    })
    
     let p1=new Promise((resolve,reject)=>{
        resolve("成功P1")
        // reject("失败p1")
    })

    let p2=new Promise((resolve,reject)=>{
        resolve("成功p2")
    })

    Promise.all([p1,p2]).then(data=>{
        alert(data)    //返回所有请求成功的数据
        alert("都成功了")
    },err=>{
        alert(err)
        alert("no success")
    })

    //只要有一个请求成功便调用成功回调函数
    Promise.race([p1,p2]).then(data=>{
        alert("race成功")
        alert(data)//返回第一个成功的数据
    },err=>{
        alert("race失败")
        alert(err)
    })

Generator函数

• 功能：实现函数的暂停。
• 语法：function *funcName(){ ...语句1,yield,...语句2 }
• yield关键字实现执行暂停，通过next()执行下一步。
• 调用时产生一个Generator对象。

    function *func1(){
        alert("a");

        yield;

        alert("b")
    }

    let gen1=func1() //生成Generator对象
    gen1.next()// alert("a")
    gen1.next()// alert("b")

• yield通过next()传参。

    function *func1(){
        alert("a");

        let res=yield;

        alert("b")

        alert(res)// res=2
    }

    let gen1=func1() //生成Generator对象
    gen1.next(12)// alert("a")
    gen1.next(2)// alert("b")

• yield还可以返回值

    function *func1(){
        alert("a");

        yield 20;

        alert("b")
    }

    let gen1=func1() //生成Generator对象
    let res1=gen1.next()// alert("a")
    let res2=gen1.next()// alert("b")

    console.log(res1) //{value: 20, done: false}  false表示该函数还未结束
    console.log(res2) //{value: undefined, done: true} 

总结：yield右边及以上部分属于第一个next()；左边及以下的部分属于第二个next()。

• yield*调用另外的Generator函数。

  function *func1(){
        alert("hello")

        yield

        alert("haha")

    }

    function *func2(){
        alert("调用func1")

        yield* func1()

        alert("调用成功")
    }

    let gen2=func2();
    gen2.next()
    gen2.next()

async函数

• 与Generator函数类似。调用async函数产生Promise对象。

    async function func1(){
        alert("hello1")

        await $.ajax({url:'http://www.baidu.com',dataType:'jsonp'})

        alert("hello3")

    }

    let gen1=func1();
    gen1.then(data=>{
        alert("YES")
    },err=>{
        alert("NO")
    })