Day03-ES6

码龄5年

关注

原创最新推荐文章于 2026-08-23 08:00:00 发布 247 阅读 GEO检测

Linux下离线安装Google Chrome 目录背景一、下载并安装Google Chrome二、下载并安装依赖包1.libvulkan.so.1()(64bit)2.读入数据总结背景项目中服务器被要求不能连接外网，不能直接联网安装，所以需要下载Google Chrome安装包和依赖包，然后离线安装。 linux下步骤都一样，不管ubuntu还是centos只是需要下载对应系统的文件包即可。本机系统：CentOS 7 一、下载并安装Google Chrome 官方下载地址http://www.google.cn/chrome/browser/d 阅读详情

一.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);

标签

#es6 #javascript #前端

本内容遵循 CC 4.0 BY-SA 版权协议

CKA-CN考试之路----16 所以结合本题,如果有多个文件中都存在同一个值,务必统一,或者修改最后一个次序的文件。中以不同的文件名来区分不同目的的配置会更有利于阅读.就像本题中的。但当有多个文件中存在同一个参数的不同值,最后会生效哪个值?中,但随着配置越来越多不怎么容易阅读.当多个文件同时存在一个参数,但值又不同。有时候我们会将所有内存参数全部写在。确认服务状态(2个红框中的内容) 阅读详情

Day03-ES6

一.ES6函数

二.箭头函数

三.promise使用方式

四.promise使用

五.promise解决回调地狱

六.async函数

七.async-await使用

八.导出js

九.导入js

相关推荐