Javascript中JSON數(shù)據(jù)分組優(yōu)化實踐

shadajin 發(fā)布于2019-08-22 11:23 / 3515人閱讀

摘要：現(xiàn)有一堆數(shù)據(jù)，我需要按時間進行分組，以便前端視圖呈現(xiàn)需轉(zhuǎn)化為如下原始方法，網(wǎng)絡(luò)一大堆遍歷原始數(shù)組如果沒有則在新中添加遍歷如查找到符合則添加跳出循環(huán)運行效率遍歷個約，總覺得不優(yōu)雅，而且沒用到的特性，于是

現(xiàn)有一堆數(shù)據(jù)，我需要按時間進行分組，以便前端視圖呈現(xiàn)

[
  {"date":"2017-12-22","start_time":"10:00:00","end_time":"10:00:00","status":"Performance Time"},
  {"date":"2017-12-22","start_time":"10:40:00","end_time":"10:40:00","status":"Performance Time"},
  {"date":"2017-12-23","start_time":"10:00:00","end_time":"10:00:00","status":"Performance Time"},
  {"date":"2017-12-23","start_time":"10:40:00","end_time":"10:40:00","status":"Performance Time"}
]

需轉(zhuǎn)化為如下

[
  {
    date: "2017-12-22",
    data: [
      {
        date: "2017-12-22",
        start_time: "10:00:00",
        end_time: "10:00:00",
        status: "Performance Time"
      },
      {
        date: "2017-12-22",
        start_time: "10:40:00",
        end_time: "10:40:00",
        status: "Performance Time"
      }
    ]
  },
  {
    date: "2017-12-23",
    data: [
      {
        date: "2017-12-23",
        start_time: "10:00:00",
        end_time: "10:00:00",
        status: "Performance Time"
      },
      {
        date: "2017-12-23",
        start_time: "10:40:00",
        end_time: "10:40:00",
        status: "Performance Time"
      }
    ]
  }
]

1.原始方法，網(wǎng)絡(luò)一大堆

  var map = {},
    nList = []
  //遍歷原始數(shù)組
  for (var i = 0; i < arr.length; i++) {
    var item = arr[i]
    //如果map沒有則在新nList中添加
    if (!map[item.date]) {
      nList.push({
        date: item.date,
        data: [item]
      })
      map[item.date] = item
    } else {
      //遍歷nList
      for (var j = 0; j < nList.length; j++) {
        var nItem = nList[j]、
        //如查找到date符合則添加
        if (nItem.date == item.date) {
          nItem.data.push(item)
          //跳出循環(huán)
          break
        }
      }
    }
  }

運行效率：遍歷1000個約3ms，總覺得不優(yōu)雅，而且沒用到ES5的特性，于是決定自己優(yōu)化一下！

2.使用ES5特性

將for替換為forEach和every

  let map = {},
    nList = []
  arr.forEach((item) => {
    if (!map[item.date]) {
      nList.push({
        date: item.date,
        data: [item]
      })
      map[item.date] = item
    } else {
      //因為forEach不支持break，所以使用every實現(xiàn)
      nList.every((nItem) => {
        if (nItem.date === item.date) {
          nItem.data.push(item)
          return false
        }
        return true
      })
    }
  })

性能優(yōu)化50%，約1.5ms！

3.性能優(yōu)化實踐

因為我的數(shù)組中的date是按順序排列，而且沒有重復(fù)，這樣可以考慮去除第二個循環(huán)

  let map = {},
    nList = []
  //設(shè)置初始key為0
  let _nkey = 0
  arr.forEach((item, index) => {
    if (index === 0) {
      nList.push({
        date: item.date,
        data: [item]
      })
    } else {
      let oItem = arr[index - 1]
      //和前一個date一致則在當(dāng)前添加，否則添加至nList
      if (item.date === oItem.date) {
        nList[_nkey]["data"].push(item)
      } else {
        nList.push({
          date: item.date,
          data: [item]
        })
        _nkey ++
      }
    }
  })

效率再次優(yōu)化50%，約1ms！

項目最終效果：