I have a bunch of data that I need to group by time for the front-end view to render

[{"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"}]Copy the code

The value needs to be converted to the following

[
  {
    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'
      }
    ]
  }
]

Copy the code

1. Original method, network a lot

  var map = {},
    nList = []
  // Iterate over the original array
  for (var i = 0; i < arr.length; i++) {
    var item = arr[i]
    // If the map does not exist, add it to the new nList
    if(! map[item.date]) { nList.push({date: item.date,
        data: [item]
      })
      map[item.date] = item
    } else {
      / / traverse nList
      for (var j = 0; j < nList.length; j++) {
        varNItem = nList [j],// If the date match is found, add it
        if (nItem.date == item.date) {
          nItem.data.push(item)
          // Break the loop
          break}}}}Copy the code

Running efficiency: Iterating through 1000 about 3ms, I always felt that it was not elegant, and did not use ES5 features, so I decided to optimize it myself!

2. Use ES5 features

Replace for with forEach and every

  let map = {},
    nList = []
  arr.forEach((item) = > {
    if(! map[item.date]) { nList.push({date: item.date,
        data: [item]
      })
      map[item.date] = item
    } else {
      // forEach does not support break, so use every
      nList.every((nItem) = > {
        if (nItem.date === item.date) {
          nItem.data.push(item)
          return false
        }
        return true})}})Copy the code

Performance optimized by 50%, about 1.5ms!

3. Performance optimization practice

Because the dates in my array are sorted in order and not duplicated, I can consider removing the second loop

  let map = {},
    nList = []
  // Set the initial key to 0
  let _nkey = 0
  arr.forEach((item, index) = > {
    if (index === 0) {
      nList.push({
        date: item.date,
        data: [item]
      })
    } else {
      let oItem = arr[index - 1]
      // If it is the same as the previous date, it will be added to the current date, otherwise it will be added to nList
      if (item.date === oItem.date) {
        nList[_nkey]['data'].push(item)
      } else {
        nList.push({
          date: item.date,
          data: [item]
        })
        _nkey ++
      }
    }
  })
Copy the code

Efficiency is optimized again by 50%, about 1ms!

Final effect of the project: