如何根据 Typecript 中的某个给定数字对对象数组的元素进行分组

Question

我在 Angular 项目中有一个需求。我有一系列对象。它包含 6 个对象。我想将前 3 个分组到一个组中，将其他 3 个分组到另一组中。数组是staticKpi. 这是我的逻辑：

  staticKpi=[{},{},{},{},{},{}];

  ...

  createGrouping() {

    var chunks = [],

      i = 0,

      n = this.staticKpi.length;

    while (i < n) {

      chunks.push(this.staticKpi.slice(i, (i += 3)));

    }

    this.staticKpi = chunks;

  }

最终数组应该是这样的：

staticKpi=[[{},{},{}],[{},{},{}]]

但我没有得到正确的输出。这是stackblitz。请纠正我的错误。

Answer 1

它应该可以帮助你：const foo = [1, 2, 3, 4, 5, 6, 7, 8, 9]const count = 3;const len = foo.length / 3;function splitInto(arr){&nbsp; &nbsp;return Array(len).fill(0).reduce((acc, _, index) => [...acc, arr.slice(index * 3, index * 3 + 3)], [])}const result = splitInto(foo) //&nbsp; [[1, 2, 3], [4, 5, 6], [7, 8, 9]];我没有考虑长度不被3整除的数组。但不难弄清楚如何处理它

Answer 2

根据你的 stackblitz 样本import { Component, OnInit, VERSION } from "@angular/core";@Component({&nbsp; selector: "my-app",&nbsp; templateUrl: "./app.component.html",&nbsp; styleUrls: ["./app.component.css"]})export class AppComponent implements OnInit {&nbsp; name = "Angular " + VERSION.major;&nbsp; staticKpi2: {&nbsp; &nbsp; kpi: string;&nbsp; &nbsp; headerString: string;&nbsp; &nbsp; footerString: string;&nbsp; }[] = [];&nbsp; staticKpi: {&nbsp; &nbsp; kpi: string;&nbsp; &nbsp; headerString: string;&nbsp; &nbsp; footerString: string;&nbsp; }[][] = [];&nbsp; breakPoint = 3;&nbsp; ngOnInit() {&nbsp; &nbsp; this.populateObject();&nbsp; }&nbsp; populateObject() {&nbsp; &nbsp; this.staticKpi2.push(&nbsp; &nbsp; &nbsp; ...[&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; kpi: "SpO2",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; headerString: "High: 97 and above",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; footerString: "Low: 94 and below"&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; kpi: "Temperature",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; headerString: "High: 100.4 and above",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; footerString: "Low: 94 and below"&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; kpi: "BP",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; headerString: "High: 140/90 ",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; footerString: "Low: 90/60"&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; kpi: "Respiratoin",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; headerString: "High: 25 per min",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; footerString: "Low: 10 per min"&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; kpi: "Pulse rate",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; headerString: "High: 100 and above",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; footerString: "Low: 50 and below"&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; kpi: "D-Dimer",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; headerString: "Negative: 0.50 and Less",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; footerString: "Positive: Greater than 0.50"&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; );&nbsp; &nbsp; // console.log(this.staticKpi);&nbsp; &nbsp; this.createGrouping();&nbsp; }&nbsp; createGrouping() {&nbsp; &nbsp; for (let i = 0; i < this.staticKpi2.length; i += this.breakPoint) {&nbsp; &nbsp; &nbsp; this.staticKpi.push([...this.staticKpi2].splice(i, this.breakPoint));&nbsp; &nbsp; }&nbsp; &nbsp; console.log(this.staticKpi);&nbsp; }}

Answer 3

function createGrouping(arrData) {&nbsp; &nbsp; let result = [];&nbsp; &nbsp; let arr3 = [];&nbsp; &nbsp; arrData.forEach(item => {&nbsp; &nbsp; &nbsp; &nbsp; if(arr3.length < 3) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; arr3.push(item);&nbsp; &nbsp; &nbsp; &nbsp; } else if(arr3.length === 3) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; result.push([...arr3]);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; arr3 = [];&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; &nbsp; result = arr3.length > 0 ? result.push([...arr3]) : result;&nbsp; &nbsp; return result;}