JavaScript 中 jQuery 的each() 函数的替代品是什么

Java

jQuery是一个广泛使用的JavaScript库，其中的each()函数被用于迭代处理一个集合中的元素。然而，随着JavaScript语言的发展和标准化，原生JavaScript已经提供了更强大的迭代处理功能，因此不再需要依赖jQuery的each()函数。

原生JavaScript中提供了两个替代品，分别是forEach()方法和for...of循环。这两种方法都可以用来替代jQuery的each()函数，实现对集合中元素的迭代处理。

forEach()方法

forEach()方法是Array对象的一个方法，用于遍历数组中的每个元素并执行指定的回调函数。该方法接受一个回调函数作为参数，回调函数会被依次传入数组中的每个元素、元素的索引和数组本身。下面是一个使用forEach()方法遍历数组的例子：

Javascript
let arr = [1, 2, 3, 4, 5];
arr.forEach(function(element, index, array) {
  console.log(<code>元素：${element}，索引：${index}</code>);
});

上述代码中，forEach()方法遍历了数组arr中的每个元素，并将元素和索引打印出来。运行结果如下：

元素：1，索引：0
元素：2，索引：1
元素：3，索引：2
元素：4，索引：3
元素：5，索引：4

for...of循环

for...of循环是ES6引入的一种新的循环语法，可以用于遍历可迭代对象中的元素。可迭代对象包括数组、字符串、Set、Map等。for...of循环会依次将可迭代对象中的每个元素赋值给指定的变量，并执行指定的代码块。下面是一个使用for...of循环遍历数组的例子：

Javascript
let arr = [1, 2, 3, 4, 5];
for (let element of arr) {
  console.log(<code>元素：${element}</code>);
}

上述代码中，for...of循环遍历了数组arr中的每个元素，并将元素打印出来。运行结果如下：

元素：1
元素：2
元素：3
元素：4
元素：5

使用原生JavaScript替代jQuery的each()函数

如上所述，使用forEach()方法或for...of循环可以替代jQuery的each()函数。下面是一个具体的示例，展示了如何使用原生JavaScript来实现对一个DOM元素集合进行迭代处理：

Javascript
let elements = document.querySelectorAll('.example-class');
// 使用forEach()方法
elements.forEach(function(element) {
  // 对每个元素执行操作
  console.log(element.textContent);
});
// 使用for...of循环
for (let element of elements) {
  // 对每个元素执行操作
  console.log(element.textContent);
}

上述代码中，首先使用querySelectorAll()方法获取了所有class为"example-class"的DOM元素集合。然后，使用forEach()方法和for...of循环分别对这个元素集合进行了迭代处理，并打印出了每个元素的textContent。

尽管jQuery的each()函数在过去是一个非常方便的工具，但随着原生JavaScript的发展，我们现在可以使用forEach()方法和for...of循环来实现对集合中元素的迭代处理，而不再依赖于jQuery。这样一来，我们就能更好地利用JavaScript的原生功能，提高代码的可读性和性能。