Day08-ES6编程

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
    评论
### 回答1: cesium-popup-es6是一个基于ES6语法编写的Cesium.js的弹窗组件,用于在Cesium地图上显示自定义的弹窗内容。 这个组件主要包含了以下几个部分: 1. Popup类:这是弹窗的主要类,负责创建和管理弹窗的各种属性和方法。通过使用Popup类,可以很方便地在地图上创建弹窗,并设置弹窗的位置、大小、内容等。 2. 事件监听:cesium-popup-es6还提供了一些事件监听的方法,可以在弹窗的打开、关闭以及其他交互操作时进行相应的处理。例如,可以监听鼠标点击事件来关闭弹窗,或者监听地图的移动事件来更新弹窗的位置。 3. 样式定制:该组件允许用户通过设置自定义的CSS样式来定制弹窗的外观和风格。这使得用户可以根据自己的需要来修改弹窗的颜色、字体、边框等样式属性,从而实现个性化的弹窗显示效果。 4. 兼容性:cesium-popup-es6能够很好地与Cesium.js的其他功能和插件进行集成,同时对不同的浏览器和设备也具备良好的兼容性。这意味着无论是在PC端还是移动端,无论是在Chrome还是在Safari等浏览器上,cesium-popup-es6都能够正常运行。 总的来说,cesium-popup-es6文档提供了关于如何使用和定制这个弹窗组件的详细说明,方便开发者在Cesium.js地图项目中加入自定义的弹窗功能。无论是展示地理信息、交互操作还是其他相关需求,cesium-popup-es6都能够帮助开发者实现一个易于使用和美观的弹窗效果。 ### 回答2: cesium-popup-es6 是一个基于 Cesium.js 的弹出窗口组件,该组件使用 ES6 编写。它为用户提供了在 Cesium 场景中高度可定制的弹出窗口功能。 组件的文档详细介绍了 cesium-popup-es6 的使用方法和各个配置项的说明。首先,你需要通过 npm 或者其他构建工具下载并引入该组件。然后,在你的代码中创建一个 Popup 实例并传入相应的参数,包括弹出窗口的内容、位置、大小、样式等。 文档中还介绍了组件的主要功能,包括弹出窗口显示和隐藏的方法,以及与 Cesium 场景的交互。你可以通过调用 show 方法来显示弹出窗口,通过调用 hide 方法来隐藏弹出窗口。组件还提供了许多配置项,例如你可以自定义弹出窗口的样式、位置以及与其它元素的交互等。 文档中也提供了丰富的示例代码,以帮助用户更好地理解和使用 cesium-popup-es6 组件。这些示例代码覆盖了各种场景,包括在固定位置显示弹出窗口、在鼠标点击位置显示弹出窗口等。 总的来说,cesium-popup-es6 文档提供了详细的使用说明和示例代码,帮助用户了解和使用该弹出窗口组件。用户可以根据自己的需求进行定制,实现丰富多样的弹出窗口效果。 ### 回答3: cesium-popup-es6 是一个基于ES6语法的Cesium.js库的文档。 该文档主要用于指导开发者在使用cesium-popup-es6库时的操作步骤和相关功能的使用方法。 文档的目录结构清晰明了,按照功能模块进行分类,方便开发者快速找到需要的信息。 在文档的开头部分,首先介绍了cesium-popup-es6的基本概述,包括其功能特点和适用场景,帮助开发者了解该库的作用和优势。 接下来,文档详细介绍了cesium-popup-es6的安装和配置步骤。通过简明的指导,开发者可以快速将该库引入到自己的项目中,并进行相应的配置。 然后,文档详细说明了cesium-popup-es6库的各种功能和使用方法。比如,如何创建和定位弹出窗口、如何设置窗口内容和样式、如何捕获窗口的事件等等。每一项功能都给出了具体的代码示例和详细的说明,方便开发者理解和应用。 文档还提供了一些常见问题的解答和一些建议的最佳实践,帮助开发者在使用cesium-popup-es6库时避免一些常见的问题和错误。 最后,文档附带了一些附录,包括cesium-popup-es6的API参考和一些相关的资源链接,方便开发者查阅进一步的信息和深入理解该库。 总之,cesium-popup-es6 文档是一份详尽而全面的文档,对于开发者学习和使用cesium-popup-es6库非常有帮助,可以提高开发效率并简化开发过程。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值