关于js中each的用法

在JavaScript中，each是一个常用的方法，用于遍历数组或对象中的元素。它可以接受一个回调函数作为参数，对每个元素执行该回调函数。这个方法可以让代码看起来更加清晰简洁，提高代码执行效率。下面就来详细介绍一下each方法的用法。

1. 语法

each方法的语法如下：

$(selector).each(function(index, element){
    ...
});

其中，$()是jQuery选择器，可以选择需要的元素；each()方法用于遍历选择器中的元素。回调函数接受两个参数， 个参数表示当前元素的下标，第二个参数表示当前元素本身。

2. 遍历数组

在JavaScript中，可以使用for循环来遍历数组，但是如果数组长度很长，代码就会变得很繁琐。使用each方法可以更加简洁地实现遍历数组。

如下面的例子：

var arr = [1, 2, 3, 4, 5];

$.each(arr, function(index, value){
    console.log(index + " : " + value);
});

执行这段代码后，浏览器控制台会输出：

0 : 1
1 : 2
2 : 3
3 : 4
4 : 5

3. 遍历对象

在JavaScript中，可以使用for-in循环来遍历对象。但是，for-in循环会遍历对象的原型链上的属性，有时不是我们想要的结果。使用each方法可以只遍历对象自身的属性。

如下面的例子：

var obj = {a: 1, b: 2, c: 3};

$.each(obj, function(key, value){
    console.log(key + " : " + value);
});

执行这段代码后，浏览器控制台会输出：

a : 1
b : 2
c : 3

4. 在each方法中使用return

在each方法中，如果回调函数中使用了return关键字，可以用来中断遍历，也可以返回一个新的数组或对象。

如下面的例子：

var arr = [1, 2, 3, 4, 5];

var new_arr = $.each(arr, function(index, value){
    if(index == 2){
        return false;   // 中断遍历
    }
    return value * 2;   // 返回新数组
});

console.log(new_arr);

执行这段代码后，浏览器控制台会输出：

[2, 4]

5. each方法的链式调用

在jQuery中，很多方法都支持链式调用。对于each方法也是如此，可以在选择器后直接调用each方法，并继续链式调用其他方法。

如下面的例子：

$('ul li')
    .each(function(index, element){
        $(this).css('color', 'red');
    })
    .filter(':even')
        .css('background-color', '#EEE');

这段代码会选中所有ul中的li元素，给它们添加一个红色的字体颜色，并且将偶数项的背景色设为浅灰色。可见，使用each方法可以很好地结合其他方法，实现复杂的功能需求。

6. 性能优化

在使用each方法时，可以考虑以下几点来提高性能：

- 尽量减少回调函数中的计算量，以缩短代码执行时间。

- 按需遍历数组或对象，在回调函数中使用break或return来提前结束遍历。

- 遍历数组时，尽量使用for循环而不是each方法，因为for循环更加高效。

- 遍历对象时，如果只需要遍历对象自身的属性，可以使用for-in循环，如果需要遍历所有属性，包括继承的属性，可以使用each方法。

总之，在使用each方法时，要综合考虑性能和可读性，避免过度使用以及在需要时使用。