网站首页 > 技术文章 正文
我的读者们,新年快乐,希望新的一年里大家继续支持,我会为大家奉上更多更好的文章与视频。
关注留言点赞,带你了解最流行的软件开发知识与最新科技行业趋势。
高阶函数是编程中一个重要且强大的概念,它允许您编写更灵活和模块化的代码。在 JavaScript 中,它们是使用其他回调函数的函数,可以将它们作为参数或将它们作为输出返回。
在 JavaScript 中我们有一些高阶数组函数,它们包括:
- Map 函数:这是一个高阶函数,它接受一个数组和一个函数作为参数,并返回一个新的修改后的数组,该数组是将函数应用于前一个数组的每个元素的结果。
let array1 = [3, 5, 17, 30];
//create function
function multiply(p1) {
return p1 * 2;
}
//pass function as an argument
const map1 = array1.map(multiply);
console.log(map1);
// expected output:
Array [6,10,34,60]
- Filter 函数:这是一个高阶函数,它接受一个数组和一个函数作为参数,但在这种情况下只返回一个新的元素数组,这些元素在函数中传递了给定的条件。
let array1 = [3, 5, 17, 30];
//filters out only numbers greater than 6
const result = array1.filter(x => x > 6);
console.log(result);
// expected output:
Array [17,30]
- Reduce 函数:这是一个高阶函数,它接受一个数组和一个函数作为参数,但它只返回一个值,该值是按特定顺序将函数应用于数组的每个元素的结果。这可能会造成混淆,所以让我们使用直接来自 MDN 的常见且简单的示例
MDN 网络文档
MDN Web Docs 站点提供有关开放式 Web 技术的信息,包括用于网站和渐进式 Web 应用程序的 HTML、CSS 和 API。
developer.mozilla.org解释
const array1 = [1, 2, 3, 4];
const initialValue = 0;// 0 + 1 + 2 + 3 + 4
const sumWithInitial = array1.reduce( (accumulator, currentValue) => accumulator + currentValue, initialValue);
console.log(sumWithInitial);
//Expected output: 10
reducer 逐个元素遍历数组,在每一步将当前数组值添加到上一步的结果(此结果是所有先前步骤的运行总和)——直到没有更多元素要添加。在这里阅读更多..
- Sort 函数:这是一个高阶函数,它接受一个数组和一个函数作为参数,并返回对同一数组的引用,现在根据将函数应用于每个元素的结果进行排序。但是,这可以默认使用(它将所有元素视为字符串并按升序对它们进行排序)而无需函数参数,例如..
const names = ['Michael','Amy', 'John', 'Faith', 'Dan'];
//the sort function in defaultnames.sort();
console.log(names);
// expected output:
Array ["Amy", "Dan", "Faith", "John", "Michael"]
但是,当我们需要对字符串以外的其他内容进行排序时,例如数字,那么我们将需要添加一个函数来处理它。这是对数字进行排序的示例
const array1 = [1, 30, 4, 21, 10000];
//function that sorts by going through and return the lowest of two numbers
function numSort (a,b) { return (a - b);}
//calling the sort function with the numSort callback function
array1.sort(numSort);
console.log(array1);
//Expected result : [1,4,21,30,100000]
- For Each 函数:这是一个高阶函数,它将一个数组和一个函数作为参数,并将该函数应用于数组的每个元素。它不返回一个新数组,而只是对同一个数组的每个元素执行一个操作。
const foods = ['pizza', 'spaghetti', 'food from Chowopa.com', 'burgers'];
//applies this function on each element in the foods array
foods.forEach((food) => {
let statement = `I am hungry, maybe I'll get ${food}`;
console.log(statement);
});
高阶函数为您提供了一种更简单的方法来编写更简洁和更具表现力的代码,并且还可以摆脱编写复杂循环或条件语句的需要。
我希望你觉得这很有用。再见。
- 上一篇: 分享一个2023年前端入门最好的教程网站
- 下一篇: 深入浅出:WebSocket 鉴权的实践
猜你喜欢
- 2024-11-18 再不学HTML5就真的跟不上时代啦
- 2024-11-18 免费学习 Reactjs 的最佳场所
- 2024-11-18 蜜蜂采集器2308版本对HTTP/2和HTTP/3的功能支持
- 2024-11-18 Three.js的学习资料和学习计划,统统安排上
- 2024-11-18 for-in与不可枚举
- 2024-11-18 html简单教程
- 2024-11-18 如何学习建网站-建网站需要准备什么呢?
- 2024-11-18 7.HTML超链接
- 2024-11-18 开发人员要点:JavaScript console methods
- 2024-11-18 元素出现在视图中时触发的js
- 标签列表
-
- content-disposition (47)
- nth-child (56)
- math.pow (44)
- 原型和原型链 (63)
- canvas mdn (36)
- css @media (49)
- promise mdn (39)
- readasdataurl (52)
- if-modified-since (49)
- css ::after (50)
- border-image-slice (40)
- flex mdn (37)
- .join (41)
- function.apply (60)
- input type number (64)
- weakmap (62)
- js arguments (45)
- js delete方法 (61)
- blob type (44)
- math.max.apply (51)
- js (44)
- firefox 3 (47)
- cssbox-sizing (52)
- js删除 (49)
- js for continue (56)
- 最新留言
-