Day03-ES6

最新推荐文章于 2024-07-09 15:13:57 发布
最新推荐文章于 2024-07-09 15:13:57 发布
阅读量127 收藏
点赞数
文章标签： es6 javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Spirs/article/details/135228798
版权

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

前端拓海
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
day03-es6-课件.rar
04-18
这个“day03-es6-课件”可能包含了关于ES6的详细讲解，包括其核心概念、新特性以及如何在实际项目中应用这些新特性。 1. **箭头函数** 箭头函数是ES6中的一种新函数定义方式，以其简洁的语法而受到欢迎。例如： `...
day04-es6-课件.rar
04-18
这个“day04-es6-课件.rar”压缩包可能包含了关于这一主题的详细教程或课程资料，以下将对ES6中的关键知识点进行深入探讨。 1. **箭头函数**： 箭头函数是ES6中的一种新函数定义方式，以其简洁的语法深受开发者...
day33-ES6
HAI6545的博客
01-04 298
ES6 es6是ECMAScript的第6个版本，在2015年发布。也有的人将ECMAScript5之后版本，统称为es6。比起之前的语法，es6有很多新语法，让开发者在操作数据和函数的时候，功能既多，操作又简便。 数组新增的方法 some - 判断数组中是否至少有一个元素是满足指定条件的，返回布尔值 语法： 布尔值 = 数组.some(function(v,i,a){ return 条件; }) // 上面的i和a是可选参数 例：判断所有成绩中是否有不及格的成绩 va
day15-ES6
kuangjianming的博客
03-15 128
es6定义变量的关键字：let 和 const var 和let const定义变量区别： let 和 const 不能重复定义变量 let 和 const 声明的变量不能进行与解析（只能声明之后调用） let 和 const 声明变量存在块级作用域，在{ }中声明的变量只能在{ }中使用，不能在{ }外使用 ===》因为在es6中每一个{ } 就是一个块级作用域 let 和 const的区别： let 定义的是变量，可以先定义变量后赋值 const 定义的是常量，定义变量的时候，一定要赋值，后期也不
day2--ES6入门
qq_53446980的博客
09-27 84
1.开发模式（原生） ​ xxx文件夹 ​ js文件 ​ html文件 ​ css文件 ​ image文件 技术：html5 css3 JavaScript 2.vue开发 利用脚手架 vue-cli创建框架 在xxx文件夹下，进入终端输入命令： vue create @vue-cli 但是由于是框架，浏览器只能展示html css JavaScript文件 因此最终还是需要将vue项目进行打包成原生的项目文件 在项目终端输入 npm run build 以上操作将项目打包
Day7 前端 - ES6
NETChencs2的专栏
11-16 52
函数默认值fun test(a,b=0)object.assign()，合并方法。``符号用法，多行html代码。箭头函数 代替 函数声明。
day05-es6-课件.rar
04-18
在"day05-es6-课件.rar"中，我们可能会涵盖以下几个核心知识点： 1. **箭头函数**：箭头函数是ES6中一种更简洁的定义函数的方式，如`(params) => { statements }`，它没有自己的`this`，而是继承自父作用域。 2. *...
MooNkirA#code-learning-note#Day01-ES6新特性以及ReactJS入门1
07-25
Day01-ES6新特性以及ReactJS入门1. ES6 新特性此部分内容为前端知识，详见《ECMAScript6 基础笔记》在线文档：JavaScript笔
day03-js高级.zip
10-01
【标题】"day03-js高级.zip" 是一个关于JavaScript高级特性和技术的压缩包文件，其中涵盖了深入的JavaScript知识，旨在帮助学习者提升在JavaScript编程中的技能水平。JavaScript是一种广泛应用于网页和互联网应用的...
ES6自定义模块
C or CPP
07-03 603
命名导出（Named Exports）使用export关键字来导出模块中的变量、函数、类等。这里我们导出了sum和subtract函数。默认导出（Default Export）使用关键字可以导出模块的默认值，一个模块只能有一个默认导出。这里我们默认导出了multiply函数。
ES5/ES6补充笔记
最新发布
喵喵的博客
07-09 625
ES5/ES6补充 ECMAScript 5 2009年12月 正式发布 ECMAScript 5.1就是我们常说的es5 2012年发布 ECMAScript 6（简称ES6）是于2015年6月正式发布的javascript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。 声明命令 let const let声明符 ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变
ES6 新特性有哪些
weixin_64684095的博客
07-06 985
1. 拥有块级作用域，这意味着在 if 语句、for 循环、while 循环等代码块中声明的 let 变量，只在该代码块内有效。2. 不允许在同一作用域内重复声明同一个变量1. 也具有块级作用域。2. 声明时必须进行初始化赋值，且赋值后不能再重新赋值修改其值。3. 如果 const 声明的是一个对象或数组，虽然不能重新赋值整个对象或数组，但可以修改对象的属性值或数组的元素值。
es6之Proxy实现观察者模式
lbking666666的专栏
07-02 1274
ES6中的Proxy是一种用于创建代理对象的特殊对象。它允许我们定义自定义行为，例如拦截和修改对象的默认操作。Proxy可以用于拦截对象的各种操作，包括属性访问、赋值、函数调用等。Proxy的作用是在目标对象之前架设一层拦截，可以对目标对象进行各种操作的拦截和自定义处理。通过使用Proxy，我们可以实现对目标对象的访问控制、数据验证、属性劫持等功能。Proxy通过使用一个代理对象来包装目标对象，并提供了一组钩子函数（也称为“陷阱”），这些钩子函数可以在代理对象上进行操作。
Vue前端打包
weixin_63680330的博客
07-04 353
介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。启动：双击nginx.exe 文件启动，服务器默认占用80端口。官网:https://nginx.org/打包好的dist目录赋值到html下。html静态资源文件目录。conf 配置文件目录。logs日志文件目录。temp临时文件目录。
什么是防抖和节流？如何理解它们并在不同的场景条件下灵活运用？
Vinca@的博客
07-08 835
防抖（Debouncing）和节流（Throttling）是两种常见的性能优化技术，常用于控制某些操作（例如事件处理器）的频率，从而减少资源消耗并提高性能。防抖：在事件停止触发后的指定时间内执行函数。适用于需要等用户停止操作后再处理事件的场景。节流：在指定时间间隔内最多执行一次函数。适用于需要限制函数执行频率的场景。滚动停止后的操作：使用防抖。滚动过程中的持续操作：使用节流。根据具体需求选择适合的优化技术可以有效提高应用性能和用户体验。
Vue 3集成krpano 全景图展示
Mr丶GUO
07-06 414
Vue 3集成krpano 全景图展示，需要借助官方工具进行制作注意事项：vue@cli3没有static，需要放在public目录下。
lightchart 和百度echarts 有什么区别, 各自优势是什么
huanghm88的专栏
07-08 167
总体而言，Lightchart和百度Echarts都是强大的图表库，选择使用哪个取决于具体的需求和个人偏好。如果您对界面简洁和定制化有较高要求，可以选择Lightchart；社区活跃：百度Echarts拥有广泛的用户群体和开发者社区，用户可以通过社区获取到丰富的文档、教程和示例，解决问题和获取帮助。易于使用：Lightchart提供了方便易用的API和丰富的文档和示例，使用户能够快速上手并灵活使用图表库。成熟稳定：百度Echarts已经发布了多个版本，经过了长时间的发展和优化，具有较高的稳定性和可靠性。
JS混淆基本类型和原理
朴拙科技的博客
07-06 710
混淆技术为JS代码提供了一定程度的保护，但同时也给代码的维护和逆向工程带来了挑战。了解和掌握这些混淆技术的原理和解析方法，可以帮助开发者更好地保护或理解JS代码。然而，需要注意的是，混淆并不是万无一失的安全措施，它更多的是增加了攻击者理解代码的难度。在进行逆向工程时，应始终遵守法律法规，尊重知识产权，不要用于非法目的。
时间戳转成年月日 es6
05-11
ES6 中提供的 Date 对象可以非常方便地实现时间戳转成年月日。 在 ES6 中，我们可以使用 Date 类型的 from(timestamp) 方法，将时间戳转换为 Date 类型的对象。基于该 Date 对象，我们可以使用 Date 类型的实例方法...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值