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

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,9console.log(index); //对应数组下标（从0开始计算）；输出五次，依次为0,1,2,3,4console.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,4console.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，同$.eachconsole.log(value); //对应数组中每个参数的值；输出五次，依次为1,3,5,7,9,同$.eachconsole.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/

forEach和$.each()以及$().each()的用法相关推荐

简单说明xml文件中foreach中collection的含义和用法
前提: 一般出现在mybatis框架中,写sql的xml文件中目的: 方便在xml文件中写含有in的sql:例如:select * from table where name in ("1 ...
TCL foreach的用法
文章目录 foreach var list body foreach var1 list1 ?var2 list2 var3 list3 ...? body 本篇文章介绍的是foreach的用法,fo ...
mybatis嵌套循环map（高级用法）
前言: mybatis有默认的list,array,但是没有默认的map.所以不能直接写collection="map",如果这么写,它会当成是根据map.get("ma ...
Stream的特性、用法、stream().map().collect()用法
Stream的特性.用法.stream().map().collect()用法 1.举例说明有一个集合: List<User> users = getList(); 现在想获取User的 ...
JSP常用标签——JSTL标签和EL表达式
一.JSTL简介 1.什么是JSTL JSTL是Java中的一个定制标记库集.(这个标记库集不需要自己编写,可以直接使用) 2.为什么要使用JSTL 实现了JSP页面中的代码复用(基于标签库原理,重复 ...
1.0 基础、标示符、常量、数据类型(enum 枚举,struct 结构体)、操作符、循环、数组...
一.程序现实生活中,程序是指完成某些事务的一种既定方法和过程,可以把程序看成是一系列动作执行过程的描述. 在计算机世界,程序是指令,即为了让计算机执行某些操作或解决某个问题而编写的一系列有序指令的集 ...
JSP 标准标签库（JSTL）
依赖包: jstl.jar standard.jar 分为五类: JSTL核心库 [基本的I/O, 流程控制, 循环等功能] 数据库标签库 [基本的数据库操作功能] XML操作标签库 [用来处理 ...
promise 和 Observable 的区别
StackOverflow 上的讨论:What is the difference between Promises and Observables? 得赞最高的一个回答:1777 赞当异步操作完成 ...
java温故笔记（二）java的数组HashMap、ConcurrentHashMap、ArrayList、LinkedList
为什么80%的码农都做不了架构师?>>> HashMap 摘要 HashMap是Java程序员使用频率最高的用于映射(键值对)处理的数据类型.随着JDK(Java Develo ...

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

forEach和$.each()以及$().each()的用法相关推荐

最新文章

热门文章