map、filter和reduce

简介: map、filter和reduce

map

map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值

map() 方法按照原始数组元素顺序依次处理元素。

例如可以返回原始数组中每个元素的平方:

let arr = [4, 9, 16, 25]
 let arr2 = arr.map( (item) =>      //唯一的参数是数组中的每个值
  Math.pow(item,2)                  //调用求平方方法
 )  
 console.log(arr2)  //[16, 81, 256, 625]
复制代码

也可返回一个数组的平方根:

let arr = [4, 9, 16, 25]
 let arr2 = arr.map( (item) =>      
  Math.sqrt(item)         //调用求平方根方法      
 )  
 console.log(arr2)   // [2, 3, 4, 5]
复制代码

注意:** map() 不会改变原始数组。

filter

filter() 方法创建一个新数组, 新数组中的元素是通过检查指定数组中符合条件的所有元素。

过滤掉太短的字符串:

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => 
  word.length > 6           //过滤掉小于6个字母的
);
console.log(result);      // ["exuberant", "destruction", "present"]
复制代码

过滤掉成绩不及格的分数:

let scores = [95,91,59,55,42,82,72,85,67,66,55,91]
let scores2 = scores.filter( item =>  
  item >60
)
console.log(scores2)   //[95, 91, 82, 72, 85, 67, 66, 91]
复制代码

注意:** filter() 也不会改变原始数组。

reduce

reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。

语法:

array.reduce( ( 初始值,当前元素, 当前元素的索引, 当前元素所属的数组对象) =>{
  //代码
}, 传递给函数的初始值)
必需。初始值, 或者计算结束后的返回值。    *******
必需。当前元素 **********             
可选。当前元素的索引
可选。当前元素所属的数组对象
可选。传递给函数的初始值   **********              
复制代码

算出所有奇数之和:

let scores = [95,91,59,55,42,82,72,85,67,66,55,91]
let sum = scores.reduce((sum, item)=>{ //sum是每轮相加后的保存者 item是当前元素
  if(item % 2){         
    return  sum += item         //如果是奇数,返回相加之和
  } 
  return sum   
},0)             //此0是规定sum的初始值               
console.log(sum)
复制代码

注意:就算不是奇数,我们也要返回sum本身,不能返回0,因为他每次接收到的值就是下一轮开始的值, 如果我们返回0,相当于把之前累加的都清空掉了

计算元素四舍五入后的和:

let arr = [15.5, 2.3, 1.1, 4.7]
let sum = arr.reduce((sum, item) => {  //首先还是sum,item。sum初始值在最后的0。
     return sum += Math.round(item)    
   }, 0)
console.log(sum)
复制代码

reduce是可以替代map与filter的。

替代map:  (计算数组中每个元素的平方,并返回新的函数)

let arr1 = [4, 9, 16, 25]
 let arr2 = arr1.reduce((arr2,item) => {//传入arr2数组,与arr1的每个元素
   return arr2.concat(Math.pow(item,2))                      
 },[])          //这里我们将arr2的初始值定位空数组
 console.log(arr2)  //[16, 81, 256, 625]
复制代码

注意://由于要返回数组,我们要arr2用concat这个方法连接arr1中的item元素,并返回 代替filter: (过滤掉太短的字符串)

let scores = [95,91,59,55,42,82,72,85,67,66,55,91]       
let scores2 = scores.reduce((scores2,item)=>{
    return scores2.concat(item>60?item:[])                                      个空数组,不能连接null,null会占位置
},[])
console.log(scores2)   //[95, 91, 82, 72, 85, 67, 66, 91]
复制代码

注意:如果大于60就连接到数组里,不然就连个空数组,不能连接null或undefined,null和undefined会占位置,变成['1',null,'2','3',null,'4']这个样子

总结

js中没有真正的数组,它的数组不是典型的数组

reduce在刚刚上手会比较难,多用几次就好了。

数组中最强大的就是splice和reduce,一定要用好这两个。

map()是n变n,即map里有多少元素,返回的数组就是多少元素,是对里面每个元素进行加功

filter()是n变少,过滤掉一些元素

reduce()是n变一,将所有元素进行累加



目录
相关文章
|
3月前
|
索引
ES5常见的数组方法:forEach ,map ,filter ,some ,every ,reduce (除了forEach,其他都有回调,都有return)
ES5常见的数组方法:forEach ,map ,filter ,some ,every ,reduce (除了forEach,其他都有回调,都有return)
|
3月前
|
JavaScript 前端开发
js map和reduce
js map和reduce
WK
|
3月前
|
Python
map和filter的区别是什么
`map()`和`filter()`均为Python中的高阶函数,前者针对可迭代对象中的每个元素执行指定操作,如数值翻倍或字符串转大写;后者则筛选出符合条件的元素,例如仅保留偶数或非空字符串。两者均返回迭代器,并可通过`list()`等函数转换为所需的数据结构。具体使用时,应依据实际需求和场景选择合适的函数。
WK
32 1
WK
|
3月前
map和filter的区别是什么
在编程中,`map` 和 `filter` 是处理数组或集合时常用的两个函数。`map` 用于将每个元素通过指定函数转换后生成新的数组,而 `filter` 则根据条件筛选出符合条件的元素组成新数组。两者的主要区别在于:`map` 的返回数组长度与原数组相同,但元素被转换;`filter` 的返回数组长度可能不同,只包含符合条件的元素。
WK
54 2
|
3月前
|
JavaScript 前端开发
JavaScript 中 五种迭代数组的方法 every some map filter forEach
本文介绍了JavaScript中五种常用数组迭代方法:every、some、filter、map和forEach,并通过示例代码展示了它们的基本用法和区别。
|
4月前
|
JavaScript 前端开发 索引
JS中常用的数组迭代方法(filter,forEach,map,every,some,find,findIndex)
这段代码和说明介绍了JavaScript中数组的一些常用方法。函数接收三个参数:`item`(数组项的值)、`index`(项的位置,可选)和`array`(数组本身,可选)。示例展示了如何使用`filter()`过滤非空项、`forEach()`遍历数组、`map()`处理并返回新数组、`every()`检查所有元素是否满足条件、`some()`检查是否存在满足条件的元素、`find()`获取首个符合条件的元素值以及`findIndex()`获取其索引位置。这些方法都不会修改原数组。
JS中常用的数组迭代方法(filter,forEach,map,every,some,find,findIndex)
|
4月前
|
存储 算法 Java
Go 通过 Map/Filter/ForEach 等流式 API 高效处理数据
Go 通过 Map/Filter/ForEach 等流式 API 高效处理数据
|
5月前
|
人工智能 算法 大数据
算法金 | 推导式、生成器、向量化、map、filter、reduce、itertools,再见 for 循环
这篇内容介绍了编程中避免使用 for 循环的一些方法,特别是针对 Python 语言。它强调了 for 循环在处理大数据或复杂逻辑时可能导致的性能、可读性和复杂度问题。
60 6
算法金 | 推导式、生成器、向量化、map、filter、reduce、itertools,再见 for 循环
|
4月前
|
安全 Java API
Java 8 流库的魔法革命:Filter、Map、FlatMap 和 Optional 如何颠覆编程世界!
【8月更文挑战第29天】Java 8 的 Stream API 通过 Filter、Map、FlatMap 和 Optional 等操作,提供了高效、简洁的数据集合处理方式。Filter 用于筛选符合条件的元素;Map 对元素进行转换;FlatMap 将多个流扁平化合并;Optional 安全处理空值。这些操作结合使用,能够显著提升代码的可读性和简洁性,使数据处理更为高效和便捷。
167 0
|
4月前
|
分布式计算 Python
【python笔记】高阶函数map、filter、reduce
【python笔记】高阶函数map、filter、reduce