优化实战 第 27 期 - 数据分析之分组、归档

随着大前端概念的提出，让前端开发工程师在互联网产品中的地位也越来越重要。在企业产品的多样化的开发过程中，大前端为企业大大节约开发成本，提高开发效率。

因此前端对数据的处理能力也尤为重要

列表分组

• 代码注解

  /**
  * @description 列表分组，一维数组转二维数组
  * @param {Array} list 源数据
  * @param {Number} num 分组基数
  * @return {Array} 目标数据
  * @example
  *
  *   group([1, 2, 3, 4, 5, 6, 7, 8], 2)  // [[1, 2], [3, 4], [5, 6], [7, 8]]
  *
  *   group([1, 2, 3, 4, 5, 6, 7, 8], 3)  // [[1, 2, 3], [4, 5, 6], [7, 8]]
  */
  

• 方法封装

  export const group = (list, num) => {
    return Array.from({ length: Math.ceil(list.length / num) }, (_, i) => list.slice(i * num, (i + 1) * num))
  }
  

列表归档

• 代码注解

  /**
  * @description 列表归档，一维数组转二维数组
  * @param {Array} list 源数据
  * @param {String} key 归档维度
  * @return {Array} 目标数据
  * @example
  *
  *   const source = [
  *     { "date": "1月", "name": "跳舞" },
  *     { "date": "1月", "name": "钢琴" },
  *     { "date": "2月", "name": "游泳" },
  *   ]
  *
  *   archive(source, 'date')
  *
  *   [
  *     [
  *       { "date": "1月", "name": "跳舞" },
  *       { "date": "1月", "name": "钢琴" },
  *     ],
  *     [
  *       { "date": "2月", "name": "游泳" },
  *     ]
  *   ]
  */
  

• 方法封装

  export const archive = (list, key) => {
    const values = [...new Set(list.map(item => item[key]))]
    return values.reduce((sets, value) => (sets.push(list.filter(item => item[key] === value)), sets), [])
  }
  

列表归档并分组

• 代码注解

  /**
  * @description 列表归档并分组，一维数组转二维数组
  * @param {Array} list 源数据
  * @param {String} key 归档维度
  * @param {String} groupName 组名称
  * @return {Array} 目标数据
  * @example
  *
  *   const source = [
  *     { "year": "2020", "month": 1, "startDate": "2020-01-01", "endDate": "2020-01-31" },
  *     { "year": "2020", "month": 2, "startDate": "2020-02-01", "endDate": "2020-02-29" },
  *     { "year": "2021", "month": 1, "startDate": "2021-01-01", "endDate": "2021-01-31" },
  *     { "year": "2021", "month": 2, "startDate": "2021-02-01", "endDate": "2021-02-28" },
  *   ]
  *
  *   subgroup(source, 'year', 'options')
  *
  *   [
  *     {
  *       "year": "2020",
  *       "options": [
  *         { "year": "2020", "month": 1, "startDate": "2020-01-01", "endDate": "2020-01-31" },
  *         { "year": "2020", "month": 2, "startDate": "2020-02-01", "endDate": "2020-02-29" },
  *       ]
  *     },
  *     {
  *       "year": "2021",
  *       "options": [
  *         { "year": "2021", "month": 1, "startDate": "2021-01-01", "endDate": "2021-01-31" },
  *         { "year": "2021", "month": 2, "startDate": "2021-02-01", "endDate": "2021-02-28" },
  *       ]
  *     }
  *   ]
  */
  

• 方法封装

  export const subgroup = (list, key, groupName = 'options') => {
    const hash = new Map()
    list.forEach(item => {
      const value = item[key]
      if (hash.has(value)) {
        hash.get(value)[groupName].push(item)
      } else {
        hash.set(value, {[key]: value, [groupName]: [item]})
      }
    })
    return [...hash.values()]
  }
  

原生方法实现分组

• 概览

  一个专门用来做数据分组的提案 Array.prototype.groupBy 已经到了 Stage 3 阶段！由于还没有得到浏览器的支持，所以现阶段还没办法使用

• 代码示例

  const inventory = [
    { name: 'asparagus', type: 'vegetables', quantity: 5 },
    { name: 'bananas',  type: 'fruit', quantity: 0 },
    { name: 'goat', type: 'meat', quantity: 23 },
    { name: 'cherries', type: 'fruit', quantity: 5 },
    { name: 'fish', type: 'meat', quantity: 22 }
  ]
  const result = list.groupBy(({ type }, index, source) => type)
  
  /* Result is:
  { 
    vegetables: [
      { name: 'asparagus', type: 'vegetables', quantity: 5 }, 
    ],
    fruit: [
      { name: "bananas", type: "fruit", quantity: 0 },
      { name: "cherries", type: "fruit", quantity: 5 }
    ], 
    meat: [
      { name: "goat", type: "meat", quantity: 23 },
      { name: "fish", type: "meat", quantity: 22 }
    ] 
  }
  */
  

  了解更多请查阅官方文档

  一起学习，加群交流看 沸点