【发布时间】：2019-09-07 21:49:22
【问题描述】：
我正在做一些计算。通过用户输入，应该进行计算并建立一个包含数据的表格。
我的第一个数组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 上打字时，我在想也许有一个只有一个循环的解决方案，它只会创建一个数组 (/table)？那可能是一个更好的选择吗？
我希望这是有道理的，在此先感谢，
--Frank
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>编辑：
在Thomas Ludewig提供的答案之后，我不太明白他的逻辑。我已经尝试让它工作了几个小时，但我无法做到正确。使用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>【问题讨论】：
标签： javascript arrays loops calculation