jQuery中each和js中forEach的区别分析

什么是each和forEach

• jQuery中each是一个函数，用于遍历jQuery对象。
• JavaScript中，Array原型上的forEach方法用于遍历数组。

区别分析

1. 参数顺序不同

jQuery的each在遍历过程中，回调函数传递的参数为(index,element)， 其中index表示当前遍历的元素在集合中的位置，element表示当前正在处理的DOM元素或JavaScript的window、document对象。

而Array原型上的forEach方法在遍历过程中，回调函数传递的参数为(element,index)， 其中element表示当前遍历的元素，index表示当前遍历的元素在数组中的索引。需要特别注意的是，forEach中入参的顺序和基本操作数组的API相同。

示例代码如下：

// jQuery中each用法
$("li").each(function(index, element) {
  console.log("index:" + index + ", element:" + element);
});

// js中forEach用法
var fruits = ["apple", "banana", "cherry"];
fruits.forEach(function(element, index) {
  console.log("index:" + index + ", element:" + element);
});

上述示例展示了分别使用jQuery的each和JavaScript的forEach输出一个列表中每个li元素的index和内容内容，和数组中每个元素和下标的值。

2. jQuery中each可以在对象和数组上使用

除了在jQuery对象（DOM的集合），each还可以用来遍历普通对象。遍历对象时，回调函数的参数为(key, value)，其中key表示当前遍历的属性名，value则表示当前遍历的属性值。

// 遍历普通对象
var employee = {
  name: '张三',
  age: 30,
  gender: '男'
};
$.each(employee, function(key, value) {
  console.log("key:" + key + ", value:" + value);
});

JavaScript的forEach方法只能用于数组的遍历，不能用于普通对象的遍历。

总结

从上面的分析可以看出，在使用时， 需要根据不同的对象类型，选择合适的遍历方式。 如果你需要在普通对象上遍历，使用jQuery的each更为方便； 如果你需要在数组上遍历，则可以使用两种方法中的任何一种，但推荐使用forEach。