成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

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

shadajin / 3524人閱讀

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

現(xiàn)有一堆數(shù)據(jù)，我需要按時(shí)間進(jìn)行分組，以便前端視圖呈現(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沒(méi)有則在新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
        }
      }
    }
  }

運(yùn)行效率：遍歷1000個(gè)約3ms，總覺(jué)得不優(yōu)雅，而且沒(méi)用到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 {
      //因?yàn)閒orEach不支持break，所以使用every實(shí)現(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í)踐

因?yàn)槲业臄?shù)組中的date是按順序排列，而且沒(méi)有重復(fù)，這樣可以考慮去除第二個(gè)循環(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]
      //和前一個(gè)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！

項(xiàng)目最終效果：

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/92298.html

相關(guān)文章

  • JavaScript中的那些坑

    摘要：序列化為字符串之后它的各個(gè)屬性已經(jīng)被解除了引用，重新相當(dāng)于創(chuàng)建了一個(gè)新的對(duì)象。類(lèi)似于的，的命令行終端?；舅悸泛瘮?shù)的使用以及協(xié)議。 多行注釋的陷阱 由于正則表達(dá)式字面量的存在,多行注釋可能會(huì)產(chǎn)生陷阱,例如以下程序?qū)伋鲥e(cuò)誤: /* var a = /h*/.test(hello); */ 正則結(jié)束前的那個(gè)星號(hào)將被解析為注釋結(jié)束符,從而.被認(rèn)為是不合法的.所以盡量避免使用多行注釋 整型 ...

    ivyzhang 評(píng)論0 收藏0

  • 《高性能javascript》閱讀摘要

    摘要：當(dāng)執(zhí)行上下文被創(chuàng)建時(shí)，它的作用域鏈初始化為當(dāng)前運(yùn)行函數(shù)的屬性中的對(duì)象。該過(guò)程搜索執(zhí)行環(huán)境的作用域鏈，查找同名的標(biāo)識(shí)符。搜索實(shí)例成員比從字面量或局部變量中讀取數(shù)據(jù)代價(jià)更高，再加上遍歷原型鏈帶來(lái)的開(kāi)銷(xiāo)，這讓性能問(wèn)題更為嚴(yán)重。 最近在閱讀這本Nicholas C.Zakas（javascript高級(jí)程序設(shè)計(jì)作者）寫(xiě)的最佳實(shí)踐、性能優(yōu)化類(lèi)的書(shū)。記錄下主要知識(shí)。 加載和執(zhí)行 腳本位置 放在中的...

    duan199226 評(píng)論0 收藏0

  • 《高性能javascript》閱讀摘要

    摘要：當(dāng)執(zhí)行上下文被創(chuàng)建時(shí)，它的作用域鏈初始化為當(dāng)前運(yùn)行函數(shù)的屬性中的對(duì)象。該過(guò)程搜索執(zhí)行環(huán)境的作用域鏈，查找同名的標(biāo)識(shí)符。搜索實(shí)例成員比從字面量或局部變量中讀取數(shù)據(jù)代價(jià)更高，再加上遍歷原型鏈帶來(lái)的開(kāi)銷(xiāo)，這讓性能問(wèn)題更為嚴(yán)重。 最近在閱讀這本Nicholas C.Zakas（javascript高級(jí)程序設(shè)計(jì)作者）寫(xiě)的最佳實(shí)踐、性能優(yōu)化類(lèi)的書(shū)。記錄下主要知識(shí)。 加載和執(zhí)行 腳本位置 放在中的...

    afishhhhh 評(píng)論0 收藏0

  • 前端開(kāi)發(fā)知識(shí)點(diǎn)整理

    摘要：前言本文主要是有關(guān)前端方面知識(shí)按照目前的認(rèn)知進(jìn)行的收集歸類(lèi)概括和整理，涵蓋前端理論與前端實(shí)踐兩方面。 前言：本文主要是有關(guān)前端方面知識(shí)按照 XX 目前的認(rèn)知進(jìn)行的收集、歸類(lèi)、概括和整理，涵蓋『前端理論』與『前端實(shí)踐』兩方面。本文會(huì)告訴你前端需要了解的知識(shí)大致有什么，看上去有很多，但具體你要學(xué)什么，還是要 follow your heart & follow your BOSS。 初衷...

    Blackjun 評(píng)論0 收藏0

  • 前端開(kāi)發(fā)知識(shí)點(diǎn)整理

    摘要：前言本文主要是有關(guān)前端方面知識(shí)按照目前的認(rèn)知進(jìn)行的收集歸類(lèi)概括和整理，涵蓋前端理論與前端實(shí)踐兩方面。 前言：本文主要是有關(guān)前端方面知識(shí)按照 XX 目前的認(rèn)知進(jìn)行的收集、歸類(lèi)、概括和整理，涵蓋『前端理論』與『前端實(shí)踐』兩方面。本文會(huì)告訴你前端需要了解的知識(shí)大致有什么，看上去有很多，但具體你要學(xué)什么，還是要 follow your heart & follow your BOSS。 初衷...

    Sike 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<