Question

我正在做一些计算。通过用户输入，应该进行计算并用数据构建表。我的第一个数组calcTable可以正常工作，但是每一行代表一个月。在我的决赛桌中，我希望一行代表一年。

因此，我目前正在尝试填充一个新数组calcTableShow，该数组将保存此数据。我在填充calcTableShow的循环中遇到逻辑问题。可以在此图中看到逻辑：https://i.imgur.com/6qr03f9.png 颜色显示了我在两个表（数组）之间所需的逻辑。

计算calcTableShow数组中的付款和利息列的另一种方法可能是：
付款示例：
CalcTableShow.payment（p1）= CalcTable.totPayment（p12）-CalcTable.totPayment（p0） CalcTableShow.payment（p2）= CalcTable.totPayment（p24）-CalcTable.totPayment（p12）
更多...迭代次数

兴趣栏的逻辑相同。

请查看我的代码。可以在javascript代码的底部找到带有年度期限的新代码，该代码当前位于注释中。

我目前的主要问题是如何以正确的方式填充新数组。
另外，在SO处键入内容时，我在想，也许有一个解决方案只有一个循环，它只会创建一个数组（/表）？也许这是一个更好的选择？

我希望这有道理，在此先感谢，
-弗兰克

calculate();

//*********************************************
//************ LINK the INPUTS ****************
//*********************************************

// Select all inputs and add event listener "change" (for calc only).
var inputsArray = document.querySelectorAll("input");
inputsArray.forEach(el => el.addEventListener("change", calculate));

//inputsArray.forEach(el => el.addEventListener("input", linkValue));
//"input"... will cause massive lag with high "t" values...

// Select all inputs and add event listener "input" (for linking values only)
var inputsArrayTwo = document.querySelectorAll("input");
inputsArray.forEach(el => el.addEventListener("input", linkValue));

// Link the range with number inputs
function linkValue(e) {
  var sibling = e.target.previousElementSibling || e.target.nextElementSibling;
  sibling.value = e.target.value;
}

//*********************************************
//************ UPDATE TABLE OBJECT ************
//*********************************************
function calculate() {
  //*********************************************
  //************ VARS and CALCS *****************
  //*********************************************

  let P = parseFloat(document.querySelector("#calc_P").value);//principal
  let r = document.querySelector("#calc_r").value / 100;//interest
  let n = 12;//compounds
  let t = parseFloat(document.querySelector("#calc_t").value);//time in years
  let A = parseFloat(document.querySelector("#calc_A").value);//deposits
  let p = 12;//periods per year (months)

  let nper = p * t;//total number of periods
  let rate = (1 + r / n) ** (n / p) - 1;// calculation rate
  let F = P * (1 + rate) ** nper + (A * ((1 + rate) ** nper - 1)) / rate;//final value

  //test-array
  let calcTable = [];

  calcTable.push({
    period: 0,
    payment: 0,
    totPayment: P,
    interest: 0,
    totInterest: 0,
    balance: P
  });

  for (let i = 1; i < nper + 1; i++) {
    let previous = i - 1;
    let interest = calcTable[previous].balance * rate;
    calcTable[i] = {
      period: i,
      payment: A,
      totPayment: (P += A),
      interest,
      totInterest: interest + calcTable[previous].totInterest,
      balance: calcTable[previous].balance + A + interest
    };
  }
  /* THESE FUNCTIONS SHOULD LATER APPLY TO THE NEW ARRAY WITH YEARLY PERIODS
  function setPrecision(table) {
    for (let i = 0; i < table.length; i++) {
      for (let key in table[i]) {
        if (key === "interest" || key === "totInterest" || key === "balance") {
          table[i][key] = table[i][key].toFixed(0);
        }
      }
    }
  }

  setPrecision(calcTable);

  function localeSet(table) {
    for (let i = 0; i < table.length; i++) {
      for (let key in table[i]) {
        if (key === "interest" || key === "totInterest" || key === "balance") {
          table[i][key] = new Intl.NumberFormat("fr", {
            minimumFractionDigits: 0
          }).format(table[i][key]);
        } else {
          table[i][key] = new Intl.NumberFormat("fr").format(table[i][key]);
        }
      }
    }
  }
  localeSet(calcTable);
  */

  //*********************************************
  //************* CREATE HTML TABLE *************
  //*********************************************

  var tableSelector = "TblCalc";

  //call the jsonToTable Function
  jsonToTable(calcTable, tableSelector);

  function addEl(parent, nodeName, className) {
    var element = document.createElement(nodeName);
    if (className) element.className = className;
    if (parent) parent.appendChild(element);
    return element;
  }
  function addText(parent, text) {
    parent.appendChild(document.createTextNode(text));
  }
  function jsonToTable(json, selector) {
    var table = addEl(null, "table", "tbl-container");
    var tbody = addEl(table, "tbody");
    var thr = addEl(tbody, "tr", "tbl-headers");

    //loop through the property names of the first object
    for (var propertyName in json[0]) {
      addText(addEl(thr, "th"), propertyName);
    }

    //loop through the array of objects
    for (var ind = 0; ind < json.length; ind++) {
      var item = json[ind];
      var tr = addEl(tbody, "tr", "tbl-rows");
      //loop though each of the objects properties
      var first = ind != json.length - 1; // no first item for last row
      for (var key in item) {
        var el = addEl(tr, "td");
        if (first) {
          // <---- point of interest
          el = addEl(el, "div", "tbl-name-container ");
          el = addEl(el, "div", "tbl-name-text");
          first = false;
        }
        //append the table data containing the objects property value
        addText(el, "" + item[key]);
      }
    }

    var target = document.getElementById(selector);
    target.innerHTML = "";
    target.appendChild(table);
  }
  //*********************************************
  //******************** INIT *******************
  //*********************************************
  document.getElementById("finalValue").innerHTML = F.toFixed(0);
  document.getElementById("finalValueTwo").innerHTML = calcTable[nper].balance;
  document.getElementById("finalTotalPayments").innerHTML =
    calcTable[nper].totPayment;
  document.getElementById("finalTotalInterest").innerHTML =
    calcTable[nper].totInterest;
  //
  //
  //
  // NEW ARRAY WITH YEARLY PERIODS
  //
  //
  /*
  
  let calcTableShow = [];

  calcTableShow.push({
    period: 0,
    payment: 0,
    totPayment: calcTable[0].totPayment,
    interest: 0,
    totInterest: 0,
    balance: calcTable[0].totPayment
  });

  for (let i = 1; i < nper / 12 + 1; i++) {
    calcTableShow[i] = {
      period: i,
      payment: calcTable[i + i * 12].totPayment,
      totPayment: calcTable[i + i * 12].payment,
      interest: for (let i = 1; i < 13; i++) {calcTable[i].interest},
      totInterest: calcTable[i + i * 12].totInterest,
      balance: calcTable[i + i * 12].balance
    };
  }
  console.log(calcTableShow);
  
  */
  //
  //
  //
}

<div class="finalValue">Final Value v.1: <span id="finalValue">0</span></div>
<div class="finalValue">Final Value v.2: <span id="finalValueTwo">0</span></div>
<div class="finalValue">Final Total Payments: <span id="finalTotalPayments">0</span></div>
<div class="finalValue">Final Total Interest: <span id="finalTotalInterest">0</span></div>

<!-- INPUTS -->
<div>
  P: <input id="calc_P" type="number" value="1000">
  <input type="range" value="1000" step="100" max="10000"><br>
</div>
<div>
  A: <input id="calc_A" type="number" value="10">
  <input type="range" value="10" step="10" max="500"><br>
</div>
<div>
  t: <input id="calc_t" type="number" max="50" value="2">
  <input type="range" value="2" max="50"><br>
</div>
<div>
  r: <input id="calc_r" type="number" value="10">
  <input type="range" value="10" step=".1" max="25"><br>
</div>


<!-- TABLE -->
<div id="TblCalc" class="card table-card"></div>


<!-- JS -->
<script type="text/javascript" src="test.js"></script>

编辑：在托马斯·路德维希提供答案之后，我不太了解他的逻辑。我试图使它工作几个小时，但我做不到。现在，我使用if (i % 12 == 0)尝试用年度结果填充新数组。但是，我遇到了一些很难解决的问题。

以下代码：

calculate();

//*********************************************
//************ LINK the INPUTS ****************
//*********************************************

// Select all inputs and add event listener "change" (for calc only).
var inputsArray = document.querySelectorAll("input");
inputsArray.forEach(el => el.addEventListener("change", calculate));

//inputsArray.forEach(el => el.addEventListener("input", linkValue));
//"input"... will cause massive lag with high "t" values...

// Select all inputs and add event listener "input" (for linking values only)
var inputsArrayTwo = document.querySelectorAll("input");
inputsArray.forEach(el => el.addEventListener("input", linkValue));

// Link the range with number inputs
function linkValue(e) {
  var sibling = e.target.previousElementSibling || e.target.nextElementSibling;
  sibling.value = e.target.value;
}

//*********************************************
//************ UPDATE TABLE OBJECT ************
//*********************************************
function calculate() {
  //*********************************************
  //************ VARS and CALCS *****************
  //*********************************************

  let P = parseFloat(document.querySelector("#calc_P").value);  // Starting value
  let r = document.querySelector("#calc_r").value / 100;        // Interest
  let n = 12;                                                   // Compounds per year
  let t = parseFloat(document.querySelector("#calc_t").value);  // Time in years
  let A = parseFloat(document.querySelector("#calc_A").value);  // Deposits per period
  let p = 12;                                                   // Deposit periods yearly (monthly)

  let nper = p * t;                                             // total # periods
  let rate = (1 + r / n) ** (n / p) - 1;                        // interest rate
  let F = P * (1 + rate) ** nper + (A * ((1 + rate) ** nper - 1)) / rate; // Final value
  
//
/* OLD CODE
//
  //  new array
  let calcTable = [];

  //  push first row [0]
  calcTable.push({
    period: 0,
    payment: 0,
    totPayment: P,
    interest: 0,
    totInterest: 0,
    balance: P
  });

  //  add rest of rows, starting at [1]
  for (let i = 1; i < nper + 1; i++) {
    let previous = i - 1;
    let interest = calcTable[previous].balance * rate;
    calcTable[i] = {
      period: i,
      payment: A,
      totPayment: (P += A),
      interest,
      totInterest: interest + calcTable[previous].totInterest,
      balance: calcTable[previous].balance + A + interest
    };
  }
  */
  
//
// NEW CODE
//
  let calcTableNew = [];

calcTableNew.push({
  period: 0,
  payment: 0,
  totPayment: P,
  interest: 0,
  totInterest: 0,
  balance: P
});

for (let i = 1; i < nper / 12 + 1; i++) {
  let calcTableInsideLoop = [];
  for (let i = 1; i < nper + 1; i++) {
    let previous = i - 1;
    let interest = calcTableInsideLoop[previous].balance * rate;
    calcTableInsideLoop[i] = {
      period: i,
      payment: A,
      totPayment: (P += A),
      interest,
      totInterest: interest + calcTableInsideLoop[previous].totInterest,
      balance: calcTableInsideLoop[previous].balance + A + interest
    };
    if (i % 12 == 0) {
      addDataToYearlyArray();
    }
  }
  function addDataToYearlyArray() {
    calcTableNew[i] = {
      period: i,
      payment:
        calcTableInsideLoop[i * 12].totPayment -
        calcTableInsideLoop[i * 12 - 12].totPayment,
      totPayment: calcTableInsideLoop[i * 12].totPayment,
      interest:
        calcTableInsideLoop[i * 12].totInterest -
        calcTableInsideLoop[i * 12 - 12].totInterest,
      totInterest: calcTableInsideLoop[i * 12].totInterest,
      balance: calcTableInsideLoop[i * 12].balance
    };
  }
}

console.log(calcTableNew);
  
  //
  /* THESE FUNCTIONS ARE TEMPORARLY COMMENTED OUT, SHOULD APPLY TO THE NEW ARRAY WITH YEARLY PERIODS
  //
  function setPrecision(table) {
    for (let i = 0; i < table.length; i++) {
      for (let key in table[i]) {
        if (key === "interest" || key === "totInterest" || key === "balance") {
          table[i][key] = table[i][key].toFixed(0);
        }
      }
    }
  }

  setPrecision(calcTable);

  function localeSet(table) {
    for (let i = 0; i < table.length; i++) {
      for (let key in table[i]) {
        if (key === "interest" || key === "totInterest" || key === "balance") {
          table[i][key] = new Intl.NumberFormat("fr", {
            minimumFractionDigits: 0
          }).format(table[i][key]);
        } else {
          table[i][key] = new Intl.NumberFormat("fr").format(table[i][key]);
        }
      }
    }
  }
  localeSet(calcTable);
  */

  //*********************************************
  //************* CREATE HTML TABLE *************
  //*********************************************

  var tableSelector = "TblCalc";

  //call the jsonToTable Function
  jsonToTable(calcTable, tableSelector);

  function addEl(parent, nodeName, className) {
    var element = document.createElement(nodeName);
    if (className) element.className = className;
    if (parent) parent.appendChild(element);
    return element;
  }
  function addText(parent, text) {
    parent.appendChild(document.createTextNode(text));
  }
  function jsonToTable(json, selector) {
    var table = addEl(null, "table", "tbl-container");
    var tbody = addEl(table, "tbody");
    var thr = addEl(tbody, "tr", "tbl-headers");

    //loop through the property names of the first object
    for (var propertyName in json[0]) {
      addText(addEl(thr, "th"), propertyName);
    }

    //loop through the array of objects
    for (var ind = 0; ind < json.length; ind++) {
      var item = json[ind];
      var tr = addEl(tbody, "tr", "tbl-rows");
      //loop though each of the objects properties
      var first = ind != json.length - 1; // no first item for last row
      for (var key in item) {
        var el = addEl(tr, "td");
        if (first) {
          // <---- point of interest
          el = addEl(el, "div", "tbl-name-container ");
          el = addEl(el, "div", "tbl-name-text");
          first = false;
        }
        //append the table data containing the objects property value
        addText(el, "" + item[key]);
      }
    }

    var target = document.getElementById(selector);
    target.innerHTML = "";
    target.appendChild(table);
  }
  //*********************************************
  //******************** INIT *******************
  //*********************************************
  document.getElementById("finalValue").innerHTML = F.toFixed(0);
  document.getElementById("finalValueTwo").innerHTML = calcTable[nper].balance;
  document.getElementById("finalTotalPayments").innerHTML =
    calcTable[nper].totPayment;
  document.getElementById("finalTotalInterest").innerHTML =
    calcTable[nper].totInterest;
}

<div class="finalValue">Final Value v.1: <span id="finalValue">0</span></div>
<div class="finalValue">Final Value v.2: <span id="finalValueTwo">0</span></div>
<div class="finalValue">Final Total Payments: <span id="finalTotalPayments">0</span></div>
<div class="finalValue">Final Total Interest: <span id="finalTotalInterest">0</span></div>

<!-- INPUTS -->
<div>
  P: <input id="calc_P" type="number" value="1000">
  <input type="range" value="1000" step="100" max="10000"><br>
</div>
<div>
  A: <input id="calc_A" type="number" value="10">
  <input type="range" value="10" step="10" max="500"><br>
</div>
<div>
  t: <input id="calc_t" type="number" max="50" value="2">
  <input type="range" value="2" max="50"><br>
</div>
<div>
  r: <input id="calc_r" type="number" value="10">
  <input type="range" value="10" step=".1" max="25"><br>
</div>


<!-- TABLE -->
<div id="TblCalc" class="card table-card"></div>


<!-- JS -->
<script type="text/javascript" src="test2.js"></script>

我希望有人可以在这里向正确的方向提供帮助。 -弗兰克

编辑2-已解决
我找到了一种解决年度阵列/表问题的方法。这段代码仍然有些混乱。但是现在它正在按预期工作。

//*********************************************
//************ LINK the INPUTS ****************
//*********************************************

//debugger - delete me
var inputsArrayDebug = document.querySelectorAll("input");
inputsArrayDebug.forEach(el => el.addEventListener("change", debug));

// Select all inputs and add event listener "input" (for linking values only)
var inputsArray = document.querySelectorAll("input");
inputsArray.forEach(el => el.addEventListener("input", linkValue));

// Link the range with number inputs
function linkValue(e) {
  var sibling = e.target.previousElementSibling || e.target.nextElementSibling;
  sibling.value = e.target.value;
  parametersCalculationGet();
  tablesInit(para.P);
  monthlyTableCalculate();
  annualTableCalculate();
}

//*********************************************
//************ CALCULATIONS *******************
//*********************************************

//  set up new empty arrays
var monthlyTable;
var annualTable;
//  create month and annual table array element
//  and push the first row [0]
function tablesInit(P) {
  
  monthlyTable = [];
  annualTable = [];
  var obj = {};
  obj.period = 0;
  obj.payment = 0;
  obj.totPayment = P;
  obj.interest = 0;
  obj.totInterest = 0;
  obj.balance = P;
  monthlyTable.push(obj);
  annualTable.push(obj);
}

function monthlyTableAddNewMonth() {
  var obj = {};
  var previous = monthlyTable.length - 1;
  var interest = monthlyTable[previous].balance * para.rate;
  //  add monthly input datas to month table;
  obj.period = monthlyTable.length;
  obj.payment = para.A;
  obj.totPayment = para.P += para.A;
  obj.interest = interest;
  obj.totInterest = interest + monthlyTable[previous].totInterest;
  obj.balance = monthlyTable[previous].balance + para.A + interest;
  monthlyTable.push(obj);
}

function annualTableAddNewYear() {
  var obj = {};
  var currentAnTable = annualTable.length;
  var previous = monthlyTable.length - 1;
  //  add monthly input datas to month table;
  obj.period = currentAnTable;
  obj.payment =
    monthlyTable[currentAnTable * 12].totPayment -
    monthlyTable[currentAnTable * 12 - 12].totPayment;
  obj.totPayment = monthlyTable[currentAnTable * 12].totPayment;
  obj.interest =
    monthlyTable[currentAnTable * 12].totInterest -
    monthlyTable[currentAnTable * 12 - 12].totInterest;
  obj.totInterest = monthlyTable[currentAnTable * 12].totInterest;
  obj.balance = monthlyTable[currentAnTable * 12].balance;
  annualTable.push(obj);
}

function parametersCalculationGet() {
  //******************************* FIRES VID INPUT
  //  get calculation  parameters and store in object
  para = {};

  para.P = parseFloat(document.querySelector("#calc_P").value); // Starting value
  para.r = document.querySelector("#calc_r").value / 100; // Annual interest
  para.n = 12; // Compounds per year
  para.t = parseFloat(document.querySelector("#calc_t").value); // Time in years
  para.A = parseFloat(document.querySelector("#calc_A").value); // Deposits per period
  para.p = 12; // Deposit periods per year

  para.nper = para.p * para.t; // total number of periods
  para.rate = (1 + para.r / para.n) ** (para.n / para.p) - 1; // calculated interest rate
  para.F =
    para.P * (1 + para.rate) ** para.nper +
    (para.A * ((1 + para.rate) ** para.nper - 1)) / para.rate; // Final value
  return para;
}

//  update monthly payments and interests
function monthlyTableCalculate() {
  // i assume taht hete some parameters for the calculation will be obtained from somewhere
  var para = parametersCalculationGet();

  for (i = 0; i < para.nper; i++) {
    monthlyTableAddNewMonth();
  }
}

function annualTableCalculate() {
  var para = parametersCalculationGet();
  //    if (i % 12 == 0) {   } nice trick but now not needed anymore
  for (i = 0; i < para.t; i++) {
    annualTableAddNewYear();
  }
}



// Init
// Get parameters
parametersCalculationGet();
// Push first row [0] to monthlyTable and annualTable
tablesInit(para.P);
// Calculate and push rest of rows to monthlyTable
monthlyTableCalculate();
annualTableCalculate();

function debug() {
  console.log("monthlyTable");
  console.log(monthlyTable);
  console.log("annualTable");
  console.log(annualTable);
}

console.log("monthlyTable");
console.log(monthlyTable);
console.log("annualTable");
console.log(annualTable);

<div class="finalValue">Final Value v.1: <span id="finalValue">0</span></div>
<div class="finalValue">Final Value v.2: <span id="finalValueTwo">0</span></div>
<div class="finalValue">Final Total Payments: <span id="finalTotalPayments">0</span></div>
<div class="finalValue">Final Total Interest: <span id="finalTotalInterest">0</span></div>

<!-- INPUTS -->
<div>
  P: <input id="calc_P" type="number" value="1000">
  <input type="range" value="1000" step="100" max="10000"><br>
</div>
<div>
  A: <input id="calc_A" type="number" value="10">
  <input type="range" value="10" step="10" max="500"><br>
</div>
<div>
  t: <input id="calc_t" type="number" max="50" value="2">
  <input type="range" value="2" max="50"><br>
</div>
<div>
  r: <input id="calc_r" type="number" value="10">
  <input type="range" value="10" step=".1" max="25"><br>
</div>


<!-- TABLE -->
<div id="TblCalc" class="card table-card"></div>


<!-- JS -->
<script type="text/javascript" src="test3.js"></script>

Answer 1

感叹好的，好的，您是js的新手，我不会让您spaghettyfie您的第一个程序... 如您所见，简单的事情可以简单地完成：)请检查以下公式-否则您的船，别墅和妻子将不见了;）

            var monthlyTable ;
            var annualTable  ;
            // set up new empty array
            // vreate new array element
            function monthlyTableInit(P) {
                    monthlyTable=[];
                    var obj = {};
                    obj.period = 0;
                    obj.payment = 0;
                    obj.totPayment = P;
                    obj.interest = 0;
                    obj.totInterest = 0;
                    obj.balance = P;
            };


            function monthlyTableAddNewMonth(payment, totPayment, interest, toInterest, balance) {
                    var obj = {}
                    //  add monthly input datas to month table;
                    obj.period = monthlyTable.lenght;
                    obj.payment = 0;
                    obj.totPayment = P;
                    obj.interest = 0;
                    obj.totInterest = 0;
                    obj.balance = P;
                    monthlyTable.push(obj)
            };

            function parametersCalculationGet() {

                    //get calculation  parameters and store in object
                    para = {};

                    para.P = parseFloat(document.querySelector("#calc_P").value); // Starting value
                    para.r = document.querySelector("#calc_r").value / 100; // Interest
                    para.n = 12; // Compounds per year
                    para.t = parseFloat(document.querySelector("#calc_t").value); // Time in years
                    para.A = parseFloat(document.querySelector("#calc_A").value); // Deposits per period
                    para.p = 12; // Deposit periods yearly (monthly)

                    para.nper = p * t; // total # periods
                    para.rate = (1 + r / n) ** (n / p) - 1; // interest rate
                    para.F = P * (1 + rate) ** nper + (A * ((1 + rate) ** nper - 1)) / rate; // Final value
                    return para
            }
            //update montlys payments and interests

            function monthlyTableCalculate {
                    // i asume taht hete some parameters for the calculation will be obtained from somewhere
                    var para = parametersCalculationGet();

                    for(i = 0; i<monthlyTable.length; i++) {
                            let previous = i - 1;
                            // this matheematics will be buggy i do not know your algorithm
                            var obj = {};
                            obj.period = i;
                            obj.payment = 0;
                            obj.interest = 0;
                            obj.totInterest = 0;
                            obj.totPayment = P;
                            obj.balance = P;
                            obj.interest = calcTableInsideLoop[previous].balance * para.rate;
                            obj.totInterest = interest + calcTableInsideLoop[previous].totInterest;
                            obj.payment = para.A;
                            obj.totPayment = (obj.P += para.A);
                            obj.interest = 0; //  ?
                            obj.totInterest = obj.interest + monthlyTable[previous].totInterest;
                            obj.balance: monthlyTable[previous].balance + obj.A + obj.interest;

                    }
            }

            function anualTableCreate(startMonth) {
                var annualTable =[];
                //    if (i % 12 == 0) {   } nice trick but now not needed anymopre
                    for(i = startMonth; i<monthlyTable.length; i = i + 12) {// ad start as a offset
                            annualTable.push(monthlyTable[i]);
                    }
            }

            function runCalculation() {
                    monthlyTableInit(P);
                    console.log("monthlyTable");
                    console.log(monthlyTable);
                    anualTableCreate(0);
                    console.log("annualTable");
                    console.log(annualTable);
            }

通过遍历另一个数组来填充新数组

1 个答案: