前言

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

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

1.groupBy()函數(shù)

  聚合用groupBy這個函數(shù)，它傳兩個形參一為對象數(shù)組，二為匿名函數(shù)（該函數(shù)功能：返回對象的某個指定屬性的屬性值并存放在數(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] = [] //這樣寫就會覆蓋之前的數(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所對應(yīng)的數(shù)組可以

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

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

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

2.sortData()函數(shù)

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

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

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

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

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

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時間戳來進(jìn)行排序，而紅框中的數(shù)據(jù)就是push[element,group]中的group。

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

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

1.groupBy()函數(shù)

  /**
   * author: CSH
   * 函數(shù)功能：給定參數(shù)對數(shù)組進(jìn)行分組并排序
   * @param {Object} array [需要排序的數(shù)組]
   * @param {Object} func [該函數(shù)參數(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] = [];  // 這樣就能得到當(dāng)前小時時間段內(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中對數(shù)組只保留最新兩項(xiàng)數(shù)據(jù)需要用到JS中數(shù)組里的 shift()方法 （位移元素）了，位移與彈出等同，但處理首個元素而不是最后一個。shift() 方法會刪除首個數(shù)組元素，并把所有其他元素“位移”到更低的索引了（類似于隊(duì)列一樣）。使用該方法就可以保證數(shù)組內(nèi)的元素都是最新兩項(xiàng)。

2.sortData()函數(shù)（無改動）

  /**
   * author: CSH
   * 函數(shù)功能：給定數(shù)組，并返回需要分組的對象，然后根據(jù)該對象進(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(); // 返回需要分組的對象
      // return item.name; // 返回需要分組的對象
    });
    return sorted;
  },

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

總結(jié)

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

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

最新評論