ES6学习笔记

ES6

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

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

<script>
    
    if(true){
        var a=1;
        let b=1;
    }
    
    alert(a);//不报错 弹出1
    alert(b);//报错

</script>

箭头函数
  • 语法:参数 => 函数体
  • 当参数只有一个时可以省略()
  • 当返回语句只有一条return语句时可以省略{}
箭头函数的使用:

<script>
    //以前写法
   function show(arg){
        alert(arg)
    }

    //箭头函数写法
    let func=(arg)=>{
        alert(arg)
    }

    show("arg")
    func("arg")
	
	//只有一个参数,省略()
	let func2=arg=>{
	    return 2*arg;
	}
	func2(12)
	
	//函数体只有一条返回语句,省略{}
	let func3=arg=>2*arg;
	alert(func3(12))

</script>
函数参数扩展
  • 语法:...
  • 必须是最后一个:function show(a,b,...arg,c){} 错误
<script>
    
    //指向剩余参数
    function show(a,b,...arg){
        alert(arg)//arg=3,4,5,6,7,8
    }

    show(1,2,3,4,5,6,7,8);
    
    //数组扩展 此处 ...arr相当于1,2,3,4,5,6
    let arr=[1,2,3,4,5,6]
    show(...arr)// arg=3,4,5,6
    
    let arr2=[7,8,9,10]

    let arr3=[...arr,...arr2]
    alert(arr3) //1,2,3,4,5,6,7,8,9,10
    
    //默认参数
     function show1(a,b=3,c=4){
        alert(a);//12
        alert(b);//2
        alert(c);//4
    }
    show1(12,2)
    
</script>
解构赋值
  • 左右两边结构一致。
  • 右边必须是合法的。
  • 声明必赋值,即声明和赋值不能分开。
<script>

    let [a,b,c]=[1,2,3]
    alert(a+' '+b+' '+c)//1 2 3
    
    let {a,b,c}={1,2,3}//错误
    let {a,b,c}={a:1,b:2,c:3}
    alert(a+' '+b+' '+c)
    
    let [arr1,arr2,arr3,arr4]=[{a:1,b:2,c:3},[1,2,3],3,"no message"]
    console.log(arr1,arr2,arr3,arr4)
    // arr1={a:1,b:2,c:3} 其后依次对应

</script>
数组
  • 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
  • JSONJS对象区别:JSONkey需要使用双引号,而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")
    })
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值