ES6 -- 总结 02

最新推荐文章于 2024-10-02 17:15:49 发布

柿子来了

最新推荐文章于 2024-10-02 17:15:49 发布

阅读量367

点赞数 8

文章标签： es6 javascript 前端

本文链接：https://blog.csdn.net/2301_78949452/article/details/141367635

版权

普通函数的写法以及默认参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // function fun(){

        // }

        // var fn = function(){

        // }
        // (function(){

        // })()
        function fun(a,b=99){
            console.log(a)
            console.log(b)
        }
        fun(10,22)
        // 传参数量不固定
        function fun2(...eg){
            console.log(eg)
        }
        fun2(1,2,3,4,5,6)
    </script>
</body>
</html>

箭头函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">我是一个盒子</div>
    <script>
        // 箭头函数是es6新增的语法
        // (参数)=>{}
        // 有多个参数的时候括号一定不能省略
        let fun1 = (aw,s)=>{
            console.log('hello world',aw,s)
        }
        fun1('我是实参','ssss')
        // 当箭头函数只有一个参数的时候，可以省略小括号
        let fun2 = a=>{
            console.log('a',a)
        }
        fun2('我是实参a')
        // 没有参数的时候括号一定不能省略
        let fun3 = ()=>{

        }
        fun3()
        //当函数体只有一个语句时可以省略return和{}
        let fun4 = ()=>{
            return 'hello world'
        }
        console.log(fun4())
        let fun5 = ()=>'hello world'
        console.log(fun5())
        // 箭头函数接参 
        // 箭头函数没有arguments对象
        let fun6 = (...eg)=>{
            console.log('eg',eg)
            // console.log('arguments',arguments)
        }
        fun6('w','a','s','d')
        // 箭头函数是没有this 箭头函数的this指向父级所在的作用域
        function fun7(){
            console.log('fun7',this)
        }
        fun7()
        let fun8 = ()=>{
            console.log('fun8',this)
        }
        fun8()
        let obj = {
            name:"小明",
            age:20,
            // makeMoney(){
            //     console.log('makeMoney普通函数',this)
            // }
            makeMoney:()=>{
                // this指向上下文---父级所在的作用域
                console.log('makeMoney箭头函数',this)
            }
        }
        // 指向该方法所属的对象
        obj.makeMoney()
        let box = document.querySelector('.box')
        box.onclick = function(){
            console.log('box外面的',this)
            // let that =this;
            // setTimeout(function(){
            //     console.log('box里面的',that)
            // })
            setTimeout(()=>{
                console.log('box里面的',this)
            })
        }
    </script>
</body>
</html>

jquery的ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
</head>
<body>
    <script>
        // jquery是js的一个库 里面有很多js常用的功能
        // $('.box').addClass('active')
        console.log('$',$)
        // jquery的ajax
        // $.ajax({
        //     url:"http://localhost:3008/api/student/getStudent",
        //     // type:"get",
        //     data:{
        //         id:1723708426340
        //     },
        //     success(res){
        //         console.log(res)
        //     },
        //     error(){

        //     }
        // })
        // Promise 主要是用来解决异步的 构造函数
        // Promise接受一个函数作为参数,其中这个函数有两个参数,resolve和reject（形参）
       let promise =  new Promise((resolve,reject)=>{
        $.ajax({
            url:"http://localhost:3008/api/student/getStudent",
            // type:"get",
            data:{
                id:1723708426340
            },
            success(res){
                console.log(res)
                // 成功的回调函数
                resolve(res)
            },
            error(err){
                reject(err)
            }
        })
       })
    //    使用接口数据怎么办
       console.log(promise)
    //    .then是个方法接收两个函数作为参数一个是成功的函数一个是失败的函数
       promise.then(res=>{
        console.log(res)
       },err=>{

       })
    </script>
</body>
</html>

promise解决回调地狱

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // setTimeout(()=>{
        //     console.log('定时器3')
        //     setTimeout(()=>{
        //     console.log('定时器2')
        //     setTimeout(()=>{
        //     console.log('定时器1')
        // },1000)
        // },2000)
        // },3000)
        // 解决上述回调地狱问题
        function fun3(){
            return new Promise((resolve,reject)=>{
                setTimeout(()=>{
                    resolve('定时器3')
                    
                },3000)
            })
        }
        function fun2(){
            return new Promise((resolve,reject)=>{
                setTimeout(()=>{
                    resolve('定时器2')
                },2000)
            })
        }
        function fun1(){
            return new Promise((resolve,reject)=>{
                setTimeout(()=>{
                    resolve('定时器1')
                },1000)
            })
        }
        // console.log('fun3',fun3())
        // fun3().then(res=>{
        //     console.log(res)
        // })
        // 需求321
        // fun3().then(res=>{
        //     console.log('res定时器3',res)
        //     fun2().then(res=>{
        //         console.log('res定时器2',res)
        //         fun1().then(res=>{
        //             console.log('res定时器1',res)
        //         })
        //     })
        // })
        // 链式调用
        fun3().then(res=>{
            console.log('res定时器3',res)
            // fun2()promise的实例化对象
           return fun2()
        }).then(res=>{
            console.log('res定时器2',res)
            return fun1()
        }).then(res=>{
            console.log('res定时器1',res)
        })
       
    </script>
</body>
</html>

asnyc的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // async 异步的意思 await 等待
        // async需要加在函数的前面
       async function fun1(){
            // await必须放在async函数里面
            // console.log('我是async函数')
            return '哈哈哈'
        }
        // async 函数返回的是promise实例化对象
        let rel = fun1()

        console.log(rel)

        rel.then(res=>{
            console.log(res)
        })
      
    </script>
</body>
</html>

async和await的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
           function fun3(){
            return new Promise((resolve,reject)=>{
                setTimeout(()=>{
                    resolve('定时器3')
                    
                },3000)
            })
        }

        function fun2(){
            return new Promise((resolve,reject)=>{
                setTimeout(()=>{
                    resolve('定时器2')
                },2000)
            })
        }

        function fun1(){
            return new Promise((resolve,reject)=>{
                setTimeout(()=>{
                    resolve('定时器1')
                },1000)
            })
        }

        // promise链式调用来控制代码的执行顺序
        async function fun4(){
            // await 必须加在async函数里面
            // 等待的意思 await
            let rel3 = await fun3();
            console.log(rel3);
            let rel2 = await fun2();
            console.log(rel2);
            let rel1 = await fun1();
            console.log(rel1);
        }
        fun4();
    </script>
</body>
</html>

cookie的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 127.0.0.1 localhost

        console.dir(document);
        document.cookie = '小明=zhangsan';
        let date = new Date();
       console.log( date.setDate(date.getDate()+1));
       document.cookie ='name=dododod;expires = '+  date.setDate(date.getDate()+1);

    </script>
</body>
</html>

token的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
</head>
<body>
    <button id="loginBtn">登录</button>
    <button id="otherBtn">调用其他接口</button>
    <script>
        // 单点登录 多点登录
        // 把用户名密码发送给后台，后台验证用户名密码是否正确
        // 如果正确给你返回token,返回错误信息
        // 前端拿到token之后，进行本存储然后再放到请求头里面了，后台根据你请求头传递的token来判断是你是他们系统的用户如果是就给你返回数据，
        // 如果不是则错误信息
        // 登录 需要账号密码
    //    console.log( $('#loginBtn'))

    $('#loginBtn').click(function(){
        console.log('ooo')
        $.ajax({
            url:"http://localhost:8888/login",
            type:"post",
            // jquery的所有请求参数都用data进行传递
            data:{
                username:"xiaoming",
                password:"123456"
            },
            success(res){
                console.log(res);
                localStorage.setItem('token',res.token);
            }
        })
    })

    // token时后台给你生成的
    $('#otherBtn').click(()=>{
        $.ajax({
            url:"http://localhost:8888/msg",
            headers:{
                authorization:localStorage.getItem('token');
            },
            success(res){
                console.log('res123456',res);
            }
        })
    })
    </script>
</body>
</html>