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
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值