时间戳

首页 > 解决方案 > Split map reduce方法单项报错

javascript - Split map reduce方法单项报错

问题描述

我有一个 split.map.reduce 计算平均数的方法。如果有两个以上的数字，它工作正常。我希望仅在有两个或多个值时才使用此方法。

示例：8,6,10 | AVG = 8,00（工作正常）

示例 2： 9 | AVG = 9（如果只有一个值，它会给我一个错误）

这是我的方法：

grade.grade.split(',')
  .map(v => Number(v))
  .reduce((a, c, i, arr) => {a += c; if (i === arr.length - 1) { a /= arr.length } return a}, 0)
  .toFixed(2)


const grade = { grade: '9' }

const avg = grade.grade.split(',')
  .map(v => Number(v))
  .reduce((a, c, i, arr) => { a += c; if (i === arr.length - 1) { a /= arr.length } return a }, 0)
  .toFixed(2);

console.log(avg);

我在 JSX 中使用它

完整的 JSX 表代码：

table className="table__date">
        <thead>
          <tr>
            <th>Materia</th>
            <th>Grade</th>
            <th>AVG</th>
          </tr>
        </thead>
        <tbody>
          {studentsGrades
            .filter((a) => Number(a.partial) === Number(semester))
            .map((grade, i) => {
              return (
                <tr key={i}>
                  <td className="alignRight">
                    <span>{getSubjectName(grade.userSubject)}</span>
                  </td>
                  <td>{grade.grade}</td>
                  <td>{ 
                      grade.grade.split(',').map(v => Number(v)).reduce((a, c, i, arr) => {a += c; if (i === arr.length - 1) { a /= arr.length } return a}, 0).toFixed(2)
                  }
                  </td>
                </tr>
              );
            })}
        </tbody>
      </table>

标签： javascriptreactjs

解决方案

您遇到的问题是单值成绩作为数字输入，而多个成绩是字符串。数字不实现split()方法，因此会引发错误。

最好纠正数据源，使其始终键入，但如果不能，您可以在继续之前键入检查值。

<td>
  {
    typeof grade.grade === 'number'
      ? grade.grade
      : grade.grade.split(',')
        .map(v => Number(v))
        .reduce((a, c, i, arr) => { a += c; if (i === arr.length - 1) { a /= arr.length } return a }, 0)
        .toFixed(2)
  }
</td>

推荐阅读