zoukankan      html  css  js  c++  java
  • javascript-------reduce()

            很久没有写博客了。日常的面向搜索引擎编程感觉自己都快废掉了。昨天公司开始执行为期1个半月的996了工作制度了,但是前端这边的活不是很多。那就从最基础的巩固一下自己吧。能想到的js方法能写多少写多少吧,不为了别人看就当给自己做个复习。屁话不多说第一个js方法reduce(),估计大多数跟我一样的一看到这个东西感觉熟悉的陌生,一脸懵逼。

    1、官方的介绍是:此方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。理解起来真的是费死劲了,其实有一个方法跟他类似就是sort()方法,同样可以接受一个函数作为参数。区别就在于一个是用于排序,而这个是用来获得一个唯一的结果。

    function sum(a,b){

      return a+b

    }

    let arr=[23,55,6,8]
    let result=arr.reduce(sum)
    result 92
    此方法在执行过程中会去调用数组中的每一项,

    我们先看下reduce接受的函数的参数有哪些

    (1)、必需。初始值, 或者计算结束后的返回值。

    (2)、必需。当前元素

    (3)、可选。当前元素的索引

    (4)、可选。当前元素所属的数组对象。

    2、这个方法可以用到那些场景呢:

    (1)就是类似上面栗子中的累加

    (2)帮我们扁平化一个数组

    let arr=[[2,3],[4,5]].reduce(function(a,b){return a.concat(b)})

    arr   [2,3,4,5]

    (3)一个高级的用法,都知道js对象的key值都是字符串的,ES6提供了Map结构。它类似于对象,也是键值对集合,但是”键”的范围不限于字符串,对象也可以当作键。我们如果想把js对象转变成map结构,这个方法也是可行的。如下所示

    var map = [{

        title: '学校名',

        key: 'school_name'

    },

    {

        title: '省',

        key: 'province'

    },

    {

        title: '市',

        key: 'city'

    },

    {

        title: '区',

        key: 'area'

    },

    {

        title: '班级数',

        key: 'class_num'

    }].reduce((ret, item) => (ret[item.title] = item.key) && ret, {})

     

    var data = [{

        "区":"海淀",

        "学校名":"清华",

        "市":"北京",

        "班级数":"2",

        "省":"无"

    },{

        "区":"海淀",

        "学校名":"清华",

        "市":"北京",

        "班级数":"2",

        "省":"无"

    }]

     

    var result = data.map(item => Object.keys(item).reduce((obj, e) => (obj[map[e]] = item[e]) && obj, {}))

     

    result : [{area: "海淀", school_name: "清华", city: "北京", class_num: "2", province: "无"},{area: "海淀", school_name: "清华", city: "北京", class_num: "2", province: "无"}]

     

  • 相关阅读:
    PHP常用数组函数介绍
    php字符串处理函数大全
    Laravel框架数据库CURD操作、连贯操作使用方法
    yii gii自动生成的curd添加批量删除实例
    负载均衡的几种实现方式
    php导出excel
    php导入excel文件
    html+php实现无刷新上传文件
    python3.3 基础 新特性
    二叉树的遍历
  • 原文地址:https://www.cnblogs.com/gutianer/p/9445578.html
Copyright © 2011-2022 走看看