首页 > 编程语言 >JavaScript(三)Array的高阶函数

JavaScript(三)Array的高阶函数

时间:2023-07-03 20:34:41浏览次数:35  
标签:返回 arr JavaScript return 函数 元素 Array 高阶

map、reduce

  • map:map()方法定义在JavaScript的Array中,接收一个函数对象作为参数,函数定义运算规则,对array中的每个元素进行运算,结果是一个新的array。

function pow(x) {
    return x * x;
}
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var results = arr.map(pow); // [1, 4, 9, 16, 25, 36, 49, 64, 81]
console.log(results);
  • Array的reduce()把一个函数作用在这个Array[x1, x2, x3...]上,这个函数必须接收两个参数,reduce()把结果继续和序列的下一个元素做累积计算

// 对一个array求和
var arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) {
    return x + y;
}); // 25

filter

filter用于把Array的某些元素过滤掉,然后返回剩下的元素。

filter()把传入的函数依次作用于每个元素,然后根据返回值是true还是false决定保留还是丢弃该元素。

sort

JavaScript的Arraysort()方法就是用于排序的,sort()方法也是一个高阶函数,它可以接收一个比较函数来实现自定义的排序。

通常规定,对于两个元素xy,如果认为x < y,则返回-1,如果认为x == y,则返回0,如果认为x > y,则返回1,这样,排序算法就不用关心具体的比较过程,而是根据比较结果直接排序。

var arr = [10, 20, 1, 2];
arr.sort(function (x, y) {
    if (x < y) {
        return -1;
    }
    if (x > y) {
        return 1;
    }
    return 0;
});
console.log(arr); // [1, 2, 10, 20]

其他高阶函数

  • every()方法可以判断数组的所有元素是否满足测试条件。

  • find()方法用于查找符合条件的第一个元素,如果找到了,返回这个元素,否则,返回undefined

  • findIndex()find()类似,也是查找符合条件的第一个元素,不同之处在于findIndex()会返回这个元素的索引,如果没有找到,返回-1

  • forEach()map()类似,它也把每个元素依次作用于传入的函数,但不会返回新的数组。forEach()常用于遍历数组,因此,传入的函数不需要返回值:

标签:返回,arr,JavaScript,return,函数,元素,Array,高阶
From: https://www.cnblogs.com/yjh1995/p/17523946.html

相关文章

  • JavaScript(一)基础
    JS引入到文件嵌入到html文件中,在<header>或<body>中使用<script><script> vari=10; console.log(i);</script>引入JS文件,在<header>或<body>中使用<script><scriptsrc="./index3_script.js"type="text/j......
  • 高阶函数, 装饰器的编写
    符合如下之一特点的即为高阶函数:接受函数名作为形参返回值包含函数名错误写法:  装饰器函数  原理: 正确的装饰器写法: ......
  • JavaScript 中 object 的几个方法:entries,values,keys 对比
    在JavaScript中,对象(Object)是一种无序的键值对集合。以下是entries,values和keys这三个对象方法的比较: entries()方法:返回一个包含对象的键值对的数组。每个键值对都是一个数组,包含两个元素,第一个元素是键名,第二个元素是对应的值。1constobj={a:1,b:2,c:3};2conso......
  • HTML+CSS+JavaScript基础
    1、HTML(HypertextMarkupLanguage,超文本标记语言),用来向浏览器说明内容的结构、2、DOM(DocumentObjectModel,文档对象模型)指的是HTML标签的层次结构。每一对HTML标签(有的时候是一个标签)都是一个元素。3、CSS(CascadingStyleSheets,层叠样式表),控制DOM元素的视觉外观......
  • JavaScript 拖拽
    <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <styletype="text/css"> #box1{ width:100px; height:100px; background-color:red; position:a......
  • JavaScript 事件的绑定
    <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <scripttype="text/javascript"> window.onload=function(){ /* *点击按钮以后弹出一个内容 */ //获取按钮......
  • JavaScript 事件的传播
    <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <styletype="text/css"> #box1{ width:300px; height:300px; background-color:yellowgreen; } ......
  • JavaScript 事件的委派
    <!DOCTYPEhtml><html> <head> <metacharset="utf-8"/> <title></title> <scripttype="text/javascript"> window.onload=function(){ varu1=document.getElementById("......
  • 如何在JavaScript中使用Promise.allSettled()
    您是否曾经在JavaScript中使用过Promise,并且当有人拒绝并毁掉一切时感到沮丧?你编写了一些基于Promise的代码,一切都进展顺利,然后繁荣——一个小小的Promise被拒绝,整个链条就会崩溃。你的代码逐渐停止,你想知道为什么JavaScript不能忽略这个小问题并继续它的快乐之路。好......
  • C++面试八股文:std::array如何实现编译器排序?
    C++面试八股文:std::array如何实现编译器排序?某日二师兄参加XXX科技公司的C++工程师开发岗位第25面:面试官:array熟悉吗?二师兄:你说的是原生数组还是std::array?面试官:你觉得两者有什么区别?二师兄:区别不是很大,原生数组(非动态数组)和std::array都在栈上开辟空间,初始化的时候......