$.each()、$.map()区别浅谈
遍历应该是各种语言中常会用到的操作了,实现的方法也很多,例如使用for、while等循环语句就可以很轻松的做到对数组或对象的遍历,今天想讲的不是它们,而是简单方便的遍历方法。
大致的整理了一下,经常用到的大概有Jquery的$.each、$.map、each()、map()、get()、toArray()以及js原生的forEach()吧,当然肯定还有一些我不知道的,今天就先谈谈$.each()和$.map()区别。
$.each()
$.each()方法可用于遍历任何对象(包括数组),结构为:$.each(array/object,function(index/key,value){ code })。index指遍历对象成员的索引,value指成员的内容。如果需要退出循环可使回调函数返回 false,其它返回值将被忽略。
上栗子:
//遍历数组
$(function(){
var arr = ["a","b","c","d"];
$.each(arr,function(index,value){
console.log(value+" "+index);
});
});
结果依次输出
a0
b1
c2
d3 如果你在循环中放入console.log(this),结果会依次输出string{a}。。。也就是表明返回值为对象。 //遍历对象
$(function(){
var obj = {name:"tony",age:18,job:"adc"}
$.each(obj,function(key,value){
console.log(key+" "+value);
});
});
结果依次输出
name tony
age 18
job adc
$.map()
$.map()方法可以在遍历数组或对象成员的同时,经过回调函数的调用,然后转换到另一个新的数组中(这也是和$.each()的最大区别)。
结构:$.map(array/object,function(value,index/key){ code }),index指遍历对象成员的索引,value指成员的内容。如果需要退出循环可使回调函数返回 false,其它返回值将被忽略。
看栗子:
//遍历数组
$(function(){
var arr = ["a","b","c","d"];
var arr1 = $.map(arr,function(value,index){ //注意回调函数的参数位置和$.each()的不一致
console.log(index+value);
var val = value.toUpperCase();//可以在回调函数中对成员进行操作,然后将其返回到新的数组中。toUpperCase()方法转换字符为大写。
return val;//一定要使用return返回值,否则新数组接受不到
});
console.log(arr1);
});
首先依次输出遍历的结果
a0
b1
c2
d3
输出arr1的结果(可以看出是返回值组成的新数组)
[A,B,C,D]
输出res结果为
Object Array (遍历对象可以参照$.each()方法,只不过返回的仍然是数组)
在这里有的同学可能就会疑问$.each()是否也会生成新的数组,眼见为实:
继续栗子:
$(function(){
var arr = ["a","b","c","d"];
var arr1 = $.each(arr,function(index,value){
var val = value.toUpperCase();
return val;
});
console.log(arr1);
});
/*输出的结果仍然为
[a,b,c,d]
所以说明返回的只是原数组,而不是生成新数组*/
随机推荐
- Process 'command 'D:\jdk8\jdk\bin\java.exe'' finished with non-zero exit value 2
转载请标明出处,维权必究:https://www.cnblogs.com/tangZH/p/10539006.html 捣鼓了好久,现在已经不想说话,为何会出现这个问题,Process 'comman ...
- MongoDB十二种最有效的模式设计【转】
持续关注MongoDB博客(https://www.mongodb.com/blog)的同学一定会留意到,技术大牛Daniel Coupal 和 Ken W. Alger ,从 今年 2月17 号开始 ...
- sqlserver的坑
1.今天系统出现BUG,经过两个小时的排查,发现是存储过程中的SELECT @@IDENTITY的值发生错乱,导致的系统BUG,经过百度,发现这个函数貌似和触发器有冲突,一旦插入的表有触发器的话,@@ ...
- Beyond Compare 3.3.8 build 16340 + Key
本文摘录自冰点社区:http://forum.z27315.com/topic/14746-beyond-compare-338-build-16340-key/ Download Beyond Co ...
- iOS可视化动态绘制八种排序过程(Swift版)
前面几篇博客都是关于排序的,在之前陆陆续续发布的博客中,我们先后介绍了冒泡排序.选择排序.插入排序.希尔排序.堆排序.归并排序以及快速排序.俗话说的好,做事儿要善始善终,本篇博客就算是对之前那几篇博客 ...
- 微信小程序页面跳转方法和携带参数详解
1.页面跳转方式 (1)标签跳转 open-type的属性值对应api里的用法即wx.的用法 1 <navigator url="/page/navigate/navi ...
- C#运算符的简单使用测试
在代码中看到的代码中|=,有点不太理解故重新学习了下位运算符. 位运算符在 c# 中的测试用例 [TestMethod] public void TestMethod1() { var a = fal ...
- 服务端渲染和nuxt简单介绍
概述 最近研究了一下服务端渲染,有一些心得,记录下来供以后开发时参考,相信对其他人也有用. 参考资料: Vue SSR指南 nuxt.js官网 服务端渲染介绍 服务端渲染简单来说,就是分别对项目用we ...
- 从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之十三 || DTOs 对象映射使用,项目部署Windows+Linux完整版
更新 很多小伙伴在用 IIS 发布的时候,总是会有一些问题,文章下边 #autoid-6-0-0 我也简单的动图展示了,如何 publish 到 IIS 的过程,如果你能看懂,却发现自己的项目有问题的 ...
- Linux下Springboot解决`APR based Apache Tomcat Native library`提示
最近转行做java,开发基于Springboot的项目,版本号为2.1.0.RELEASE. 启动应用,发现以下提示: The APR based Apache Tomcat Native libra ...