前言

主要是对数据对象的一些操作的熟练掌握！

原始数据：

const addPage =  [
{"id":1589299200000,"day":13,"year":2020,"month":5,"accountDate":"5月13日","moneyValue":"58","icon":"/assets/images/accountIcon/pay/haizi.png","iconBgcolor":"#53C5AB","iconName":"孩子","selectedTab":0},
{"id":1589299200000,"day":13,"year":2020,"month":5,"accountDate":"5月13日","moneyValue":"50","icon":"/assets/images/accountIcon/pay/huazhuangpin.png","iconBgcolor":"#F76D9C","iconName":"化妆品","selectedTab":0},
{"id":1589299200000,"day":13,"year":2020,"month":5,"accountDate":"5月13日","moneyValue":"25","icon":"/assets/images/accountIcon/pay/haizi.png","iconBgcolor":"#53C5AB","iconName":"孩子","selectedTab":0},
{"id":1589299200000,"day":13,"year":2020,"month":5,"accountDate":"5月13日","moneyValue":"50","icon":"/assets/images/accountIcon/income/hongbao.png","iconBgcolor":"#F7756D","iconName":"红包","selectedTab":1},
{"id":1589212800000,"day":12,"year":2020,"month":5,"accountDate":"5月12日","moneyValue":"25","icon":"/assets/images/accountIcon/pay/haizi.png","iconBgcolor":"#53C5AB","iconName":"孩子","selectedTab":0},
{"id":1589299200000,"day":13,"year":2020,"month":5,"accountDate":"5月13日","moneyValue":"30","icon":"/assets/images/accountIcon/pay/huazhuangpin.png","iconBgcolor":"#F76D9C","iconName":"化妆品","selectedTab":0},
{"id":1589212800000,"day":12,"year":2020,"month":5,"accountDate":"5月12日","moneyValue":"60","icon":"/assets/images/accountIcon/pay/haizi.png","iconBgcolor":"#53C5AB","iconName":"孩子","selectedTab":0},
{"id":1589212800000,"day":12,"year":2020,"month":5,"accountDate":"5月12日","moneyValue":"69","icon":"/assets/images/accountIcon/income/jiangjinguize.png","iconBgcolor":"#48C0E3","iconName":"奖金","selectedTab":1}]

属性说明：

id: 是添加记账的年月日的时间戳
moneyValue：记账钱数
icon: iconfont图标地址
iconBgcolor：图标的背景颜色
iconName：图标名字（记账项目）
selectedTab: 0表示支出，1表示收入

原始数据进行如下处理：

1.把同一天的账单归在一起,即把相同id的每一项归到一个数组中

效果如下：
思路：

1.首先创建一个map空对象和一个dest空数组，通过判断map中是否含有某项来判断数组dest是否添加数据
2.然后再判断相同项和已有的dest数据内容比较合并

实现代码：

var getValue = function (arr) {
  var map = {}
  var dest = []
  for (var i = 0; i < arr.length; i++) {
    var ai = arr[i]
    if (!map[ai.id]) {     //如果map中没有id这个属性值
      dest.push({          //则在dest中添加数据
        id: ai.id,
        accountDate: ai.accountDate,
        data: [ai]
      })
      map[ai.id] = ai;     //同时给map对象添加这个属性并赋值
    } else {                //如果map中有这个id属性值
      for (var j = 0; j < dest.length; j++) {  // 循环dest数组
        var dj = dest[j]
        if (dj.id == ai.id) {    //如果dest数据中的id和arr中的ai的id相同
          dj.data.push(ai)      //则把ai添加到dj的data中
          break
        }
      }
    }
  }
  return dest
}
getValue(addPage)

结果：

[
{
 "id":1589299200000,
 "accountDate":"5月13日",
 "data":[{"id":1589299200000,"day":13,"year":2020,"month":5,"accountDate":"5月13日","moneyValue":"58","icon":"/assets/images/accountIcon/pay/haizi.png","iconBgcolor":"#53C5AB","iconName":"孩子","selectedTab":0},
         {"id":1589299200000,"day":13,"year":2020,"month":5,"accountDate":"5月13日","moneyValue":"50","icon":"/assets/images/accountIcon/pay/huazhuangpin.png","iconBgcolor":"#F76D9C","iconName":"化妆品","selectedTab":0},
         {"id":1589299200000,"day":13,"year":2020,"month":5,"accountDate":"5月13日","moneyValue":"25","icon":"/assets/images/accountIcon/pay/haizi.png","iconBgcolor":"#53C5AB","iconName":"孩子","selectedTab":0},
         {"id":1589299200000,"day":13,"year":2020,"month":5,"accountDate":"5月13日","moneyValue":"50","icon":"/assets/images/accountIcon/income/hongbao.png","iconBgcolor":"#F7756D","iconName":"红包","selectedTab":1},
         {"id":1589299200000,"day":13,"year":2020,"month":5,"accountDate":"5月13日","moneyValue":"30","icon":"/assets/images/accountIcon/pay/huazhuangpin.png","iconBgcolor":"#F76D9C","iconName":"化妆品","selectedTab":0}
 ]},
{
 "id":1589212800000,
 "accountDate":"5月12日",
 "data":[{"id":1589212800000,"day":12,"year":2020,"month":5,"accountDate":"5月12日","moneyValue":"25","icon":"/assets/images/accountIcon/pay/haizi.png","iconBgcolor":"#53C5AB","iconName":"孩子","selectedTab":0},
         {"id":1589212800000,"day":12,"year":2020,"month":5,"accountDate":"5月12日","moneyValue":"60","icon":"/assets/images/accountIcon/pay/haizi.png","iconBgcolor":"#53C5AB","iconName":"孩子","selectedTab":0},
         {"id":1589212800000,"day":12,"year":2020,"month":5,"accountDate":"5月12日","moneyValue":"69","icon":"/assets/images/accountIcon/income/jiangjinguize.png","iconBgcolor":"#48C0E3","iconName":"奖金","selectedTab":1}
 ]}
]

优化：按照一定的时间排列顺序进行渲染

//定义一个排序方法sortMethod，传入一个参数，按照那个属性进行排序
var sortMethod = function (id) {
  return function(a,b) {
    var value1 = a[id]
    var value2 = b[id]
    return value2 - value1
  }
}
// 结合以上代码，归结到一个函数中
var sortValue = function(arr,id){
  return getValue(arr).sort(sortMethod(id))
}

//调用sortValue函数,传入要处理的数组addPage，和根据那个字段进行排序'id'
sortValue(addPage,'id')

2. 提取addPage中收入/支出：arr.filter过滤出自己想要的数据

//提取出收入
var incomArr = addPage.filter(function(item){
  return item.selectedTab === 1
})
//提取出支出
var payArr = addPage.filter(function(item){
  return item.selectedTab === 0
})

incomArr数据：

[
  {"id":1589299200000,"day":13,"year":2020,"month":5,"accountDate":"5月13日","moneyValue":"50","icon":"/assets/images/accountIcon/income/hongbao.png","iconBgcolor":"#F7756D","iconName":"红包","selectedTab":1},
  {"id":1589212800000,"day":12,"year":2020,"month":5,"accountDate":"5月12日","moneyValue":"69","icon":"/assets/images/accountIcon/income/jiangjinguize.png","iconBgcolor":"#48C0E3","iconName":"奖金","selectedTab":1}
]

3.求和：把支出/收入的moneyValue求和

const totalMoney = incomArr.reduce(function(total,cur){
  return total + parseFloat(cur.moneyValue)
},0)

记账项目—数据处理（数组对象）

前言

原始数据：

原始数据进行如下处理：

1.把同一天的账单归在一起,即把相同id的每一项归到一个数组中

2. 提取addPage中收入/支出：arr.filter过滤出自己想要的数据

3.求和：把支出/收入的moneyValue求和

你可能感兴趣的:(记账项目—数据处理（数组对象）)