Day03-ES6

2023-12-27 06:12:23

一.ES6函数

<!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(...value) {
            console.log(value);
        }

        fun(1, 2, 3, 4, 5, 6, 7, 8, 9);

    </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>点击</div>

    <script>

        // 箭头函数
        // 参数 => 函数体
        let fun = v => console.log(v);
        console.dir(fun);
        fun(2);

        // 传递多个参数
        let fun2 = (a, b) => console.log(a + b);
        fun2(1, 2);

        // 函数体语句较多
        let fun3 = (a, b) => {
            var num = a + b;
            return num;
        };
        console.log(fun3(1, 1));

        // setTimeout(() => {
        //     console.log("箭头函数");
        // }, 2000)

        var fun4 = () => {
            console.log(this);      // window
        }
        fun4();

        var obj = {
            name: "zhangsan",
            age: 18,
            fun: () => {
                console.log(this);    // window
            },
            fun2: function () {
                console.log(this);
                setTimeout(() => {
                    console.log(this);      // obj
                }, 1000)
            },
        }
        obj.fun();
        obj.fun2();

        document.querySelector("div").onclick = () => {
            console.log(this);      // window
        }

        // 箭头函数本身不具有this,他的this指向父级上下文(外层作用域)
        // 箭头函数中没有 arguments 对象
        // 不能用作构造函数,这就是说不能够使用new命令,否则会抛出一个错误
        // 没有propotype原型属性

    </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>

        // promise 对象
        var pro = new Promise(function (resolve, reject) {
            resolve("执行成功");
            reject("执行失败");
        });

        // 调用 .then() 方法
        pro.then(function (data) {
            console.log(data);
        }, function (err) {
            console.log(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>

    <script src="./jquery-3.6.0.min.js"></script>
</head>

<body>

    <script>

        // jQuery 中的 ajax
        var baseURL = "http://localhost:3008/api";
        // $.ajax({
        //     type: "GET",
        //     url: baseURL + "/student/getStudent",

        //     success: function (data, status, xhr) {
        //         console.log(data);
        //         console.log(status);
        //         console.log(xhr);
        //     },
        //     error: function (err) {
        //         console.log("err" + err);
        //     }
        // })

        // 通过 promise 对象发送请求
        var ajaxpro = new Promise(function (resolve, reject) {
            $.ajax({
                type: "GET",
                url: baseURL + "/student/getStudent",

                success: function (data, status, xhr) {
                    resolve(data);

                },
                error: function (err) {
                    reject(err);
                }
            })
        })

        // 通过 .then() 方法分别得到成功或失败的回调
        ajaxpro.then(function (data) {
            // console.log(data);
            window.data = data;
        }, function (err) {
            console.log(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>

        function fun1() {
            return new Promise(function (res, rej) {
                setTimeout(() => {
                    res("定时器1")
                }, 3000)
            })
        }

        function fun2() {
            return new Promise(function (res, rej) {
                setTimeout(() => {
                    res("定时器2")
                }, 2000)
            })
        }

        function fun3() {
            return new Promise(function (res, rej) {
                setTimeout(() => {
                    res("定时器3")
                }, 1000)
            })
        }


        // promise 链式调用解决回调地狱问题

        // console.log(fun1());
        fun1().then(function (data) {
            console.log("fun1" + data);
            // 将 fun2() 作为返回值
            return fun2();
        }).then(function (data) {
            console.log("fun2" + data);
            // 将 fun3() 作为返回值
            return fun3();
        }).then(function(data){
            console.log("fun3" + data);
        })


        // setTimeout(() => {
        //     res("定时器1");
        //     setTimeout(()=>{

        //     })
        // }, 3000)

    </script>

</body>

</html>

六.async函数

<!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 函数

        async function fun() {
            return "promise"
        }

        console.dir(fun());
        fun().then(data => console.log(data))

    </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 fun1() {
            return new Promise(function (res, rej) {
                setTimeout(() => {
                    res("定时器1")
                }, 3000)
            })
        }

        async function fun2() {
            // 等待
            await fun1().then((data) => {
                console.log(data);
            })
            setTimeout(() => {
                console.log("定时器2");
            }, 2000)
        }

        fun2().then()

    </script>

    <script src="./09-导入.js"></script>

</body>

</html>

八.导出js

let num = 10;

// 导出
export default num;

九.导入js

import num from "./08-导出.js";

console.log(num);

文章来源:https://blog.csdn.net/Spirs/article/details/135228798
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。