原生JS、jQuery 遍历方法总结

一、原生JS: forEach()和map()遍历

共同点：

1.都是循环遍历数组中的每一项。

2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数：数组中的当前项item,当前项的索引index,原始数组input。

3.匿名函数中的this都是指Window。

4.只能遍历数组。

(1)、forEach() : 没有返回值

var arr = [12,23,24,42,1];
var res = arr.forEach(function (item,index,input) {input[index] = item*10;
})
console.log(res);//-->undefined;
console.log(arr);//-->会对原来的数组产生改变；

（2）、map() : 有返回值，可以return出来

var arr = [1,2,3,4,5];
var res = arr.map(function (item,index,input) {return item * 10;
})
console.log(res);//-->[10,20,30,40,50];
console.log(arr);//-->[1,2,3,4,5]；

二、jQuery $.each()和$.map()遍历

共同点：

即可遍历数组，又可遍历对象。

(1)、$.each():没有返回值.支持的匿名函数有2个参数：如果遍历的是数组，i为当前项的索引，n为数组中的当前项。如果遍历的是对象，k 是键，n 是值。

//数组:i为索引，n为值
$.each( [1，2，3，4], function(i, n){console.log( i + ": " + n );
});//对象：k为键名，n为值
$.each( { name: "John", lang: "JS" }, function(k, n){console.log(  k + ": "+ n );
});

(2)、$.map()：有返回值，可以return 出来。支持匿名函数有2个参数（和$.each()里的参数位置相反）：数组中的当前项n，当前项的索引i。如果遍历的是对象，i 是值，n 是键。

//数组：n为值，i为索引
var arr=$.map( [0,1,2], function(n,i){return n + 4;
});
console.log(arr);//对象：n为值，k为键名
$.map({"name":"Jim","age":17},function(n,k){console.log(k+":"+n);
});

原生JS、jQuery 遍历方法总结相关推荐

jquery 遍历java对象,js/jquery遍历对象和数组的方法分析【forEach，map与each方法】...
本文实例讲述了js/jquery遍历对象和数组的方法.分享给大家供大家参考,具体如下: JS forEach方法 arr[].forEach(function(value,index,array){ ...
jQuery 遍历方法总结
遍历方法有:1.add(),用于把元素添加到匹配元素的集合中:2.children(),用于返回被选元素的所有直接子元素:3.closest(),用于返回被选元素的第一个祖先元素:4.contents ...
JS/Jquery遍历JSON对象、JSON数组、JSON数组字符串、JSON对象字符串
JS遍历JSON对象 JSON对象 var jsonObj = {"id": 102,"year": "2019-2020","l ...
原生js实现ajax方法（闭包）
学习Jquery是,模仿写了一个原生js实现ajax方法(闭包),代码上加有注释方法如下: <script type="text/javascript">(funct ...
jQuery 遍历方法
jQuery 遍历方法方法描述 add() 把元素添加到匹配元素的集合中 addBack() 把之前的元素集添加到当前集合中 andSelf() 在版本 1.8 中被废弃.addBack() 的别 ...
java原生的ajax怎么写,用原生js实现 ajax方法
原标题:用原生js实现 ajax方法作者介绍:咔拉宝宝前端工程师,致力于首个情景式购物商城咔拉商城的前端搭建,在咔拉职场栏目作为程序猿担当,与读者朋友们共同探讨前端开发的那些事. 一.ajax介绍: ...
原生js调用json方法
原文链接 Ajax基础 ajax:无刷新数据读取,读取服务器上的信息 HTTP请求方法: GET:用于获取数据,如浏览帖子 ajax.judgeXmlHttpRequest('get', 'index ...
原生js时间格式化方法封装
原生js时间格式化方法封装创建formatDate函数,传入date(时间)和format(格式)两个参数,简单判断format返回相应格式的时间注意:getMonth()方法获取到的月份会比实际 ...
jQuery 遍历方法
jQuery 遍历方法 jQuery 遍历方法方法描述 add() 把元素添加到匹配元素的集合中 addBack() 把之前的元素集添加到当前集合中 andSelf() 在版本 1.8 中被废弃 ...

原生JS、jQuery 遍历方法总结

一、原生JS: forEach()和map()遍历

二、jQuery $.each()和$.map()遍历

原生JS、jQuery 遍历方法总结相关推荐

最新文章

热门文章