当前位置：首页 > JavaScript

js实现小计

2026-04-06 02:35:45JavaScript

实现小计功能

在JavaScript中实现小计功能通常涉及对数组或对象中的数值进行累加。以下是几种常见场景的实现方法：

数组元素求和

对数字数组进行累加计算：

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

对象属性求和

对对象数组中特定属性进行累加：

const items = [
  { name: '商品A', price: 100 },
  { name: '商品B', price: 200 },
  { name: '商品C', price: 300 }
];

const subtotal = items.reduce((sum, item) => sum + item.price, 0);
console.log(subtotal); // 输出: 600

动态计算小计

在购物车等动态场景中实时计算：

function calculateSubtotal(cartItems) {
  return cartItems.reduce((total, item) => {
    return total + (item.price * item.quantity);
  }, 0);
}

// 示例用法
const cart = [
  { id: 1, name: '鼠标', price: 50, quantity: 2 },
  { id: 2, name: '键盘', price: 80, quantity: 1 }
];

console.log(calculateSubtotal(cart)); // 输出: 180

带税计算

包含税率的小计计算：

function calculateTotal(subtotal, taxRate) {
  const tax = subtotal * taxRate;
  return {
    subtotal: subtotal,
    tax: tax,
    total: subtotal + tax
  };
}

const result = calculateTotal(200, 0.08);
console.log(result);
// 输出: {subtotal: 200, tax: 16, total: 216}

表格行小计

对HTML表格中的数据进行计算：

js实现小计

<table id="orderTable">
  <tr><td>商品A</td><td class="price">100</td><td class="qty">2</td></tr>
  <tr><td>商品B</td><td class="price">200</td><td class="qty">1</td></tr>
</table>
<p id="subtotal"></p>

<script>
  function updateSubtotal() {
    const rows = document.querySelectorAll('#orderTable tr');
    let subtotal = 0;

    rows.forEach(row => {
      const price = parseFloat(row.querySelector('.price').textContent);
      const qty = parseFloat(row.querySelector('.qty').textContent);
      subtotal += price * qty;
    });

    document.getElementById('subtotal').textContent = `小计: $${subtotal}`;
  }

  updateSubtotal();
</script>