高阶函数简述 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方法的参数就是一个函数（回调函数），这个回调函数决定了如何比较数组中的任意两个元素。
Array的sort方法源码实现（使用了插入排序和快速排序）：
function ArraySort(comparefn) {
// 使用款速排序算法
// 对于长度小于22的数组，使用插入排序算法
//判断comparefn是不是一个函数
var custom_compare = IS_FUNCTION(comparefn);
function Compare(x, y) {
// 假设comparefn（若存在的话）是一致的比较函数。
// 如果不是，则假设假设comparefn函数是任意的（通过ECMA 15.4.4.11）
if(x === y) return 0;
if(custom_compare) {
// 不要直接调用comparefn以避免暴露内置的全局对象。.
return comparefn.call(null, x, y);
}
x = ToString(x);
y = ToString(y);
if(x == y) return 0;
else return x < y ? -1 : 1;
};
//插入排序
function InsertionSort(a, from, to) {
for(var i = from + 1; i < to; i++) {
var element = a[i];
// Pre-convert the element to a string for comparison if we know
// it will happen on each compare anyway.
var key =
(custom_compare || % _IsSmi(element)) ? element : ToString(element);
// place element in a[from..i[
// binary search
var min = from;
var max = i;
// The search interval is a[min..max[
while(min < max) {
var mid = min + ((max - min) >> 1);
var order = Compare(a[mid], key);
if(order == 0) {
min = max = mid;
break;
}
if(order < 0) {
min = mid + 1;
} else {
max = mid;
}
}
// place element at position min==max.
for(var j = i; j > min; j--) {
a[j] = a[j - 1];
}
a[min] = element;
}
}
//快速排序
function QuickSort(a, from, to) {
// 若数组长度小于22的话，使用插入排序。
if(to - from <= 22) {
InsertionSort(a, from, to);
return;
}
var pivot_index = $floor($random() * (to - from)) + from;
var pivot = a[pivot_index];
// Pre-convert the element to a string for comparison if we know
// it will happen on each compare anyway.
var pivot_key =
(custom_compare || % _IsSmi(pivot)) ? pivot : ToString(pivot);
// Issue 95: Keep the pivot element out of the comparisons to avoid
// infinite recursion if comparefn(pivot, pivot) != 0.
a[pivot_index] = a[from];
a[from] = pivot;
var low_end = from; // Upper bound of the elements lower than pivot.
var high_start = to; // Lower bound of the elements greater than pivot.
// From low_end to i are elements equal to pivot.
// From i to high_start are elements that haven't been compared yet.
for(var i = from + 1; i < high_start;) {
var element = a[i];
var order = Compare(element, pivot_key);
if(order < 0) {
a[i] = a[low_end];
a[low_end] = element;
i++;
low_end++;
} else if(order > 0) {
high_start--;
a[i] = a[high_start];
a[high_start] = element;
} else { // order == 0
i++;
}
}
QuickSort(a, from, low_end);
QuickSort(a, high_start, to);
}
var old_length = ToUint32(this.length);
if(old_length < 2) return this;
%
RemoveArrayHoles(this);
var length = ToUint32(this.length);
// 将未定义的元素移动到数组的末尾.
for(var i = 0; i < length;) {
if(IS_UNDEFINED(this[i])) {
length--;
this[i] = this[length];
this[length] = void 0;
} else {
i++;
}
}
QuickSort(this, 0, length);
//如果this是一个数组，我们只改变了这个数组的长度。 如果this不是数组，则不允许设置此对象的长度，因为这可能会引入新的length属性。
if(IS_ARRAY(this)) {
this.length = old_length;
}
return this;
}
（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的更多相关文章
- 【js】高阶函数是个什么？
所谓高阶函数,就是函数中可以传入另一个函数作为参数的函数. 简单一张图,方便理解全文. function 高阶函数(函数){} 这是一个高阶函数,f是传入的函数作为参数. 其实高阶函数用的很多.其实平 ...
- React.js高阶函数的定义与使用
/* 高阶函数的简单定义与使用 一: 先定义一个普通组件 二: 用function higherOrder(WrappendComponent) { return } 将组件包裹起来,并用export ...
- js高阶函数
我是一个对js还不是很精通的选手: 关于高阶函数详细的解释 一个高阶函数需要满足的条件(任选其一即可) 1:函数可以作为参数被传递 2:函数可以作为返回值输出 吧函数作为参数传递,这代表我们可以抽离一 ...
- [Node.js] 闭包和高阶函数
原文地址:http://www.moye.me/2014/12/29/closure_higher-order-function/ 引子 最近发现一个问题:一部分写JS的人,其实对于函数式编程的概念并 ...
- js高阶函数应用—函数防抖和节流
高阶函数指的是至少满足下列两个条件之一的函数: 1. 函数可以作为参数被传递:2.函数可以作为返回值输出: javaScript中的函数显然具备高级函数的特征,这使得函数运用更灵活,作为学习js必定会 ...
- js 高阶函数 闭包
摘自 https://www.cnblogs.com/bobodeboke/p/5594647.html 建议结合另外一篇关于闭包的文章一起阅读:http://www.cnblogs.com/bob ...
- 理解运用JS的闭包、高阶函数、柯里化
JS的闭包,是一个谈论得比较多的话题了,不过细细想来,有些人还是理不清闭包的概念定义以及相关的特性. 这里就整理一些,做个总结. 一.闭包 1. 闭包的概念 闭包与执行上下文.环境.作用域息息相关 执 ...
- JS高阶函数的理解（函数作为参数传递）
JS高阶函数的理解 高阶函数是指至少满足下列条件之一的函数. · 函数可以作为参数被传递 · 函数可以作为返回值输出 一个例子,我们想在页面中创建100个div节点,这是一种写法.我们发现并不是所有用 ...
- JS的闭包、高阶函数、柯里化
本文原链接:https://cloud.tencent.com/developer/article/1326958 https://cloud.tencent.com/developer/articl ...
随机推荐
- luoguP4284 [SHOI2014]概率充电器 概率期望树形DP
这是一道告诉我概率没有想象中那么难的题..... 首先,用期望的线性性质,那么答案为所有点有电的概率和 发现一个点的有电的概率来源形成了一个"或"关系,在概率中,这并不好计算... ...
- win7环境下一次浅谈栈溢出
在我们的生活中,存在的许许多多的漏洞,下面像大家介绍的就是平时比较常见的栈溢出漏洞的实践过程. 下面,我们用一个非常简单的例子来让大家对栈溢出漏洞有个直观的认识. 这是一个简单的密码验证程序,但因为代 ...
- [TC6194]AllWoundUp
[TC6194]AllWoundUp 题目大意: 有\(A\)和\(B\)两个人.\(A\)在平面上游走,\(B\)会一直盯着\(A\)看,站在\(x\)轴某个位置上不动,并随着\(A\)的运动旋转身 ...
- 【9.2校内测试】【开学祭】【exgcd】【树规（背包】【模拟】
比较裸的$exgcd$的应用? $exgcd$可以算出在$x$和$y$分别是最小正整数时的解.注意在这里因为有$a(x+\frac{b}{d})+b(y-\frac{a}{d})=c$,$d=gcd( ...
- JavaScript设计模式与开发实践——读书笔记1.高阶函数(下)
上部分主要介绍高阶函数的常见形式,本部分将着重介绍高阶函数的高级应用. 1.currying currying指的是函数柯里化,又称部分求值.一个currying的函数会先接受一些参数,但不立即求值, ...
- 读书笔记_Effective_C++_条款三十：了解inline的里里外外
学过基本程序课的同学都知道,inline是内联的关键字,它可以建议编译器将函数的每一个调用都用函数本体替换.这是一种以空间换时间的做法.把每一次调用都用本体替换,无疑会使代码膨胀,但可以节省函数调用的 ...
- Backbone.js 的最佳应用场景有哪些？#zhihu#
这段时间,想再次了解下backbone js的相关知识,就把一些认为不错的拿过来了: 新版的有道笔记 Web 版(http://note.youdao.com)也使用了 Backbone.就像其他答案 ...
- Vue学习记录-接口通信（数据请求）
这一篇,把前两天实践的“数据请求”部分总结一下.从最终的结果来看,配置非常的简单,使用非常的简单,也非常的灵活,同时也存在一个很头疼的问题,这个问题可以解决,但是解释不了(功力尚浅). 选型 可选项: ...
- 【spring cloud】子模块module -->导入一个新的spring boot项目作为spring cloud的一个子模块微服务，怎么做/或者 每次导入一个新的spring boot项目，IDEA不识别子module，启动类无法启动/右下角没有蓝色图标
如题:导入一个新的spring boot项目作为spring cloud的一个子模块微服务,怎么做 或者说每次导入一个新的spring boot项目,IDEA不识别,启动类无法启动,怎么解决 下面分别 ...
- appium+python自动化26-模拟手势点击坐标（tap）
# 前言: 有时候定位元素的时候,你使出了十八班武艺还是定位不到,怎么办呢?(面试经常会问) 那就拿出绝招:点元素所在位置的坐标 tap用法 1.tap是模拟手指点击,一般页面上元素 的语法有两个参 ...