前言

  今天在打算從js端時(shí)序數(shù)據(jù)庫(kù)TSDB中，按相同的類(lèi)型的數(shù)據(jù)排在一起，并且取同一時(shí)間段最新的數(shù)據(jù)，經(jīng)過(guò)查詢(xún)這種思想叫做數(shù)據(jù)聚合，就是返回的數(shù)據(jù)要根據(jù)一個(gè)屬性來(lái)做計(jì)算。

一、數(shù)據(jù)聚合

1.groupBy()函數(shù)

  聚合用groupBy這個(gè)函數(shù)，它傳兩個(gè)形參一為對(duì)象數(shù)組，二為匿名函數(shù)（該函數(shù)功能：返回對(duì)象的某個(gè)指定屬性的屬性值并存放在數(shù)組中）

  groupBy: function(array, func){
    var groups = {};
    array.forEach(function(element){
      var group = JSON.stringify(func(element));
      groups[group] = groups[group] || []; //第一次執(zhí)行為空數(shù)組
      //groups[group] = [] //這樣寫(xiě)就會(huì)覆蓋之前的數(shù)據(jù)，視情況而用
      groups[group].push([element,group]);//這里可以單獨(dú)傳element，本人是需要用到group才需要進(jìn)行push
    });
    return Object.keys(groups).map(function(group){
      return groups[group];
    });
  },

  這里返回的是數(shù)組，需要返回key所對(duì)應(yīng)的數(shù)組可以

    return Object.keys(groups).map(function(group){
      return groups[group];
    });

  Object.keys(groups)是取出groups對(duì)象中的所有key，然后遍歷一個(gè)個(gè)key組成的新數(shù)組，返回分好了組的二維數(shù)組

• .groupBy函數(shù)內(nèi)，先創(chuàng)建一個(gè)空對(duì)象；
• 然后forEach遍歷對(duì)象數(shù)組，遍歷時(shí)要執(zhí)行的函數(shù)中只有一個(gè)形參element（數(shù)組中的每個(gè)元素）；
• 由于下面函數(shù)調(diào)用是想用name來(lái)分組，因此let group = JSON.stringify( func(element) )，相當(dāng)于先獲取到數(shù)組中的想要用來(lái)排序的屬性（這里我用返回的new Date(item.timestamp * 1000).getHours()，就是時(shí)間戳轉(zhuǎn)換出的小時(shí)）對(duì)應(yīng)的屬性值并放入數(shù)組中，然后再將屬性值轉(zhuǎn)換為json字符串；
• groups[group] = groups[group] || []，在js中對(duì)象也是關(guān)聯(lián)數(shù)組，因此這里相當(dāng)于做了兩件事，一是把group作為groups的key，二是將對(duì)應(yīng)的value初始化，第一次執(zhí)行為空數(shù)組，循環(huán)執(zhí)行時(shí)找到相同的name時(shí)保持不變；
• groups[group] = groups[group] || []，這里也可以寫(xiě)成groups[group] = []，這樣的話(huà)每次push進(jìn)去的數(shù)據(jù)就會(huì)覆蓋之前的數(shù)據(jù)，從而達(dá)到每次都能獲取同一時(shí)間段內(nèi)的最新數(shù)據(jù)。
• groups[group].push([element,group])，這句相當(dāng)于把list中每個(gè)對(duì)象壓入數(shù)組中作為value；

2.sortData()函數(shù)

  寫(xiě)好groupBy函數(shù)后就可以調(diào)用進(jìn)行排序了：

  sortData: function(Data){
    var sorted = this.groupBy(Data, function(item){
      return new Date(item.timestamp * 1000).getHours(); // 返回需要分組的對(duì)象
      // return item.name; // 返回需要分組的對(duì)象
    });
    return sorted;
  },

  這里的return可以返回?cái)?shù)組中參數(shù)進(jìn)行比較，比如item中name屬性。item是groupBy函數(shù)func(element)中的element

二、ECS6箭頭函數(shù)寫(xiě)法

  上面是ECS5的寫(xiě)法，到了ECS6之后JS就引入箭頭函數(shù)，下面是ECS6含箭頭函數(shù)的寫(xiě)法。

1.sortClass()函數(shù)

sortClass(Data){
	const groupBy = (array, func) => {
		let groups = {};
		array.forEach((element)=>{
			let group = JSON.stringify(func(element));
			groups[group] = groups[group] || [];
			groups[group].push(element);
		});
		return Object.keys(groups).map((group) =>{
			return groups[group];
		})
	};
	const sorted = groupBy(Data, (item) =>{
		return item.name;
	})
	return sorted;
}

2.運(yùn)行結(jié)果

  這就是運(yùn)行sortClass(res.query)之后得到的結(jié)果，這里本人是timestamp時(shí)間戳來(lái)進(jìn)行排序，而紅框中的數(shù)據(jù)就是push[element,group]中的group。

三、按需聚合（結(jié)合實(shí)際使用）

  上面是對(duì)數(shù)據(jù)庫(kù)中數(shù)據(jù)聚合得到是數(shù)組每個(gè)key對(duì)于都是當(dāng)前最新的值（只有一個(gè)），如果這里要求要保留每個(gè)key都對(duì)于兩個(gè)最新的值，則需要對(duì)groupBy函數(shù)進(jìn)行改動(dòng)一下了。

1.groupBy()函數(shù)

  /**
   * author: CSH
   * 函數(shù)功能：給定參數(shù)對(duì)數(shù)組進(jìn)行分組并排序
   * @param {Object} array [需要排序的數(shù)組]
   * @param {Object} func [該函數(shù)參數(shù)用于返回用于分組排序的對(duì)象]
   */
  groupBy: function(array, func){
    var groups = {};
    array.forEach(function(element){
      var group = JSON.stringify(func(element));
      groups[group] = groups[group] || []; //第一次執(zhí)行為空數(shù)組
      // groups[group] = [];  // 這樣就能得到當(dāng)前小時(shí)時(shí)間段內(nèi)最新的數(shù)據(jù)
      groups[group].push([element,group]);
      groups[group].length >= 3 ? groups[group].shift() : null; // 只保留當(dāng)前數(shù)組最新兩組數(shù)據(jù)
    });
    return Object.keys(groups).map(function(group){
      return groups[group];
    });
  },

  在js中對(duì)數(shù)組只保留最新兩項(xiàng)數(shù)據(jù)需要用到JS中數(shù)組里的 shift()方法 （位移元素）了，位移與彈出等同，但處理首個(gè)元素而不是最后一個(gè)。shift() 方法會(huì)刪除首個(gè)數(shù)組元素，并把所有其他元素“位移”到更低的索引了（類(lèi)似于隊(duì)列一樣）。使用該方法就可以保證數(shù)組內(nèi)的元素都是最新兩項(xiàng)。

2.sortData()函數(shù)（無(wú)改動(dòng)）

  /**
   * author: CSH
   * 函數(shù)功能：給定數(shù)組，并返回需要分組的對(duì)象，然后根據(jù)該對(duì)象進(jìn)行分組排序返回新的數(shù)組 
   * @param {Object} sortData [需要數(shù)據(jù)聚合的數(shù)組]
   */
  sortClass: function(sortData){
    var sorted = this.groupBy(sortData, function(item){
      return new Date(item.timestamp * 1000).getHours(); // 返回需要分組的對(duì)象
      // return item.name; // 返回需要分組的對(duì)象
    });
    return sorted;
  },

  對(duì)groupBy()函數(shù)進(jìn)行改動(dòng)之后，在用sortData進(jìn)行調(diào)用返回就能得到想要的數(shù)據(jù)了。

總結(jié)

  以上就是今天要講的內(nèi)容，本文僅僅簡(jiǎn)單介紹了JS數(shù)據(jù)聚合的方法，ECS5和ECS6分別都有不同的寫(xiě)法。

到此這篇關(guān)于JavaScript數(shù)組中相同的元素進(jìn)行分組（數(shù)據(jù)聚合） groupBy函數(shù)的文章就介紹到這了,更多相關(guān)js數(shù)組分組groupBy函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論