美文网首页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等

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