zoukankan      html  css  js  c++  java
  • es6 reduce的用法


    一、forEach
    回调函数参数,item(数组元素)、index(序列)、arr(数组本身)
    循环数组,无返回值,不改变原数组
    不支持return操作输出,return只用于控制循环是否跳出当前循环

    二、includes
    判断数组是否包含某个元素,不用return,不用回调函数,返回布尔值

    三、filter
    使用return操作输出,会循环数组每一项,并在回调函数中操作
    返回满足条件的元素组成的数组,不改变原数组

    四、map
    输出的是return什么就输出什么新数组
    原数组被“映射”成对应新数组,返回新数组,不改变原数组

    五、find
    用来查找目标元素,找到就返回该元素,找不到返回undefined
    输出的是一旦判断为true则跳出循环输出符合条件的数组元素

    六、some
    返回布尔值,遇到满足条件变跳出循环

    七、every
    返回布尔值,遇到不满足条件跳出循环

    八、reduce
    累加器,输出的是return叠加什么就输出什么
    回调函数参数四个
    pre: 初始值(之后为上一操作的结果)
    cur: 当前元素之
    index: 当前索引
    arr: 数组本身
    主要有以下几种用法:
    1.数组求和
    [1,2,3,4].reduce((pre, cur) => pre + cur)//10
    2.二维数组转为一维数组
    [[1, 2], [3, 4], [5, 6]].reduce(( acc, cur ) => [...acc, ...cur], [])//[1, 2, 3, 4, 5, 6]
    3.计算数组中每个元素出现的次数
    const arraySum = (arr, val) => arr.reduce((acc, cur) => {
    return cur == val ? acc + 1 : acc + 0
    }, 0);
    let arr = [1, 2, 3, 4, 5];
    arraySum(arr, 0) //3
    4.代替filter和map的组合
    const characters = [
    { name: 'ironman', env: 'marvel' },
    { name: 'black_widow', env: 'marvel' },
    { name: 'wonder_woman', env: 'dc_comics' },
    ];

    console.log(
    characters
    .filter(character => character.env === 'marvel')
    .map(character => Object.assign({}, character, { alsoSeenIn: ['Avengers'] }))
    );
    // [
    // { name: 'ironman', env: 'marvel', alsoSeenIn: ['Avengers'] },
    // { name: 'black_widow', env: 'marvel', alsoSeenIn: ['Avengers'] }
    // ]

    console.log(
    characters
    .reduce((acc, character) => {
    return character.env === 'marvel'
    ? acc.concat(Object.assign({}, character, { alsoSeenIn: ['Avengers'] }))
    : acc;
    }, [])
    )
    // [
    // { name: 'ironman', env: 'marvel', alsoSeenIn: ['Avengers'] },
    // { name: 'black_widow', env: 'marvel', alsoSeenIn: ['Avengers'] }
    // ]

    参考:
    1.https://blog.csdn.net/kingan123/article/details/79818566
    2.https://juejin.im/post/5b8d0a74f265da431d0e7ec0
    3.https://www.cnblogs.com/cckui/p/9267542.html

  • 相关阅读:
    Android给ListView设置分割线Divider样式
    Android监听ScrollView滑动到顶端和底部
    .Net——使用.net内置处理程序处理自己定义节点Demo
    Java---25---集合框架共性方法
    网络基础——知识生活化会变得如此简单
    Jquery节点遍历
    Raphaël 中文帮助文档(API)
    Fitnesse使用系列二
    UVa 10188
    Powershell Mail module, 发送outbox 里的全部邮件(一个.csv文件代表一封邮件)
  • 原文地址:https://www.cnblogs.com/bear-blogs/p/10127536.html
Copyright © 2011-2022 走看看