Day08-ES6编程

最新推荐文章于 2024-06-09 20:17:27 发布
最新推荐文章于 2024-06-09 20:17:27 发布
阅读量479 收藏
点赞数
分类专栏： 前端2 文章标签： es6 前端 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33396183/article/details/132069687
版权

ES6编程

一 函数柯里化

基础概念

概念:将多个参数的函数变成单一参数的函数,嵌套返回值到所有的参数都被使用最终返回结果.

简单来说:柯里化就是一个函数变化的过程,指的是将一个函数fn(a,b,c)变成fn(a)(b)(c),可以将这个函数称为柯里化函数.

累加的一个案例:

        function sum(a,b,c){
            return a+b+c
        }
        let result = sum(1,2,3)
        console.log("和:"+result);

函数柯里化后结果

        function sum(a){
            return function(b){
                return function(c){
                    return a + b + c
                }
            }
        }
        let result = sum(1)(2)(3)

总结:函数柯里化并没有引入新的内容,只是在原来函数基础上针对多参数变成单个参数.

应用场景

假设我现在要写一个打折的算法

        /**
         * 编程一个商品打折的函数
        */
        function fun(count,obj){
            //计算出销售价格
            let saleMoney = obj.price*count
            obj.saleMoney = saleMoney
        }
        //商品
        let obj = {
            id:1,
            name:"小米手机13",
            price:1000
        } 

        console.log(obj);
        fun(0.9,obj)
        console.log(obj);

使用函数柯里化来实现代码的调用

        //商品
        let obj = {
            id:1,
            name:"小米手机13",
            price:1000
        } 
        
        let obj2
        let obj3
        let obj4
        let obj5
        let obj6
        
        /**
         * 使用函数的柯里化,简化打折函数
        */
        function saleFun(count){
            return function(){
                 //计算出销售价格
                let saleMoney = obj.price*count
                obj.saleMoney = saleMoney
            }
        }
        
        let func = saleFun(0.7)
        func(obj)
        func(obj2)
        func(obj3)
        func(obj4)

        let func2 = saleFun(0.8)
        func2(obj5)
        func2(obj6)

二 函数的防抖节流

函数防抖

前端开发过程中经常用到一些事件,这些事件在触发的过程中会执行很多次,如果不做限制的话,可能1秒钟就执行会执行几十次.如果在这些函数里面操作了dom,会降低程序的性能,甚至会导致页面卡死.

概念:

事件响应函数在一段时间后才执行，如果这段时间内再次调用，则重新计算执行时间。

防抖的应用场景：一个是按钮连续点击，另一个是input的连续输入

防抖函数设计
        // 定义防抖函数
        // func: 点击按钮要执行的函数
        // delay: 防抖时间
        function debounce(func,delay){
            // 设置定时器标识
            let timer;
            // 返回事件绑定函数
            return function(){
                //先清除定时器
                clearTimeout(timer)
                //设置定时器
                timer = setTimeout(func,delay)
            }
        }
防抖原理(这里以点击按钮为例)：
  1. 设置防抖的时间为2秒；
  2. 点击一次按钮，则开始倒计时；
  3. 如果在2秒内再次点击按钮，则重新从2秒开始倒计时；
  4. 如果2秒过后没有再点击按钮，则执行点击按钮对应的事件，否则就再次从2秒开始倒计时。
代码实现(这里以点击按钮为例)

给按钮添加点击事件；

  1. 当用户点击按钮后，先使用clearTimeout清除延时操作；
  2. 然后使用setTimeout设置延时操作；
  3. 如果在规定时间内再次点击按钮，则回到第二步；
  4. 如果在规定时间内没有点击按钮，则执行按钮对应的事件函数。

案例1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn" >支付</button>

    <script>
        //拿到按钮
        let obtn = document.querySelector("#btn")

        /**
         * 
         * 防抖:事件被频繁触发的时候,只在最后把事件绑定的函数调用一次
         * 概念:事件响应函数在一段时间后才执行，如果这段时间内再次触发事件，则重新计算执行时间。
        */
       /**
        * 防抖函数设计
        * fun:事件处理函数
        * delay:延时时间
       */
        function debounce(fun,delay){
            // 用来保存创建的延时器
            let timer
            //返回事件绑定函数
            return function(){
                //清除已创建的延时器
                clearTimeout(timer)
                //重新创建延时器
                timer = setTimeout(fun,delay)
            }
        }

        /**
         * 支付函数
        */
        function pay(){
            console.log("------支付业务------");
        }

        //给按钮绑定事件
        obtn.onclick = debounce(pay,2000)
    </script>
</body>
</html>

案例2

在输入框下显示你的搜索词

image-20230122120344145

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text">
    <div>
        信息搜索信息
    </div>
    <script>
        //拿到输入框
        let oinput = document.querySelector("input")
        //拿到div
        let oDiv = document.querySelector("div")

        let news = [
            {id:1 , msg:"本质上,webpack是一个用于现代JavaScript应用程序的静态模块打包工具"},
            {id:2, msg: "webpack可以不用再引入一个配置文件来打包项"},
            {id:3, msg:"为了更好地理解模块打包工具背后的理念"}
        ]


        function debounce(fun,delay){
            // 用来保存创建的延时器
            let timer
            //返回事件绑定函数
            return function(){
                //清除已创建的延时器
                clearTimeout(timer)
                //重新创建延时器
                timer = setTimeout(fun,delay)
            }
        }

        /**
         * 搜索函数
        */
        function search(){
            //获取用户输入的数据
            let val = oinput.value
            //筛查出匹配的数据
            let newsArr = news.filter(e => e.msg.includes(val))
            //字符串拼接
            let temp = ""
            newsArr.forEach(e =>{
                temp += e.msg + "<br>"
            })
            //把字符串渲染到页面
            oDiv.innerHTML = temp
        }
        /**
         * 给输入框绑定oninput事件(oninput当输入口内容改变事件)
        */
        oinput.oninput = debounce(search,500)

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

函数节流

概念:节流是将多次执行的事件变成每隔一段时间执行。 节流会稀释函数的执行频率。

节流的应用场景：最多应用在 scroll事件 和 touchmove事件

节流的代码
        /**
         * 节流函数:稀释事件的触发频率
        */
        function throttle(fun,delay){
            //创建一个变量,保存延时器
            let timer = null
            // 事件绑定函数
            return function(){
                if(timer == null){
                    //创建一个延时器
                    timer = setTimeout(()=>{
                        fun()
                        timer = null
                    },delay)
                }
            }
        }
案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn" >支付</button>
    <script>
        //拿到按钮
        let obtn = document.querySelector("#btn")

        /**
         * 节流函数:稀释事件的触发频率
        */
        function throttle(fun,delay){
            //创建一个变量,保存延时器
            let timer = null
            // 事件绑定函数
            return function(){
                if(timer == null){
                    //创建一个延时器
                    timer = setTimeout(()=>{
                        fun()
                        timer = null
                    },delay)
                }
            }
        }

        /**
         * 支付函数
        */
        function pay(){
            console.log("-------支付业务-----");
        }

        //给按钮绑定事件
        obtn.onclick = throttle(pay,2000)
    </script>
</body>
</html>

防抖节流的区别：

防抖是函数的有效代码执行一次，节流是为稀释有效代码的执行频率

防抖的目的是为了 让事件虽然会多次触发 但是有效代码只执行一次

节流的目的是为了 让事件虽然会多次触发 但是有效代码只会根据固定频率去执行,稀释函数的执行频率。

ES6的新特性

一 ES6介绍

ES6指的就是ECMA推出的第六个版本.

ES6文档:http://caibaojian.com/es6/

ES6的语法非常多,我们常用的语法有:
let const
模版字符串
扩展运算符
严格模式
解构赋值
Set Map

二 严格模式

ES6提出了代码的严格模式,严格模式平时开发一般不会用到,如果以后我们用一些打包工具来做代码的编译,编译代码可能会用到严格模式.

严格模式可以让我们的代码更加规范,提早发现错误信息

目的:

  1. 消除了JavaScript这个语言,设计不合理一些地方(不严谨).减少一些怪异行为
  2. 消除了代码中的一些运行不安全内容
  3. 提升了编译器效率,增加运行速度

语法

use strict

案例

1.定义变量不能省略关键字

    <script>
        // 开启严格模式
        "use strict"

        //1.定义变量不能省略关键字
        a = 100
        console.log(a);
    </script>

2.变量名不能用关键字

    <script>
        // 开启严格模式
        "use strict"

        //2.变量名不能用关键字
        let public = 100
        console.log(public);
    </script>

3.函数参数名字不允许一样

    <script>
        // 开启严格模式
        "use strict"
        //3.函数参数名字不允许一样
        function fun(n,n){
            console.log(n);
        }
        fun(1,2)
    </script>

三 解构赋值

ES6中,允许我们使用一种新的模式,提取数组,对象或字符串中的数据,给变量赋值,这种模式我们称为解构赋值

1 数组

    <script>
        /**
         * 数组的解构赋值
        */
        let arr1 = ["赵日天","赵昊"]
        //ES5
        let e1 = arr1[0]
        let e2 = arr1[1]

        //ES6
        let [name1,name2] = arr1
        console.log(name1);
        console.log(name2);

        let arr2 = [1,2,3,4,5,6,7,8,9]
        let [n1,n2,...num] = arr2
        console.log(n1);
        console.log(n2);
        console.log(num);
    </script>

2 对象

对象里面会有很多属性,我们可以通过解构取出对象中需要的属性

案例1
    <script>
        //对象的解构
        let student = {
            id:1,
            name:"李杀神",
            age:200
        }
        //ES5
        // let id = student.id
        // let name = student.name
        // let age = student.age

        //ES6   
        let {id,name,age} = student
        console.log(id);
        console.log(name);
        console.log(age);
    </script>
案例2
    <script>
        //对象的解构
        let student = {
            id:1,
            name:"李杀神",
            age:200,
            classe:{
                id:2,
                name:"一年级一班"
            }
        }

        //ES5
        // let id = student.id
        // let name = student.name
        // let age = student.age
        // let classe = student.classe
        // let cid = classe.id
        // let cname = classe.name
        // console.log(id);
        // console.log(name);
        // console.log(age);
        // console.log(cid);
        // console.log(cname);

        let {id,name,age,classe:{id:cid,name:cname}} = student
        console.log(id);
        console.log(name);
        console.log(age);
        console.log(cid);
        console.log(cname);
    </script>
案例3

对象解构的默认值

    <script>
        //对象解构的默认值
        let obj = {id:1,name:"刘斩仙"}
        let {id,name="王诛魔"} = obj
        console.log(id);
        console.log(name);
    </script>

默认值的优先级很低,对象没有这个属性,默认值才会生效,如果对象有这个属性,默认值不会生效

3 字符串

    <script>
        //字符串的解构
        let s = "hello"
        let [a,b,c,d,e] = s
        console.log(a);
        console.log(b);
        console.log(c);
        console.log(d);
        console.log(e);
    </script>

四 Set集合

set集合也是一种用来存储数据的容器

set集合存储的数据是唯一的,会自动去重,没有下标

1 基本语法

        //创建set集合
        let set = new Set()
        //增
        set.add(3)
        set.add(5)
        set.add(1)
        set.add(7)
        set.add(6)
        set.add(3)
        //删
        set.delete(5)
        //判断set集合中是否存在某个元素
        let flag = set.has(7)
        console.log(flag);
        //清空set集合
        // set.clear()

        //输出set集合
        console.log(set);
        //获取set集合的长度
        let s = set.size
        console.log(s);

2 set集合的遍历

        //创建set集合
        let set = new Set([3,5,1,7,6])
        //set集合的遍历
        set.forEach(e =>{
            console.log(e);
        })

        for (const e of set) {
            console.log(e);
        }

3 set集合跟数组的转换

        let array1 = [3,5,1,7,6,5,3,1,6,7] 
        //把数组转set集合
        let set2 = new Set(array1)
        console.log(set2);
        //set集合转数组
        let array2 = [...set2]
        console.log(array2);
金霖海
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Day09-ES6编程
金霖海的博客
08-02 802
bind:修改this指向,函数不会理解执行,会返回修改后的函数,返回的函数需要重新调用,参数是一个一个的传递。箭头函数中没有this指向的概念,箭头函数中写的this跟箭头函数所在作用域的this指向一致。刷新浏览器,出现如下效果代表debug模式已启动,并且程序的运行停止在了断点的位置。this一般使用在函数里面,接下来我们来谈谈this写在函数中的指向问题。apply:修改this指向,函数会立即执行,参数使用数组进行传递。call:修改this指向,函数会立即执行,参数一个一个传递。
day01-ES6新特性以及ReactJS入门
m0_45209551的博客
08-30 734
var 有一个问题，就是定义的变量有时会莫名奇妙的成为全局变量。之前，我们写js定义变量的时候，只有一个关键字： var。
DAY27-ES6基础
qq_42775808的博客
03-30 105
跟spStr1的结果是一致的，值也是["I", " ", "a", "m", " ", "t", "h", "e", " ", "b", "o", "n", "e", " ", "o", "f", " ", "m", "y", " ", "s", "w", "o", "r", "d"]。如果`age`属性的值为`undefined`，则将`age`默认设为`24`。最终的结果是变量`name`的值为`'小红'`，变量`age`的值为`24`，变量`hobby`的值为`[ '学习' ]`。
DAY28-ES6扩展
qq_42775808的博客
03-31 48
接下来，又定义了一个变量`xiaoming`，它调用了`getUserInfo()`函数，这将返回一个包含`name`、`age`和`say()`属性的对象，并将这个对象赋值给`xiaoming`。在JavaScript中，迭代器对象必须包含一个名为Symbol.iterator的属性，这个属性返回一个对象，该对象必须实现`next()`方法，每次调用该方法都会返回一个包含`value`属性和`done`属性的对象，`value`属性表示当前元素的值，`done`属性表示是否已经到达迭代器的结尾。
day03---ES6入门(02)
DKPT的博客
06-27 121
一、 ECMAScript 6 简介 自学参考：http://es6.ruanyifeng.com/ ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。 1、ECMAScript 和 JavaScript 的关系 一个常见的问题是，ECMAScript 和 JavaScript 到底是什么关系？ 要讲清楚这个问题，需要回顾历史。19
前端路线--ES6（day04）
Yan9_9的博客
04-19 731
@import @import url(“index.css”); 导入CSS引用 模块化 var username = “二哥”; //定义一个变量，将来在所有的页面中使用 var age = 18 var fn = function () { return username + “:” + age } //导出(export) // 导出这个变量 // 暴露 export { username, age, fn } //导入( import) // 按需导入 ./表示同级目录 import { us
ES6 - Day1-基础知识
weixin_45663697的博客
04-11 118
1. 面向对象编程介绍 1.1 面向过程编程 面向过程：分析出解决问题的步骤，然后用函数把这些步骤一步一步实现，使用的时候在一个一个依次调用 例子：将[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2MotKrCE-1618146972523)(file:///C:\Users\xmydd\AppData\Local\Temp\SGPicFaceTpBq\6096\093B3E4B.png)]装进冰箱里 打开冰箱门 --> 2. 把大象装进去 --> 3. 关上
D18-D22 ES6
intmain404的博客
01-31 228
ES6小知识
Day20：ES6语法
albedo_102的博客
08-04 32
而复杂类型（对象 object，数组 array，函数 function），变量指向的内存地址其实是保存了一个指向实际数据的指针，所以 const 只能保证指针是固定的，至于指针指向的数据结构变不变就无法控制了，所以使用 const 声明复杂类型对象时要慎重。原理：每创建一个定时器，就会形成一个块级作用域，块级作用域内的i，互不影响，最后执行定时器的时候，打印的是各自块级作用域中的i。调用父类方法, super 作为对象，在普通方法中，指向父类的原型对象，在静态方法中，指向父类。
day04-es6-课件.rar
04-18
day04-es6-课件.rar
day03-es6-课件.rar
04-18
day03-es6-课件.rar
cesium-navigation-es6 Cesium指南针，import的方式
08-25
这个是es6 import的方式，Cesium的指南针，版本兼容1.60-1.70，可以试试，没demo
day05-es6-课件.rar
04-18
node、babel环境配置
amd-to-es6：将amd转换为es
02-05
AMD转ES转换器 AMD（异步模块定义）到... 该工具同时公开了cli和编程界面。 安装 npm install -g @buxlabs/amd-to-es6 用法 cli 使用以下方法转换单个文件： amdtoes6 app.js > app-es6.js 使用以下命令转换给定目
ES5/ES6 的继承除了写法以外还有什么区别？
weixin_64433668的博客
06-08 421
为子类没有自己的 this 对象， 而是继承了父类的 this 对象， 然后对其进行加工。注意： 在子类构造函数中， 调用 super 后， 才可使用 this 关键字， 否则。须先调用父类的 super()方法） ， 然后再用子类的构造函数修改 this。ES6 的继承机制完全不同， 实质上是先创建父类的实例对象 this（所以必。ES5 的继承实质上是先创建子类的实例对象， 然后再将父类的方法添加。注意 super 关键字指代父类的实例， 即父类的 this 对象。必须使用 new 调用 class。
common.js和es6中模块引入的区别
He_9a9的博客
06-05 1109
common.js和es6中模块引入的区别
【前端技术】 ES6 介绍及常用语法说明
傲泣龙腾的博客
06-04 2530
ES6 引入了许多新特性和改进，使 JavaScript 更加现代化和强大。通过使用这些特性，开发者可以编写出更加简洁、高效和可维护的代码。这种变化和改进不仅提高了代码的可读性和可维护性，也使得开发者能够更轻松地实现复杂的功能。通过学习和掌握这些新特性，您将能够更加高效地编写 JavaScript 代码，适应现代 web 开发的需求。 最后希望本文对小伙伴们了解 ES6 及其语法有所帮助～ 欢迎一起评论交流！
[Vue-常见错误]浏览器显示Uncaught runtime errors
最新发布
一个喜欢什么都研究一下的小小后端程序员
06-09 363
在vue.config.js中配置关闭Uncaught runtime errors显示。
cesium-popup-es6 文档
07-18
cesium-popup-es6是一个基于ES6语法编写的Cesium.js的弹窗组件，用于在Cesium地图上显示自定义的弹窗内容。 这个组件主要包含了以下几个部分： 1. Popup类：这是弹窗的主要类，负责创建和管理弹窗的各种属性和方法...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值