JS高阶函数--------map、reduce、filter
一、filter
filter用于对数组进行过滤。
它创建一个新数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意: filter() 不会对空数组进行检测。
注意: filter() 不会改变原始数组。
1.语法
Array.filter(function(currentValue, indedx, arr), thisValue)
第一个参数是函数
这个回调函数的返回值是一个boolean值
当检查元素符合过滤条件的时候会返回true,函数内部会自动将这个元素加入新数组中
当不符合条件时会返回false,函数内部会过滤掉这个元素
例子1:返回数组中小于100的元素
const nums = [10, 20, 50, 101, 222,40]
let newNums = nums.filter(function (n) {
return n < 100
})
console.log(newNums); //[10, 20, 50, 40]
例子2:筛选空格
const arr = ['0',1,2,3,4,"",5,1,4,'0',""];
let arr_filter = arr.filter(function(x){
return x;/* 筛选空格 */
})
console.log(arr_filter)
例子3:去除Array
的重复元素
const arr_repeat = ['A', 'B', 'A', 'B', 'B', 'C', 'A', 'D', 'C']
let arr_filter = arr_repeat.filter(function (el, index, self) {
// console.log(self.indexOf(el))
// console.log('index',index)
return self.indexOf(el) == index })
console.log(arr_filter) //["A", "B", "C", "D"]
去除重复元素依靠的是indexOf
总是返回某个元素第一次出现的位置,后续的重复元素位置index与indexOf
返回的位置不相等,因此被filter
滤掉了。
二、map
map() 方法:原数组中的每个元素调用一个指定方法后,返回返回值组成的新数组。
const nums = [2, 4, 6, 8, 10]
newNums = nums.map(function (n) {
return n*2
})
console.log(newNums)
三、reduce
reduce函数对数组中的所有内容进行汇总。
reduce()
把一个函数作用在这个Array
的[x1, x2, x3...]
上,这个函数必须接收两个参数,reduce()
把结果继续和序列的下一个元素做累积计算,其效果就是:
[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)
语法:
arr.reduce(callback,[initialValue])
第一个参数是回调函数
这个回调函数可以接收四个参数
previousValue (第一项的值或者上一次叠加的结果值,或者是提供的初始值(initialValue))
currentValue (数组中当前被处理的元素)
index (当前元素在数组中的索引)
array (数组本身)
initialValue (作为第一次调用 callback 的第一个参数,可以控制返回值的格式)不传默认为0
例子1:数组求和
const arr = [1, 2, 3, 4, 5]
let sum = arr.reduce(function (pre, cur) {
console.log(pre, cur) //输出的是第一项的值或上一次叠加的结果,正在被处理的元素
return pre + cur
})
console.log(sum) //
1 2
3 3
6 4
10 5
15
例子2:不要使用JavaScript内置的parseInt()函数,利用map和reduce操作实现一个string2int()函数
思路:1.先把字符串13579先变成Array——[1, 3, 5, 7, 9]
2.再利用reduce()就可以写出一个把字符串转换为Number的函数。
const s = '13579'
function string2int(s) {
let arr = s.split('').map(function(x){
return +x;
})
console.log(arr) //[1, 3, 5, 7, 9]
let arr_reduce = arr.reduce(function(prev,res){
console.log(prev, res)
return prev*10+res;
})
console.log(arr_reduce) //
return arr_reduce }
string2int(s)
1.split() 方法用于把一个字符串分割成字符串数组。
格式:
stringObject.split(separator,howmany)
separator 必需。字符串或正则表达式,从该参数指定的地方分割 stringObject。如果是空字符串”,按每个单词分割
howmany 可选。该参数可指定返回的数组的最大长度。如果设置了该参数,返回的子串不会多于这个参数指定的数组。如果没有设置该参数,整个字符串都会被分割,不考虑它的长度。
2.parsenInt和+
js提供了parseInt()和parseFloat()两个转换函数。前者把值转换成整数,后者把值转换成浮点数。
在字符串前面输入‘+’也能将字符转化成数值,输出如下:
1 3
13 5
135 7
1357 9
13579
例子3:求一串字符串中每个字母出现的次数
暂时不会
参考:
https://www.cnblogs.com/jianxian/p/10582683.html
https://blog.csdn.net/baidu_36065997/article/details/79079880
JS高阶函数--------map、reduce、filter的更多相关文章
- python--函数式编程 (高阶函数(map , reduce ,filter,sorted),匿名函数(lambda))
1.1函数式编程 面向过程编程:我们通过把大段代码拆成函数,通过一层一层的函数,可以把复杂的任务分解成简单的任务,这种一步一步的分解可以称之为面向过程的程序设计.函数就是面向过程的程序设计的基本单元. ...
- JavaScript高阶函数 map reduce filter sort
本文是笔者在看廖雪峰老师JavaScript教程时的个人总结 高阶函数 一个函数就接收另一个函数作为参数,这种函数就称之为高阶函数 1.高阶函数之map: ...
- Python 函数式编程 & Python中的高阶函数map reduce filter 和sorted
1. 函数式编程 1)概念 函数式编程是一种编程模型,他将计算机运算看做是数学中函数的计算,并且避免了状态以及变量的概念.wiki 我们知道,对象是面向对象的第一型,那么函数式编程也是一样,函数是函数 ...
- Python学习 Day 5 高阶函数 map/reduce filter sorter 返回函数 匿名函数 装饰器 偏函数
高阶函数Higher-orderfunction 变量可以指向函数 >>> abs #abs(-10)是函数调用,而abs是函数本身 <built-in function ab ...
- 函数式编程 高阶函数 map&reduce filter sorted
函数式编程 纯函数:没有变量的函数 对于纯函数而言:只要输入确定,那么输出就是确定的.纯函数是没有副作用的. 函数式编程:允许把函数本身作为参数传入另一个函数,还允许返回一个函数 高阶函数:一个函数的 ...
- js 高阶函数 map reduce
map() var arr = [1,3,4]; function a(x){ return x*x; } //map可以将一个函数作为参数执行,将数组中的值,依次使用a函数处理: return ar ...
- Python高阶函数_map/reduce/filter函数
本篇将开始介绍python高阶函数map/reduce/filter的用法,更多内容请参考:Python学习指南 map/reduce Python内建了map()和reduce()函数. 如果你读过 ...
- 辅助函数和高阶函数 map、filter、reduce
辅助函数和高阶函数 map.filter.reduce: 一.辅助函数:(1-1)响应式函数 (数组更新检测): push() pop() shift() unshift() ...
- JavaScript高阶函数map/reduce、filter和sort
map() 举例说明,比如我们有一个函数f(x)=x²,要把这个函数作用在一个数组[1,2,3,4,5,6,7,8,9]上. 由于map()方法定义在JavaScript的Array中,我们调用Arr ...
- js高阶函数map和reduce
map 举例说明,比如我们有一个函数f(x)=x2,要把这个函数作用在一个数组[1, 2, 3, 4, 5, 6, 7, 8, 9]上,就可以用map实现如下: 由于map()方法定义在JavaScr ...
随机推荐
- C 语言的函数 - 内存分析
函数基本概念 Linux 中,函数在内存的代码段(code 区),地址比较靠前. 函数定义 C 语言中,函数有三个要素:入参.返回值.函数名,缺一不可.函数使用前必须先声明,或者在使用之前定义. 函数 ...
- css随笔记(持续更新)
/*DIV鼠标穿透*/ div{pointer-events:none;} /*清除IE11默认×*/ input::-ms-clear{display:none;} 使用伪类写边框部分三角 右上角三 ...
- vue 格式化时间的插件库
格式化时间的插件库 点击进入 moment.js网址 ,在这里可以找到需要引入的script标签 点击进入 moment.js的文档 在文档中可以找到对应的格式和例子 此文来源于: https://w ...
- 2019第二周总结.Java
本学期开始学习Java课程了,首先我先说说学习Java的感觉吧,它不像C语言程序设计,但是又有语言开发的共同点.学Java语言重点是面向对象的程序设计,更加的适应生活需要和计算机开发的需要. 总的来讲 ...
- vue router应用及总结
编写一个小的demo,对router基础的应用学习和理解. 效果图示: 说明: 点击About在右边显示相关信息. 说明: 点击Home,在下边显示相关信息,且Home下有两个路由链接,分别对应各自的 ...
- PyCharm中运行同一个python程序时选择平行窗口运行
问题描述 当我们进行Socket编程时,客户端可能有多个,原则上如果有n个客户端,那么我们就要编辑n客户端的代码.然而其实我们每个客户端的代码都是相同,如果编辑n遍,将会相当的浪费空间. 解决办法 学 ...
- PY个快速模
既然这道题是数学题,那就用 PY 吧! 学点东西: print 可以和 c++ 中的 printf 一样快乐的输出格式 另外一点: 这道题可能数据不够强?想想应该有一个 \(0^0 ~\%~ k =0 ...
- spark数据结构之RDD
学习spark,RDD是一个逃不过去的话题,那么接下来我们看看RDD 1.什么是RDD? RDD叫做弹性分布式数据集,是Spark中最基本的数据抽象,代表一个不可变.可分区.里面元素可以并行计算的集合 ...
- 事件流程以及dom2级事件绑定
事件流程分为三个阶段:捕获阶段.目标阶段.冒泡阶段. 捕获阶段:事件从最顶层元素开始执行,一层层往下,直到精确元素. 目标阶段:事件在精确元素上执行. 冒泡阶段:事件从精确元素开始执行,一层层往上,直 ...
- 使用`html-webpack-plugin`插件配置启动页面
由于使用`--contentBase`指令的过程比较繁琐,需要指定启动的目录,同时还需要修改index.html中script标签的src属性,所以推荐大家使用`html-webpack-plugin ...