当前位置：首页 > JavaScript

js实现总计

2026-04-05 21:25:20JavaScript

在JavaScript中实现总计功能通常涉及数组元素的累加、对象属性的求和或表格数据的汇总。以下是几种常见场景的实现方法：

数组元素求和

对数字数组进行总计可直接使用 reduce 方法：

js实现总计

const numbers = [10, 20, 30, 40];
const total = numbers.reduce((sum, current) => sum + current, 0);
console.log(total); // 输出 100

对象属性求和

若需对对象数组中某个属性求和：

const items = [
  { name: 'A', price: 10 },
  { name: 'B', price: 20 },
  { name: 'C', price: 30 }
];
const totalPrice = items.reduce((sum, item) => sum + item.price, 0);
console.log(totalPrice); // 输出 60

动态表格数据总计

对HTML表格中某一列数据求和：

js实现总计

const table = document.getElementById('data-table');
const rows = table.querySelectorAll('tr');
let total = 0;

// 跳过表头，从第二行开始
for (let i = 1; i < rows.length; i++) {
  const cells = rows[i].querySelectorAll('td');
  const value = parseFloat(cells[2].textContent); // 假设第三列是数字
  if (!isNaN(value)) total += value;
}
console.log(total);

带条件筛选的求和

结合 filter 实现条件筛选后求和：

const transactions = [
  { amount: 100, type: 'income' },
  { amount: 50, type: 'expense' },
  { amount: 200, type: 'income' }
];
const incomeTotal = transactions
  .filter(t => t.type === 'income')
  .reduce((sum, t) => sum + t.amount, 0);
console.log(incomeTotal); // 输出 300

格式化输出结果

使用 toLocaleString 添加千位分隔符：

const grandTotal = 1234567.89;
const formattedTotal = grandTotal.toLocaleString('en-US', {
  style: 'currency',
  currency: 'USD'
});
console.log(formattedTotal); // 输出 "$1,234,567.89"