forEach和$.each()以及$().each()的用法

来源：互联网发布：淘宝的内部优惠微信号编辑：程序博客网时间：2024/05/21 17:44

forEach：即Array.prototype.forEach，这是ES5中对数组新增的方法，等同于过去的for循环遍历数组。用法：arr.forEach(function(value,index,array){...}),其中的function中有按个参数，value为数组中的值，index为数组下标，array为数组本身。forEach会跳过数组中不存在的元素，但不会跳过null和undefined的元素。比如数组[1，undefine，null，，2]，那么只有第四个元素不会打印出来。注意与map的区别。
$.each()：方法是jQuery中的实例方法，用法：$.each(array,function(index,value){...})，参数有两个，第一个为传入的数组array,第二个为函数，函数中还有两个参数，index为数组下标，value为数组中下标对应值。
$().each()：一看带有$,顾名思义也是jQuery中的方法，这是一个对象方法，由‘$()’选择对象数组，分别对每个对象进行操作，用法$('selector').each(function(index,value){...})。

例子如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>forEach与each用法比较</title>    <script src="jquery-3.2.1.js" type="text/javascript"></script>  <!-- 需要引入jq --></head><body><div>    <ul>        <li>1</li>        <li>2</li>        <li>3</li>        <li>4</li>        <li>5</li>    </ul></div><script>    var group = [1,3,5,7,9];    //forEach()只有一个参数function时：    group.forEach(function(value,index,array){ //function()中有三个参数        console.log(value); //对应数组中每个参数的值；输出五次，依次为1,3,5,7,9        console.log(index); //对应数组下标（从0开始计算）；输出五次，依次为0,1,2,3,4        console.log(array); //数组本身，即是->group；输出五次，每次都输出整个grounp数组        console.log(this);  //undefined    });    //forEach()有两个参数function和thisArg（即改变this指向的参数）:    group.forEach(function(value,index,array){        console.log(value);        console.log(index);        console.log(array);        console.log(this);  //输出同console.log(array)，因为第二个参数指向了该group数组本身    },group);    $.each(group,function(index,value){ //$.each()是jq中的方法，function()中有两个参数        console.log(index); //对应数组下标（从0开始计算）；输出五次，依次为0,1,2,3,4        console.log(value); //对应数组中每个参数的值；输出五次，依次为1,3,5,7,9     });    $('li').each(function(index,value){ //$().each()对象方法        console.log(index+": "+$(this).text());    });    var g_li = $('li');    $.each(g_li,function(index,value){ //$.each()类方法，该结果与上面结果相同，即证明$.each即是jq中对象方法，又是jq的类方法        console.log(index+": "+$(this).text());    });    var result = group.map(function(value,index,array){ //function()中有三个参数        console.log(index); //对应数组下标（从0开始计算）；输出五次，依次为0,1,2,3,4，同$.each        console.log(value); //对应数组中每个参数的值；输出五次，依次为1,3,5,7,9,同$.each        console.log(array); //数组本身，即是->group；输出五次，每次都输出整个grounp数组        return value + 1; //支持返回值（与forEach的不同之处，forEach不支持返回值）    });    console.log('map函数返回值'+result); //result为数组，输出2,4,6,8,10 console.log('map finished!');</script></body></html>

ES5中还新增了一些其他对数组操作的方法：

map
fifter
some
every
indexOf
lastindexOf
reduce
reduceRight

了解这些方法请查看： http://www.zhangxinxu.com/wordpress/2013/04/es5%E6%96%B0%E5%A2%9E%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95/

阅读全文

2 0