美文网首页JavaScript
数组处理的高阶函数 map等

数组处理的高阶函数 map等

作者: 栗子daisy | 来源:发表于2020-08-21 13:47 被阅读0次

map(映射)forEach(遍历) reduce(汇总) filter(过滤) sort(排序) every(判断)
find(查找) findIndex()

1.map()

map()传入的参数是函数对象本身
map() 方法返回一个新数组,新数组中的元素为原始数组中的元素依次调用参数中的函数处理后的值。
map() 方法不会对空数组进行检测,也不会修改原数组。

  • 原数组被“映射”成对应新数组
    var arr = [1, 3, 5, 6, 9]; var results = arr.map(x=>x*x); // [1, 9, 25, 36, 81]
  • 获得 对象数组 中的特定属性值们
    var newarr = [{ num: 1, val: 'ceshi', flag: 'aa' }, { num: 2, val: 'ceshi2', flag: 'aa2' }]; var value = newarr.map(item=>item.val; }); value // ["ceshi", "ceshi2"]
forEach()

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

  • 依次打印每个元素
    var arr = ['Apple', 'pear', 'orange']; arr.forEach(console.log);
2.reduce()

reduce()把一个函数作用在这个Array的[x1, x2, x3...]上,这个函数必须接收两个参数,reduce()把结果继续和序列的下一个元素做累积计算
reduce() 方法接受一个函数作为累加器,数组中的值从左到右开始计算,最终返回计算出来的一个值。reduce() 对于空数组不会执行回调。当数组中只有一个元素时无论参数函数是什么,reduce都返回数组中的唯一元素。不会修改原数组。
arr.reduce(function(prev,cur,index,arr){ ... }, init);
prev 表示上一次调用回调时的返回值,或者初始值 init;
cur 表示当前正在处理的数组元素;
index 表示当前正在处理的数组元素的索引,若提供 init 值,则索引为0,否则索引为1;
arr 表示原数组;
init 表示初始值。
数组求和 var arr = [1, 3, 5, 7, 9]; var results = arr.reduce( (x, y) => x * 10 + y ); // 13579

  • 数组项最大值var max = arr.reduce((prev, cur) =>{ return Math.max(prev,cur); });//9
  • 数组去重:每项在新数组里找不到就放进去。
    var newArr = arr.reduce((prev, cur)=>{ prev.indexOf(cur) === -1 && prev.push(cur); return prev;},[]);
3.filter()

filter也是一个常用的操作,它用于把Array的某些元素过滤掉,然后返回剩下的元素。不会修改原数组。array.filter(function(currentValue,index,arr), thisValue)

  • filter()把传入的函数依次作用于每个元素,然后根据返回值是true还是false决定保留还是丢弃该元素。
    var arr = [1, 2, 4, 5, 6, 9, 10, 15]; var r = arr.filter(function (x) { return x % 2 !== 0; // true/false }); r; // [1, 5, 9, 15]
  • 数组去重: ( index元素的位置和self数组本身)
    去除重复元素依靠的是indexOf总是返回第一个元素的位置,后续的重复元素位置与indexOf返回的位置不相等,因此被filter滤掉了。
    var arr = [1, 2, 2, 6, 7, 7,8]; var arr2 = arr.filter((x, index,self)=>self.indexOf(x)===index) console.log(arr2); //[1, 2, 6, 7, 8]
  • 去掉空数组 空字符串、undefined、null
    var arr = ['1','2',undefined, '',null] var newArr = arr.filter(item => item) console.log(newArr)//['1','2']
  • 过滤出符合项
    var arr = [20,30,50, 96,50] var newArr = arr.filter(item => item>30) // [50, 96, 50]
    var newarr = [{ num: 1, val: 'ceshi', flag: 'aa' }, { num: 2, val: 'ceshi2', flag: 'aa2' }] console.log(newarr.filter(item => item.num===2 ))//[{num: 2, val: "ceshi2", flag: "aa2"}]
sort(): 用于排序

如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,其返回值如下:
若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。
若 a 等于 b,则返回 0。
若 a 大于 b,则返回一个大于 0 的值。

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

every()方法可以判断数组的所有元素是否满足测试条件。
例如,给定一个包含若干字符串的数组,判断所有字符串是否满足指定的测试条件
arr.every(function (s) { return s.toLowerCase() === s; }) // false, 因为不是每个元素都全部是小写

find()

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

findIndex()

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

相关文章

  • 数组处理的高阶函数 map等

    map(映射)forEach(遍历) reduce(汇总) filter(过滤) sort(排序) every(...

  • Javascript学习笔记——8.8 函数式编程

    使用函数处理数组 用循环的写法 使用map和reduce 高阶函数 所谓高阶函数,就是操作函数的函数,它接受一个或...

  • swift数组函数:map,filter

    参考 Swift高阶函数:Map,Filter,Reduce map 不使用map函数来操作数组(同时熟悉闭包的产...

  • 高阶函数

    高阶函数 map 不会改变原数组 map()作为高阶函数,事实上它把运算规则抽象了,因此,我们不但可以计算简单的f...

  • 高阶函数:filter map reduce

    高阶函数:filter map reduce这三个高阶函数都是数组中有几项就执行几次编程范式:面向对象编...

  • Swift中 Map,Flatmap,Filter,Reduce

    WHAT Map,Filter,Reduce是什么? Swift的标准数组支持三个高阶函数:map,filter和...

  • React 高阶组件

    高阶函数基本概念 函数可以作为参数传递, 比如 setTimeout,数组的操作方法:map,forEach,...

  • Block 实现高阶函数(map filter)

    在swift中提供了包括map、filter、reduce等十分简洁优秀的高阶函数供我们对数组数据进行操作,同样情...

  • Array API

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

  • [jquery]:常用小记

    jquery函数 .map() $.map() 函数用于使用指定函数处理数组中的每个元素(或对象的每个属性),并将...

网友评论

    本文标题:数组处理的高阶函数 map等

    本文链接:https://www.haomeiwen.com/subject/nvhujktx.html