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">
<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
在输入框下显示你的搜索词
<!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提出了代码的严格模式,严格模式平时开发一般不会用到,如果以后我们用一些打包工具来做代码的编译,编译代码可能会用到严格模式.
严格模式可以让我们的代码更加规范,提早发现错误信息
目的:
- 消除了JavaScript这个语言,设计不合理一些地方(不严谨).减少一些怪异行为
- 消除了代码中的一些运行不安全内容
- 提升了编译器效率,增加运行速度
语法
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);
扫一扫
1215
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
