一.认识函数的柯里化
- 将一个接受多个参数的函数,更改为需要调用多次,每次只传一个参数的函数
- 利用闭包,延长了外部函数的参数使用时间
//方法一:
function sum (a, b) {
console.log(a + b)
}
sum(10, 20)
sum(10, 30)
sum(10, 40)
//方法二:
function sum (a) {
return function (b) {
console.log(a + b)
}
}
let res = sum(10)
// console.log(res)
res(20)
res(30)
res(40)
let res1 = sum(100)
res1(20)
let res2 = sum(200)
res2(20)
//方法三:
// 正则验证密码
const reg = /^\w{6,10}$/
const boo = reg.test('abc123')
console.log(boo)
// 封装完成
// function myTest(str) {
// return /^\w{6,10}$/.test(str)
// }
// function myTest2(str) {
// return /^\d{4,8}$/.test(str)
// }
// let boo = myTest('abc123')
// console.log(boo)
// function myTest(reg, str) {
// return reg.test(str)
// }
// let boo = myTest(/^\w{6,10}$/, 'abc123')
// console.log(boo)
// let boo1 = myTest(/^\d{4,8}$/, '123456')
// let boo2 = myTest(/^\d{4,8}$/, '7890123')
// let boo3 = myTest(/^\d{4,8}$/, 'asdzxcasd')
// console.log(boo1)
//最终结果
function curry(reg) {
return function (str) {
return reg.test(str)
}
}
let test1 = curry(/^\d{4,8}$/)
// console.log(test1)
let boo1 = test1('123456')
// console.log(boo1)
let boo2 = test1('qwe123456')
// console.log(boo2)
let test2 = curry(/^\w{6,10}$/)
// console.log(test2)
let boo3 = test2('!@#$%^&*')
console.log(boo3)
let boo4 = test2('123qwe')
console.log(boo4)
二.封装柯里化
- 外层函数负责收集参数
- 内层函数负责 在参数收集完毕的时候 执行功能
https://127.0.0.1:80/a.html
https://www.XXX.com:8080/index.html
协议: https http
域名: www.XXX.com 127.0.0.1
端口号:0 ~ 65535 80 443 777
地址: index.html a.html
案例:
function fn(a, b, c, d) {
return a + '://' + b + ':' + c + d
}
// 外层函数 负责接接收参数
function currying(callback, ...arg) {
// ...arg 将后续所有实参, 以数组的形式存放在 arg 形参内, 如果没有传递的话, 是一个空数组
// console.log(callback) // 功能函数, 首次调用必传
// console.log(arg) // 基本参数, 首次调用可传可不传
// console.log(callback.length) // 函数名.length 能获取到函数的形参数量
const len = callback.length
// 内层函数负责 当前是否接受够参数了
return function (...iArg) {
iArg = [...arg, ...iArg] // 开始执行共能前, 先将两次函数调用接受的参数合并为一个数组, 后续用于计算传递的参数是否足够
if (iArg.length === len) { // 如果传递的参数数量, 刚好是功能函数需要的数量, 代表此时参数足够, 直接执行函数即可
return callback(...iArg) // 执行功能函数, 此时会得到一个拼接好的字符串, 我们将这个字符串返回出去, 就能得到功能函数的执行结果
} else { // else 分支执行时表明此时函数参数仍未接受足够, 此时需要继续接受参数, 根据函数功能, 我们应该调用 currying并将之前接收的功能函数与之前传递所有的参数全部传递进去
return currying(callback, ...iArg) // callback => 功能函数 ...iArg => 之前传递进来的所有的参数
// 这里是返回了一个 currying的调用结果, 所以相当于是返回了内层函数, 并且外层函数是接受了对应的功能函数与实际参数
}
}
}
let res = currying(fn, 'https') // 此处传递了功能函数与一个基本参数, 按照函数规则, 后续起码应该再传递够三个参数, 才能正常执行功能
let res1 = res('127.0.0.1', '80') // 此时传递了两个参数, 加上首次调用的一个参数, 现在接收到了 3个字符串, 所以应该在传递一个参数, 才能够正常执行
let str1 = res1('/a.html') // 此时传递了 一个 参数, 加上之前的三个字符串参数, 所以现在正好满足 4个参数, 所以现在就可能正常执行功能函数
console.log(str1) // https://127.0.0.1:80/a.html
let res2 = currying(fn) // 此处传递了 功能函数, 没有传递基本参数, 按照函数规则, 后续起码应该传递四个参数, 才能正常执行功能
let str2 = res2('https', 'www.XXX.com', '8080', '/a.html') // 此时传递了四个参数, 因为首次没有传递字符串, 这里就是有4个参数, 所以正常执行函数
console.log(str2) // https://www.XXX.com:8080/a.html
let res3 = currying(fn, 'https', 'www.XXX.com', '8080', '/a.html') // 此处传递了 功能函数, 与 四个后续的参数, 根据函数规则, 后续不需要传递参数即可
let str3 = res3() // 因为之前传递的参数已足够, 所以此处可以不调用
console.log(str3) // https://www.XXX.com:8080/a.html
三.函数防抖与节流
-
防抖
-
在一定时间内,快速触发同一事件,每次重新触发,都顶掉前一次事件,后一次事件为主
inp.oninput = (function (timer) { return function (e) { clearInterval(timer) timer = setTimeout(function () { console.log(`搜索了 ${e.target.value} 内容`) }, 300) } })(0)
-
-
节流
-
在一定时间内,快速触发同一事件,在规定时间内,只能触发一次,下一次必须等到规定时间结果以后才能执行
inp.oninput = (function (flag) { return function (e) { if (flag === false) return flag = false console.log(`搜索了 ${e.target.value} 内容`) setTimeout(() => { flag = true }, 300) } })(true)
-
-
自执行函数
function fn() { console.log(1) } (function () { console.log(999) })(); ; (function () { console.log(999) })() /* 自执行函数, 第一个小括号内写 函数体 第二个小括号内写 实参(会传递给第一个小括号内部的函数) */ ; (function (num) { console.log(num) })(666)四.数据劫持
数据驱动试图 1.数据劫持 将原始数据劫持出一份一模一样,听起来有点像浅拷贝 劫持出来的数据,默认是不可以修改的 语法: Object.defineProperty(那个对象 , '对象的key' , {配置项}) 配置项: 1.value 访问这个值之后,得到结果 2.writable 决定当前这个属性能否被修改,默认是false 3.enumerable 决定当前这个属性能否被枚举,决定当前这个属性能否被遍历到 4.getter 是一个函数,是一个获取器,当访问这个属性时,会执行这个函数 getter 不能和 value writable 一起使用 5.setter 是一个函数,是一个设置器,当设置这个属性是,会执行这个函数案例:
const obj = {} obj.name = 'QF666' console.log(obj) // let str = 'age' // Object.defineProperty(obj, str, {配置项}) Object.defineProperty(obj, 'age', { // value: 'QF999', // writable: true, enumerable: true, get() { // console.log('你当前访问了 这个 age 属性, 触发了 get 函数') return 'qwer' }, set(val) { console.log('你当前想要修改这个 age 属性, 修改的值 是: ', val) } }) // console.log(obj) // for (let k in obj) { // console.log(k) // } console.log(obj.age) obj.age = 100 // obj.age = 999 // console.log(obj.age)实现数据劫持:
const box = document.querySelector('#box') const obj = { name: 'QF666', age: 18 } console.log('原始对象obj:', obj) const res = {} Object.defineProperty(res, 'name', { get() { return obj.name }, set(val) { // console.log('你想要修改这个属性的值, 新值为: ', val) obj.name = val box.innerHTML = `名字: ${res.name}; 年龄: ${res.age}` } }) Object.defineProperty(res, 'age', { get() { return obj.age }, set(val) { // console.log('你想要修改这个属性的值, 新值为: ', val) obj.age = val box.innerHTML = `名字: ${res.name}; 年龄: ${res.age}` } }) // console.log('数据劫持后的 res: ', res) // console.log(res.name) // console.log(res.age) // res.name = 'QF999' // res.age = 99 // console.log(res.name) box.innerHTML = `名字: ${res.name}; 年龄: ${res.age}` res.age = 99 封装数据劫持:
const box = document.querySelector('#box') const obj = { name: '张三', age: 18 } function observer(origin, callback) { const target = {} for (let k in origin) { Object.defineProperty(target, k, { get() { return origin[k] }, set(val) { // console.log('你现在想要修改的key是' , k, '修改的值为', val) origin[k] = val callback(target) } }) } callback(target) return target } </script> <script> function fn(res) { box.innerHTML = `名字: ${res.name}; 年龄: ${res.age}` } const app = observer(obj, fn) document.querySelector('#inp').oninput = function (e) { app.age = e.target.value }
