学习笔记——高阶函数

高阶函数

什么是高阶函数
  • 高阶函数 (Higher-order function)
    • 可以把函数作为参数传递给另一个函数
    • 可以把函数作为另一个函数的返回结果
  • 函数作为参数

模拟 forEach

// forEach 
function forEach (array, fn) { 
	for (let i = 0; i < array.length; i++) { 
		fn(array[i]) 
	} 
}

let arr = [1, 3, 4, 7, 8]
forEach(arr, function (item) {
	console.log(item)
})

模拟 filter

// filter 
function filter (array, fn) {
	let results = [] for (let i = 0; i < array.length; i++) {
		if (fn(array[i])) { 
			results.push(array[i]) 
		} 
	}
	return results 
}

let arr = [1, 3, 4, 7, 8]

// 过滤取偶数
let returnArr = filter(arr, function (item) {
	return item % 2 === 0
})
console.log(returnArr)
  • 函数作为返回值
function makeFn () { 
	let msg = 'Hello function' 
	return function () { 
		console.log(msg) 
	} 
}

makeFn()()   // 调用 makeFn 函数返回的函数

// 或
const fn = makeFn() 
fn()

模拟 once 函数

// once 
function once (fn) { 
	let done = false 
	return function () { 
		if (!done) { 
			done = true 
			// 使用 apply 来调用 fn 函数, 把其中的 this 传递过来,方便改变 this
			// 通过 arguments 传递 return 的 function 的参数给 fn 函数 
			return fn.apply(this, arguments) 
		} 
	}
}

// 声明 pay 函数 调用 once
let pay = once(function (money) { 
	console.log(`支付:${money} RMB`) 
})

// 调用 pay 函数
// 只会支付一次 
pay(5) 
pay(5) 
pay(5)
使用高阶函数的意义
  • 抽象可以帮我们屏蔽细节,只需要关注与我们的目标
  • 高阶函数是用来抽象通用的问题
  • 使代码写起来更加简洁
常用高阶函数
  • forEach
  • map
  • filter
  • every
  • some
  • find/findIndex
  • reduce
  • sort
    ……

模拟 map() 函数

const map = (array, fn) => {
	let results = []
	for (let value of array) {
		results.push(fn(value))
	}
	return results
}

let arr = [1, 2, 3, 4]
arr = map(arr, (item) => item * item)
console.log(arr)

模拟 every() 函数

const every = (array, fn) => {
	let result = true
	for (let value of array) {
		result = fu(value)
		if (!result) {
			break
		}
	}
	return result
}

let arr = [9, 12, 13]
let r = every(arr, (item) => item > 10)
console.log(r)

( js中break,return,continue区别 )

模拟 some() 函数

const some = (array, fn) {
	let result = false
	for (let value of array) {
		result = fn(value)
		if (result) {
			break
		}
	}
	return result
}

let arr = [1, 3, 4, 5]
let r = some(arr, (item) => item % 2 === 0)
console.log(r)
闭包
  • 闭包 (Closure):函数和其周围的状态(词法环境)的引用捆绑在一起形成闭包。
    • 可以在另一个作用域(例如函数C)中调用一个函数(函数A)的内部函数(函数B)并访问到该函数(函数A)的作用域中的成员
  • 闭包的本质:函数在执行的时候会放到一个执行栈上当函数执行完毕之后会从执行栈上移除,但是
    堆上的作用域成员因为被外部引用不能释放
    ,因此内部函数依然可以访问外部函数的成员
// 闭包 
function fnB () { 
	let msg = 'Hello function' 
	return function () {  // fnC
		console.log(msg) 
	} 
}

const fnA = fnB() 
fnA()
  • 闭包案例
// 生成计算数字的多少次幂的函数
function makePower (power) {
	return function (number) {
		return Math.pow(number, power)
	}
}

// 2次方
let power2 = makePower(2)
// 3次方
let power3 = makePower(3)

console.log(power2(2))
console.log(power2(5))
console.log(power3(5))

在这里插入图片描述
运行以上代码,在开发者工具中打断点调试,查看函数运行过程。

Call Stack 为当前站点调用函数,可以在途中看到调用两个匿名函数

Scope 为作用域,Local 为局部作用域(里面的变量是 number,this 指向是 Window)

Closure 为闭包(里面是跟闭包相关的变量 power ),跟闭包相关的外部函数是 makePower

通过 let 定义的变量,他的作用域可以在 Script 找到,通过 var 定义的变量会挂载在 Global 全局对象上

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,关于 jQuery 的事件,我可以和你分享一些学习笔记。 1. 绑定事件 在 jQuery 中,我们可以通过以下方式来绑定事件: ``` $(selector).event(function(){ // 事件处理程序 }) ``` 其中,`selector` 表示要绑定事件的元素,`event` 表示要绑定的事件类型,比如 `click`、`mouseover` 等等。事件处理程序则是在事件触发时要执行的代码块。 2. 多个事件绑定 我们可以通过 `on()` 方法来同时绑定多个事件: ``` $(selector).on({ event1: function(){ // 事件处理程序1 }, event2: function(){ // 事件处理程序2 } }) ``` 这样,当 `event1` 或 `event2` 中任意一个事件触发时,对应的处理程序都会被执行。 3. 解除事件 如果需要解除某个元素的事件处理程序,可以使用 `off()` 方法: ``` $(selector).off(event); ``` 其中,`event` 表示要解除的事件类型。如果不指定事件类型,则会解除该元素上所有的事件处理程序。 4. 事件委托 在 jQuery 中,我们可以使用事件委托来提高性能。事件委托是指将事件绑定到父元素上,而不是绑定到子元素上,然后通过事件冒泡来判断是哪个子元素触发了该事件。这样,当子元素数量较多时,只需要绑定一次事件,就可以监听到所有子元素的事件。 ``` $(selector).on(event, childSelector, function(){ // 事件处理程序 }) ``` 其中,`selector` 表示父元素,`event` 表示要绑定的事件类型,`childSelector` 表示要委托的子元素的选择器,事件处理程序则是在子元素触发事件时要执行的代码块。 以上是 jQuery 中事件的一些基本操作,希望对你有所帮助。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值