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)
}
}
防抖原理(这里以点击按钮为例)：
- 设置防抖的时间为2秒；
- 点击一次按钮，则开始倒计时；
- 如果在2秒内再次点击按钮，则重新从2秒开始倒计时；
- 如果2秒过后没有再点击按钮，则执行点击按钮对应的事件，否则就再次从2秒开始倒计时。
代码实现(这里以点击按钮为例)
给按钮添加点击事件；
- 当用户点击按钮后，先使用clearTimeout清除延时操作；
- 然后使用setTimeout设置延时操作；
- 如果在规定时间内再次点击按钮，则回到第二步；
- 如果在规定时间内没有点击按钮，则执行按钮对应的事件函数。
案例1
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"