webxmsj's blog webxmsj's blog
首页
  • javaScript
  • html
  • css
  • vue
  • SOLID
  • javascript
  • 算法
  • 学习
  • 笔记
  • 面试
  • 心情杂货
  • 友情链接
  • 分类
  • 标签
  • 归档
关于
GitHub (opens new window)

Webxmsj

前端界的搬砖工
首页
  • javaScript
  • html
  • css
  • vue
  • SOLID
  • javascript
  • 算法
  • 学习
  • 笔记
  • 面试
  • 心情杂货
  • 友情链接
  • 分类
  • 标签
  • 归档
关于
GitHub (opens new window)
  • 何为ECMA
  • new内部原理
  • ES5面向对象
  • ES6面向对象
  • 高阶函数-柯里化函数
  • 多种数组去重性能对比
  • 高阶函数-偏函数、惰性函数
  • 函数记忆与函数防抖
  • 高阶函数-防抖、节流
  • 数据归类
    • 单一归类
    • 复合归类
  • 数组扁平化
  • 前端必知的网络知识-理论篇
  • 浏览器缓存
  • http版本及四次挥手
  • 减少http请求
  • ajax前奏
  • XMLHttpRequest版本
  • 跨域请求的多种实现
  • cookie增删改查及iframe常用属性
  • 文件上传
  • 模块化、requirejs
  • 工程化-webpack
  • 工程化-webpack插件
  • webpack-HMR(热更新)及babel
  • treeshaking
  • JS随机打乱数组
  • 判断是否为移动端浏览器
  • 将一维数组按指定长度转为二维数组
  • 防抖与节流函数
  • JS获取和修改url参数
  • 比typeof运算符更准确的类型判断
  • 前端
  • javascript
webxmsj
2021-04-03

数据归类

# 数据归类技术

关联表

  • 用户表
id name sex
1 小明 1
2 小黄 1
3 小红 2
4 小绿 2
  • 性别表
id sex
1 男
2 女
var users = [
  {id: 1, name: '小明', sex: 1},
  {id: 2, name: '小黄', sex: 1},
  {id: 3, name: '小红', sex: 2},
  {id: 4, name: '小绿', sex: 3}
]
var sex = [
  {id: 1, sex: '男'},
  {id: 2, sex: '女'}
]
1
2
3
4
5
6
7
8
9
10

# 单一归类

// {
//   1: [
//     {id: 1, name: '小明', sex: 1},
//     {id: 2, name: '小黄', sex: 1},
//   ],
//   2: [
//     {id: 3, name: '小红', sex: 2},
//     {id: 4, name: '小绿', sex: 3}
//   ]
// }
var cache = {}
sex.forEach(function (sex) {
  var _id = sex.id;
  cache[_id] = []
  users.forEach(function(user) {
    var _sex = user.sex;
    if (_sex == _id) {
      cache[_id].push(user)
    }
  })
})
console.log(cache)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 复合归类

id name
1 足球
2 篮球
name hobby
小明 1,2
小花 2
var hobby = [
  {id:1, name: '足球'},
  {id:2, name: '篮球'},
  {id:3, name: '排球'},
  {id:4, name: '乒乓球'},
  {id:5, name: '保龄球'},
  {id:6, name: '高尔夫球'},
]
var person = [
  {name: '小明', hobby: '1,2'},
  {name: '小明', hobby: '1,3'},
  {name: '小明', hobby: '2,5'},
  {name: '小明', hobby: '5,6'},
  {name: '小明', hobby: '3,5'},
  {name: '小明', hobby: '1,2,6'},
  {name: '小明', hobby: '3,6'},
  {name: '小明', hobby: '1,4,5,6'},
]

var cache = {
  1: [{name: '小明', hobby: '1,2'},{name: '小明', hobby: '1,2,6'},{name: '小明', hobby: '1,4,5,6'}],
  2: [{name: '小明', hobby: '1,2'},{name: '小明', hobby: '2,5'},{name: '小明', hobby: '1,2,6'}],
  3: [{name: '小明', hobby: '1,3'},{name: '小明', hobby: '3,5'},{name: '小明', hobby: '3,6'}]
  ...
}
hobby.forEach(function(hobby) {
  var _id = hobby.id;
  cache[_id] = [];
  person.forEach(function(person) {
    var _hobbyArr = person.hobby.split(',');
    _hobbyArr.forEach(function(elem) {
      if (elem ++ _id) {
        cache[_id].push(person)
      }
    })
  })
})
console.log(cache)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
function sortDatas(sort, data) {
  var cache = {};

  // foreign_key 关联字段
  return function(foreign_key, sortType) {
    if(sortType !== 'single' && sortType !== 'multi') {
      throw new Error('Invalid sort type,[Only "single" and "multi" are valid values')
    }
    sort.forEach(function(sort) {
      var _id = sort.id;
      cache[_id] = []
      data.forEach(function(elem) {
        var foreign_val = elem[foreign_key]
        switch(sortType) {
          case 'single':
            if (foreign_val == _id) {
              cache[_id].push(elem)
            }
            break;
          case 'multi':
            var _arr = foreign_val.split(',')
            _arr.forEach(function(val) {
              if (val === _id) {
                cache[_id].push(elem)
              }
            })
            break;
          default:
            break;
        }
      })
      return cache;
    })
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
上次更新: 2021/04/04, 16:28:40
最近更新
01
treeshaking
04-15
02
webpack-HMR(热更新)及babel
04-14
03
工程化-webpack插件
04-14
更多文章>
Copyright © 2021-2023 Webxmsj
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式