分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 运营维护

高阶函数简述 js

发布时间:2023-09-06 02:18责任编辑:郭大石关键词:js

1、简述

高阶函数似乎是一种先进编程的的技术。然而,并不是。

高阶函数其实就是将函数作为参数或者返回值的函数。其中作为参数的函数一般是回调函数。

2、例子

(1)最简单的例子

大家都熟悉数组的sort方法。

<!DOCTYPE html><html lang="zh"> ???<head> ???????<meta charset="UTF-8" /> ???????<meta name="viewport" content="width=device-width, initial-scale=1.0" /> ???????<meta http-equiv="X-UA-Compatible" content="ie=edge" /> ???????<title>高阶函数</title> ???</head> ???<body> ???????<script type="text/javascript"> ???????????let arr = [1,2,4,3]; ???????????arr.sort((a,b)=>{return a-b}) ???????????console.log(arr) ???????</script> ???</body></html>

sort方法的参数就是一个函数(回调函数),这个回调函数决定了如何比较数组中的任意两个元素。

(2)字符换大写

实现一:

<!DOCTYPE html><html lang="zh"> ???<head> ???????<meta charset="UTF-8" /> ???????<meta name="viewport" content="width=device-width, initial-scale=1.0" /> ???????<meta http-equiv="X-UA-Compatible" content="ie=edge" /> ???????<title>高阶函数</title> ???</head> ???<body> ???????<script type="text/javascript"> ???????????let arr = [‘abc‘, ‘def‘], ???????????????arrNew = []; ???????????for(let i = 0; i < arr.length; i++) { ???????????????arrNew[i] = arr[i].toUpperCase() ???????????} ???????????console.log(arrNew) ???????</script> ???</body></html>

实现二:

<!DOCTYPE html><html lang="zh"> ???<head> ???????<meta charset="UTF-8" /> ???????<meta name="viewport" content="width=device-width, initial-scale=1.0" /> ???????<meta http-equiv="X-UA-Compatible" content="ie=edge" /> ???????<title>高阶函数</title> ???</head> ???<body> ???????<script type="text/javascript"> ???????????let arr = [‘abc‘, ‘def‘], ???????????????arrNew = []; ???????????arrNew = arr.map(val => { ???????????????return val.toUpperCase() ???????????}) ???????????console.log(arrNew) ???????</script> ???</body></html>

(3)高阶函数实现

若代码中出现重复或者类似的代码,就可以使用高阶函数。如产生一个包含数字的字符串:

<!DOCTYPE html><html lang="zh"> ???<head> ???????<meta charset="UTF-8" /> ???????<meta name="viewport" content="width=device-width, initial-scale=1.0" /> ???????<meta http-equiv="X-UA-Compatible" content="ie=edge" /> ???????<title>高阶函数</title> ???</head> ???<body> ???????<script type="text/javascript"> ???????????let digits = ‘‘ ???????????for (let i=0;i<10;i++) { ???????????????digits += i ???????????} ???????????console.log(digits) ???????</script> ???</body></html>

使用高阶函数实现:

<!DOCTYPE html><html lang="zh"> ???<head> ???????<meta charset="UTF-8" /> ???????<meta name="viewport" content="width=device-width, initial-scale=1.0" /> ???????<meta http-equiv="X-UA-Compatible" content="ie=edge" /> ???????<title>高阶函数</title> ???</head> ???<body> ???????<script type="text/javascript"> ???????????let digits = ‘‘ ???????????function buildString(n, callback) { ???????????????let val = ‘‘; ???????????????for(let i = 0; i < n; i++) { ???????????????????val += callback(i) ???????????????} ???????????????return val ???????????} ???????????digits = buildString(10, i => { ???????????????return i ???????????}) ???????????console.log(digits) ???????</script> ???</body></html>

高阶函数简述 js

原文地址:https://www.cnblogs.com/mengfangui/p/9812654.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved