如何实现点击按钮依次输出数组元素？及jQuery each仅打印首个元素需求

我来帮你搞定这两个数组迭代的问题，咱们一个个来拆解：

jQuery的$.each()方法在遍历数组时，只要在迭代回调里返回false，就能立刻终止整个遍历过程。利用这个特性，我们可以只处理第一个元素就停止：

const arr = [1, 2, 3];
$.each(arr, function(index, item) {
  console.log(item); // 输出第一个元素1
  return false; // 终止each循环，不再处理后续元素
});

原理很简单：$.each会依次调用回调函数，当回调返回false时，遍历会直接停止，这样就只会执行第一次迭代，也就是数组的第一个元素。

这个需求需要我们记录当前遍历到的位置，每次点击按钮时输出对应位置的元素，然后更新位置索引。这里有两种常用的实现方式：

方式一：使用全局变量记录索引（简单直接） #

这种方式适合快速实现，缺点是全局变量可能会和其他代码冲突：

<button id="nextBtn">递增按钮</button>

const arr = [1, 2, 3];
let currentIndex = 0;

$('#nextBtn').click(function() {
  if (currentIndex < arr.length) {
    console.log(arr[currentIndex]);
    currentIndex++;
  } else {
    console.log('所有元素已经遍历完毕啦');
  }
});

方式二：用闭包封装索引（更优雅，避免全局污染） #

如果想避免全局变量，闭包是更好的选择，它能把索引变量封装在私有作用域里：

<button id="nextBtn">递增按钮</button>

const arr = [1, 2, 3];

// 创建一个返回迭代函数的工厂函数
function createArrayIterator(targetArr) {
  let index = 0;
  return function() {
    if (index < targetArr.length) {
      console.log(targetArr[index]);
      index++;
    } else {
      console.log('没有更多元素可以输出啦');
    }
  };
}

// 给按钮绑定迭代函数
$('#nextBtn').click(createArrayIterator(arr));

这样每次点击按钮时，都会调用闭包里的函数，它会记住上一次的索引位置，依次输出数组的下一个元素，直到遍历完所有元素。

内容的提问来源于stack exchange，提问作者Dhiraj