$.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]
所以说明返回的只是原数组,而不是生成新数组*/
随机推荐
- 删除Oracle用户及表空间
--转载自 https://blog.csdn.net/sunny05296/article/details/81126548--以sysdba用户登录,查找需要删除的用户conn / as sysd ...
- Python之路【第八篇】:Python模块
阅读目录 一.模块和包 模块(module)的概念: 在计算机程序的开发过程中,随着程序代码越写越多,在一个文件里代码会越来越长,越来越不容易维护. 为了编写可维护的代码,我们把很多函数分组,分别放到 ...
- sqlserver笔记----创建用户赋予权限
1.创建用户: create login username with password='密码' , default_database=数据库; create user username for lo ...
- SpringCloud警告(Eureka):EMERGENCY! EUREKA MAY BE INCORRECTLY CLAIMING INSTANCES ARE UP WHEN THEY'RE NOT. RENEWALS ARE LESSER THAN THRESHOLD AND HENCE THE INSTANCES ARE NOT BEING EXPIRED JUST TO BE SAFE.
警告!Eureka可能存在维护了错误的实例列表(当它们没有启动的时候,Eureka却把它当成启动的了):Renews值小于Threshold值,因此剩下未过期的都是安全的. 原因分析: 这个是Eure ...
- golang的cms
golang的cms 说说cms cms(内容管理系统)是建站利器.它的本质是为了快速建站.cms本质是一个后台服务站,使用这个后台,能很快搭建一个前台web站.在PHP的世界里面,CMS框架简直不要 ...
- 『集群』006 Slithice 后期改进 和 Slithice可能存在的BUG
Slithice 后期改进 和 Slithice可能存在的BUG Slithice 可能存在的 BUG: >Slithice 暂时 没有 对 循环调度 进行控制:不正确的 配置 可能导致 调度死 ...
- MySQL在CenterOS和Ubuntu的安装
声明:作者原创,转载注明出处. 作者:帅气陈吃苹果 下载地址:https://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.20-linux-glib ...
- DotNetCore跨平台~组件化时代来了
回到目录 进行dotnetcore之后,各种对象都是基于DI进行生产的,这就有了对象的生命周期一说,早在autofac里也有相关知识点,这与Microsoft.Extensions.Dependenc ...
- Docker进阶之五:容器管理
容器管理 一.创建容器常用选项 docker container --help 指令 描述 资源限制指令 -i, --interactive 交互式 -m,--memory 容器可以使用的最大内存量 ...
- JVM(六)为什么新生代有两个Survivor分区?
本文会使用排除法的手段,来讲解新生代的区域划分,从而让读者能够更清晰的理解分代回收器的原理,在开始之前我们先来整体认识一下分代收集器. 分代收集器会把内存空间分为:老生代和新生代两个区域,而新生代又会 ...