遍历应该是各种语言中常会用到的操作了,实现的方法也很多,例如使用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);
 var res = Object.prototype.toString.call(obj1);//使用Object.prototype.toString.call()方法返回传入变量的类型
 console.log(res);
});
首先依次输出遍历的结果
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]
所以说明返回的只是原数组,而不是生成新数组*/

随机推荐

  1. 关于Quartz.NET作业调度框架的一点小小的封装,实现伪AOP写LOG功能

    Quartz.NET是一个非常强大的作业调度框架,适用于各种定时执行的业务处理等,类似于WINDOWS自带的任务计划程序,其中运用Cron表达式来实现各种定时触发条件是我认为最为惊喜的地方. Quar ...

  2. 【iOS】desctiption和debugDescription

    一.简介 与.NET一样,在.NET上得Object对象有个ToString()方法可以用于输出对象的信息,在iOS上的NSObject也有一个方法,为description,该方法返回objc对象的 ...

  3. ASP.NET WebAPI 生成帮助文档与使用Swagger服务测试

    帮助HELP 要实现如WCF中的Help帮助文档,Web API 2 中已经支持很方便的实现了这一特性  http://www.asp.net/web-api/overview/creating-we ...

  4. Javascript中数组方法汇总

    Array.prototype中定义了很多操作数组的方法,下面介绍ECMAScript3中的一些方法: 1.Array.join()方法 该方法将数组中的元素都转化为字符串并按照指定符号连接到一起,返 ...

  5. jQuery中click()与trigger方法的区别

    click()可以执行单击事件,但是不可传参. $("button").click(function(){ alert("hello."); }); trigg ...

  6. 【Nginx】显示器port管理

    监听port属于server虚拟主机,由server{}块内的listen配置项决定. 也就是说,在server{}块配置项内定义了该虚拟主机所要监听的port. 在处理配置文件http块内main级 ...

  7. 从QA到工程能效团队

    Engineering Productivity Productivity is our job; testing and quality are the job of everyone involv ...

  8. 前端入门25-福音 TypeScript

    声明 本篇内容摘抄自以下来源: TypeScript 中文网 只梳理其中部分知识点,更多更详细内容参考官网. 正文-TypeScript 今天来讲讲有 Java 基础转 JavaScript 的福音: ...

  9. Android反编译apk并重新打包签名(Mac环境)

    工具下载 apktool :https://ibotpeaches.github.io/Apktool/install dex2jar:https://github.com/pxb1988/dex2j ...

  10. 1. 通过DHCP服务器动态获取IP地址之后无法上网的解决方法

    故障:内网正常,在同一个局域网内的其它PC端通过DHCP获取IP地址并且可以正常上网. 1.通过wireshark抓包,使用ipconfig /renew时,wireshark内出现DHCP请求服务, ...