如何在javascript映射函数中创建累积变量

我在React中创建了一个表。我使用javascript映射一个对象，该对象包含呈现动态表所需的所有信息。我的两个列包含数字，我想在另一列中将这些列相加到给定的点。下面是我的表格示例

其思想是，余额栏将总计整个借方栏，直到该点。所以第一行的平衡单元格应该是50（就像它一样）。但是，余额列中的第二个单元格需要显示100（借方列中截至该点的所有单元格的总和）。下面是我用来映射对象（存储在状态中）以填充表的react代码。请注意，balance列未存储在对象中…我试图以某种方式在map函数中创建此列值

<table id="transactionDetailDisplay">
        <tr>
            <th>#</th>
            <th>Account</th>
            <th>Description</th>
            <th>Debit</th>
            <th>Credit</th>
            <th>Balance</th>
            </tr>       
    {this.state.transactionObject.map((item =>
        <tr>
            <td>{}</td>
            <td>{item.AccountID}</td>
            <td>{item.Description}</td>
            <td>{item.Debit}</td>
            <td>{item.Credit}</td>
            <td>{item.Debit}</td>
        </tr>))}
    </table>

#
账户
描述
借记
信用
平衡
{this.state.transactionObject.map（（项=>
{}
{item.AccountID}
{item.Description}
{item.Debit}
{item.Credit}
{item.Debit}
))}

---

我想做的是在map函数中添加一个变量作为累加器。例如，我不想将最后一个表数据项声明为item.Debit，而是想将item.Debit存储在一个变量中，然后将该变量值放在表数据行中。在映射函数的每个循环中，我都会将item.Debit添加到变量中，以累积要在余额中显示的正确总和。但是，我很难找到合适的javascript来在映射函数和/或表标记中创建变量累加器。我认为，因为它在table标记中，所以我不能像在其他地方一样定义一个变量。有没有办法做到这一点，也许用特殊的语法？有人知道帮我的窍门吗？非常感谢你的建议

您可以事先创建一个变量，添加到映射回调中

{
    (() => {
        let debit = 0;
        return this.state.transactionObject.map((item) => {
            debit += item.Debit;
            return (
                <tr>
                    <td>{ }</td>
                    <td>{item.AccountID}</td>
                    <td>{item.Description}</td>
                    <td>{item.Debit}</td>
                    <td>{item.Credit}</td>
                    <td>{debit}</td>
                </tr>);
        })
    })()
}

---

Array.prototype.map

函数回调应该是一个纯函数，即没有像改变平衡值这样的副作用。使用

Array.prototype.reduce

将数组缩减为单个值

const balance = this.state.transactionObject.reduce(
  (balance, { Debit }) => balance + Debit,
  0,
);

如果您需要计算多个总计，您可以减少到一个对象，该对象具有表示所需总计的不同属性，这样您仍然只需迭代数组一次即可计算它们

编辑 我想我最初误解了您的请求，您希望显示截至当前行的累计余额

首先预先计算每行的余额

const arr = this.state.transactionObject.map((item, index, arr) => ({
  ...item,
  Balance: arr[index - 1]?.Balance ?? 0) + item.Debit ?? 0
}));

...

{arr.map((item =>
  <tr>
    <td>{}</td>
    <td>{item.AccountID}</td>
    <td>{item.Description}</td>
    <td>{item.Debit}</td>
    <td>{item.Credit}</td>
    <td>{item.Balance}</td>
  </tr>)
)}

const arr=this.state.transactionObject.map（（项、索引、arr）=>({
…项目，
余额：arr[索引-1]？。余额0）+项目。借方0
}));
...
{arr.map（（项=>
{}
{item.AccountID}
{item.Description}
{item.Debit}
{item.Credit}
{item.Balance}
)
)}

非常感谢！！您包含的所有返回语句和语法规则对我来说都非常混乱，完全不符合我的要求（不过它确实工作得很好！）。你是否熟悉解释所有这些奇怪语法的资源，你可以告诉我吗？IIFE

（（）=>{}）（

是用来创建一个可以在其中声明变量的范围的。需要它，以便

让debit=0可以初始化，否则无法创建滚动值。我不知道你指的是什么奇怪的语法。
const debits = this.state.transactionObject.map((_, i, arr) => (
    arr.slice(0, i + 1).reduce((a, b) => a + b)
));

const balance = this.state.transactionObject.reduce(
  (balance, { Debit }) => balance + Debit,
  0,
);

const arr = this.state.transactionObject.map((item, index, arr) => ({
  ...item,
  Balance: arr[index - 1]?.Balance ?? 0) + item.Debit ?? 0
}));

...

{arr.map((item =>
  <tr>
    <td>{}</td>
    <td>{item.AccountID}</td>
    <td>{item.Description}</td>
    <td>{item.Debit}</td>
    <td>{item.Credit}</td>
    <td>{item.Balance}</td>
  </tr>)
)}