$.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]
所以说明返回的只是原数组,而不是生成新数组*/
随机推荐
- ubuntu安装mysql没有让我设置密码
终端输入: sudo cat /etc/mysql/debian.cnf显示内容:# Automatically generated for Debian scripts. DO NOT TOUCH! ...
- Spring IOC源码实现流程
最近一段时间学习了IOC的源码实现,分享一下大概流程 创建一个测试类 代码如下: package com.zcg.learn.Test; import org.junit.Test;import or ...
- 使用BCDEDIT创建BCD文件
网上找了好久,总算找到一个完全的BCD文件编辑过程的代码,分享下: ###第1步############################################################ ...
- python3 生成器初识 NLP第五条
话不多说,先把第五条抄一遍: 五,沟通的意义在于对方的回应 沟通没有对与错,只有“有效果”或者“没有效果”之分. 自己说得多“对”没有意义,对方收到你想表达的讯息才是沟通的意义. 因此自己说什么不重要 ...
- 实战经验|大神战队都在i春秋教你打CTF
全国大学生信息安全竞赛创新实践能力赛旨在培养.选拔.推荐优秀信息安全专业人才创造条件,促进高等学校信息安全专业课程体系.教学内容和方法的改革,培养学生的创新意识与团队合作精神,普及信息安全知识,增强学 ...
- 试试自行封装AJAX和jQuery中的ajax封装的基本使用
封装的套路: 1.写一个相对比较完善的用例2.写一个空函数,没有形参,将刚刚的用例直接作为函数的函数体3.根据使用过程中的需求抽象函数 代码记录如下: <script> function ...
- springboot~jpa个性化数据操作接口
jap是个全能仓储 jap把很多数据库访问都封装了,并且提交了默认的一切数据方法签名的约定,大家按着约定走,可以不写SQL语句,而如果比较复杂的情况,也需要写SQL,这里我们介绍一下查询和修改的实例方 ...
- Springboot整合Elastic-Job(二)
上文我们讲到Springboot整合Elastic-Job整合的demo,只是简单的实现了主要功能.本文在上文基础上,进行新的调整. 事件追踪 Elastic-Job提供了事件追踪功能,可通过事件订阅 ...
- [开发技巧]·AdaptivePooling与Max/AvgPooling相互转换
[开发技巧]·AdaptivePooling与Max/AvgPooling相互转换 个人网站--> http://www.yansongsong.cn/ 1.问题描述 自适应池化Adaptive ...
- Docker最全教程之使用Tencent Hub来完成CI(九)
使用Tencent Hub来完成CI 关于Tencent Hub Tencent Hub是腾讯出品的DevOps服务.主要提供多存储格式的版本管理,支持Docker Image.Binary.Helm ...