jQuery each循环中修改外部变量的5种解决方案

1. jQuery each循环中修改外部变量的核心机制

在jQuery开发中，.each()方法是最常用的循环遍历方式之一，但许多开发者都会遇到在循环内部修改外部变量无效的困扰。这实际上涉及JavaScript的作用域和闭包机制。

1.1 基本用法与问题重现

先看一个典型的问题案例：

javascript复制var total = 0;
var items = [10, 20, 30];

$.each(items, function(index, value) {
  total += value;
});

console.log(total); // 输出60，这符合预期

但当遇到对象数组时，问题就出现了：

javascript复制var users = [{score: 5}, {score: 10}, {score: 15}];
var bonus = 2;

$.each(users, function(index, user) {
  user.score += bonus; // 直接修改对象属性
});

console.log(users[0].score); // 输出7，修改成功

而如果是基本类型变量：

javascript复制var baseValue = 100;
var multipliers = [1.1, 1.2, 1.3];

$.each(multipliers, function(index, multiplier) {
  baseValue *= multiplier; // 试图修改外部基本类型变量
});

console.log(baseValue); // 仍然输出100，修改失败！

1.2 作用域链与变量访问

造成这种现象的根本原因在于：

1. 对于对象类型，传递的是引用，所以内部修改会反映到外部
2. 对于基本类型（number/string/boolean），传递的是值副本
3. jQuery的.each()回调函数会创建新的函数作用域

重要提示：在JavaScript中，函数参数相当于在函数作用域内声明的新变量，基本类型参数与外部变量已经没有关联关系。

2. 五种解决方案与性能对比

2.1 闭包引用法（推荐）

通过IIFE（立即执行函数）创建闭包环境：

javascript复制var counter = 0;
(function() {
  var tempCounter = counter;
  $('.items').each(function() {
    tempCounter += parseInt($(this).data('value'));
  });
  counter = tempCounter;
})();

优点：

• 明确的作用域控制
• 避免全局污染
• 适合复杂计算场景

2.2 对象包装法

将基本类型包装为对象属性：

javascript复制var container = { value: 0 };
$('[data-increment]').each(function() {
  container.value += parseInt($(this).data('increment'));
});

2.3 数组索引法

当遍历数组时直接通过索引修改：

javascript复制var numbers = [1, 2, 3];
$.each(numbers, function(index, value) {
  numbers[index] = value * 2; // 直接通过原数组索引修改
});

2.4 jQuery数据缓存法

利用jQuery的.data()方法：

javascript复制var $container = $('#container');
$container.data('sum', 0);

$('.item').each(function() {
  var current = $container.data('sum');
  $container.data('sum', current + $(this).data('value'));
});

2.5 返回值收集法

通过返回新数组再赋值：

javascript复制var prices = [100, 200, 300];
var discounted = [];

$.each(prices, function(index, price) {
  discounted.push(price * 0.8);
});

prices = discounted; // 最终替换原数组

性能对比表：

3. 实战中的典型应用场景

3.1 购物车金额计算

javascript复制var cart = {
  items: [
    { price: 299, quantity: 2 },
    { price: 599, quantity: 1 }
  ],
  total: 0
};

// 计算总金额
$.each(cart.items, function(i, item) {
  cart.total += item.price * item.quantity;
});

// 应用折扣
var discount = 0.9;
cart.total *= discount;

3.2 表单字段验证计数

javascript复制var validation = {
  errorCount: 0,
  checkFields: function() {
    this.errorCount = 0; // 重置计数器
    $('.required').each(function() {
      if (!$(this).val()) {
        $(this).addClass('error');
        validation.errorCount++;
      } else {
        $(this).removeClass('error');
      }
    });
  }
};

3.3 动态DOM元素批处理

javascript复制var processedElements = 0;
$('.dynamic-item').each(function(index) {
  var $item = $(this);
  
  // 条件判断
  if ($item.data('priority') > 5) {
    $item.addClass('highlight');
    processedElements++;
  }
  
  // 异步操作示例
  setTimeout((function(el) {
    return function() {
      el.fadeOut(300);
    };
  })($item), index * 100);
});

console.log('高亮处理了 ' + processedElements + ' 个元素');

4. 常见陷阱与最佳实践

4.1 异步操作中的变量捕获

错误示范：

javascript复制var results = [];
$('.data-item').each(function(i) {
  $.get('/api/data', {id: i}, function(res) {
    results[i] = res; // 可能错位！
  });
});

正确做法：

javascript复制var results = [];
$('.data-item').each(function(i) {
  (function(index) {
    $.get('/api/data', {id: index}, function(res) {
      results[index] = res;
    });
  })(i);
});

4.2 循环中断的特殊处理

jQuery的.each()中，return false可以中断循环：

javascript复制var found = null;
$('.candidates').each(function() {
  if ($(this).data('score') > 90) {
    found = $(this);
    return false; // 相当于break
  }
});

4.3 性能优化建议

1. 缓存jQuery对象：

javascript复制var $items = $('.large-list-item'); // 先缓存
var totalWidth = 0;
$items.each(function() {
  totalWidth += $(this).width(); // 这里仍需要重新包装
});

更优方案：

javascript复制var $items = $('.large-list-item');
var totalWidth = 0;
$items.each(function(index, element) {
  totalWidth += element.offsetWidth; // 直接使用DOM元素
});

2. 避免在循环内进行DOM查询：

javascript复制// 差
$('.products').each(function() {
  var price = $(this).find('.price').text();
  // ...
});

// 优
$('.products').each(function() {
  var price = $(this).dataset.price; // 使用data属性
  // ...
});

5. 现代JavaScript的替代方案

5.1 原生forEach方法

javascript复制let sum = 0;
const numbers = [1, 2, 3];

numbers.forEach(function(number) {
  sum += number; // 可以修改外部变量
});

5.2 ES6的for...of循环

javascript复制let total = 0;
const items = [{value: 10}, {value: 20}];

for (const item of items) {
  total += item.value; // 直接访问对象
  item.value *= 2;    // 修改对象属性
}

5.3 使用reduce方法

javascript复制const scores = [80, 90, 70];
const total = scores.reduce((acc, curr) => acc + curr, 0);

5.4 与jQuery的对比

在实际项目中，如果已经使用jQuery，继续使用.each()是合理的选择。但对于新项目，建议优先考虑原生方法。