创建一个表并计算每列的总和

Question

我想创建一个类库来处理一些用户输入。用户可以使用列名和逗号分隔值在 UI 中添加列。我想对这些数据进行一些计算并将其呈现在数据表中。更具体地说，计算每个特定列的输入值的总和，而不考虑输入的值的数量，然后计算列的总和。我被困在如何计算数组中每个特定列的总和，然后计算这些列值的总和。非常感谢任何帮助。

// 类

export class DataTable {
    public constructor(id: string) {
        this.id = id;
    }

    public readonly id: string;
    public rowCount: number = 0;
    public columnCount: number = 0;

    public columnName: string;
    public columnValuesAsCsv: string;
    public listOfColumns: any[] = [];
    public listOfValues: any[] = [];

    public addColumn(columnName: string, columnValuesAsCsv: string) {
           this.columnName = columnName;
           this.columnValuesAsCsv = columnValuesAsCsv;

           this.listOfColumns.push(this.columnName);
           while (this.listOfColumns.push()) {
              this.listOfValues.push(this.columnValuesAsCsv);
              break;
           }
           console.log(this.listOfColumns);
           console.log(this.listOfValues);

           this.rowCount = this.listOfValues.length;
           this.columnCount = this.listOfColumns.length; 
    }
    
    public calculateSum(resSum: number, name: any) {
        if (this.columnName !== null && this.columnValuesAsCsv !== null) {
            for (name of this.listOfColumns) {
                //get the sum of column
                resSum = this.listOfValues.reduce((acc: number, item: string) => acc += parseInt(item), 0);
            }
            return resSum;
        }
    }

// UI 的 .ts 文件

import { DataTable } from '../DataTable/DataTable';

export default
    {

        data() {
            return {
                table: new DataTable("ABC"),

                tableId: "",

                columnName: "",

                columnValuesAsCsv: "",

                rowValuesAsCsv: "",

            }
        },
      
        methods:
        {
            onNewTable() {
                console.log(`New Table: ${this.tableId}`);
                // this.table....
            },

            onAddColumn() {
                this.table.addColumn(this.columnName, this.columnValuesAsCsv);
                console.log(this.columnName, this.columnValuesAsCsv);
            },

            onSum() {
                const resSum = this.table.calculateSum();
                console.log(`Sum of column values is: ${name}: ${resSum}`)

            },
        }
    }

listOfColumns[] 的列名 p1,p2 由用户使用表单字段输入。
lisfOfValues[] 的列值分别为 p1 (1,2)、p2 ( 3,4) 由用户使用表单域输入
我正在尝试计算每个 columnName 的总和并将其显示在这样的控制台上：“p1 的总和为：3”、“p2 的总和为：7”等...
最后我想显示：“列的总和是：10”（在这种情况下）。
我希望这能让它更清楚吗？

Answer 1

我不确定代码中的某些部分是否意味着其他功能，但我简化了代码以说明这一点。

• listOfValues 现在是 numbers 的数组，它在 addColumn 上解析，而不是稍后进行奇怪的解析。
• calculateSum 接受非参数并返回（作为对象）[columnName, columnSum] 的数组和总和。 （totalSum 是 reduce 的 reduce）。

class DataTable {
  public constructor(id: string) {
    this.id = id;
  }

  public readonly id: string;
  public rowCount: number = 0;
  public columnCount: number = 0;

  public columnName: string;
  public columnValuesAsCsv: string;
  public listOfColumns: string[] = [];
  public listOfValues: number[][] = [];

  private arraySum(array: number[]) {
    return array.reduce((acc, item) => acc + item, 0);
  }

  public addColumn(columnName: string, columnValuesAsCsv: string) {
    this.listOfColumns.push(columnName);
    this.listOfValues.push(columnValuesAsCsv.split(",").map(Number));
    // this.columnName = columnName;
    // this.columnValuesAsCsv = columnValuesAsCsv;

    // this.listOfColumns.push(this.columnName);
    // while (this.listOfColumns.push()) {
    //   this.listOfValues.push(this.columnValuesAsCsv);
    //   break;
    // }
    // console.log(this.listOfColumns);
    // console.log(this.listOfValues);

    // this.rowCount = this.listOfValues.length;
    // this.columnCount = this.listOfColumns.length;
  }

  // public calculateSum(resSum: number, name: any) {
  public calculateSum() {
    const columnsSum: [string, number][] = this.listOfValues.map(
      (columnValues, index) => [
        this.listOfColumns[index],
        this.arraySum(columnValues)
      ]
    );
    return {
      columnsSum,
      totalSum: this.arraySum(columnsSum.map(([, columnSum]) => columnSum))
    };
  }
  //   if (this.columnName !== null && this.columnValuesAsCsv !== null) {
  //     for (name of this.listOfColumns) {
  //       //get the sum of column
  //       resSum = this.listOfValues.reduce(
  //         (acc: number, item: string) => (acc += parseInt(item)),
  //         0
  //       );
  //     }
  //     return resSum;
  //   }
  // }
}

const dt = new DataTable("id");
dt.addColumn("p1", "1, 2");
dt.addColumn("p2", "3, 4");

const { columnsSum, totalSum } = dt.calculateSum();
columnsSum.forEach(([name, sum]) => console.log(`sum of: ${name} is ${sum}`));
console.log(`total sum of columns is: ${totalSum}`);

https://stackblitz.com/edit/typescript-opp1qz

注意：我会将数据存储在 Map 而不是 2 个单独的数组中，以便在添加、删除和搜索时保持同步。