遍历应该是各种语言中常会用到的操作了,实现的方法也很多,例如使用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. 异常:System.InvalidOperationException: This implementation is not part of the Windows Platform FIPS validated cryptographic algorithms FIPS信息标准限值了MD5加密

    最近做的winform项目中,有个功能使用了MD5 加密,本地测试是没有问题的,但是上线后有些用户反馈说提示如下错误 一.问题描述 中文版错误截图 英语版错误截图 具体错误信息: 有关调用实时(JIT ...

  2. centos6.7 配置Elasticsearch

    Elasticsearch(以下简称ES),是一款开源的全文搜索引擎,获得了广泛的应用.这篇博客将介绍在centos6.7上如何配置ES. 一.安装JAVA环境 centos默认安装了JAVA环境,首 ...

  3. javaScript设计模式之面向对象编程(object-oriented programming,OOP)(一)

    面试的时候,总会被问到,你对javascript面向对象的理解? 面向对象编程(object-oriented programming,OOP)是一种程序设计范型.它讲对象作为程序的设计基本单元,讲程 ...

  4. java~google样式检查和命名规范

    对于代码的样式和各种元素的命名都是我们架构师需要考虑的,目前在java世界里,比较流行使用java的规范,包括了代码样式检查. 代码样式检查插件 样式文件xml google命名规范 一 代码样式检查 ...

  5. springboot~openfeign从JSON文件读取数据

    对openfeign不清楚的同学可以先看我这篇文章:springboot~openfeign从此和httpClient说再见 对于openfeign来说,帮助我们解决了服务端调用服务端的问题,你不需要 ...

  6. linux下安装libcurl及开源库的一般安装步骤

    前言 总有人说:要多看源代码!那么源代码去哪找呢?找到了又该怎么安装呢?本票博客不介绍如何使用和学习,只要讲获取和安装,以后会将curl和libevent的使用和学习. 一.开源库常用安装步骤 1.开 ...

  7. 你的响应阻塞了没有?--Spring-WebFlux源码分析

    1. Spring WebFlux是什么? Spring WebFlux是Spring Framework 5.0中引入的新的反应式Web框架. 与Spring MVC不同,它不需要Servlet A ...

  8. 记一次按需加载和npm模块发布实践

    按需加载 在使用 lodash 的时候我们可以使用这样的代码 //一 import {omit} from "lodash"; //二 import l from "lo ...

  9. Centos7配置MongoDB以及端口修改

    一.安装之前可以参考官网安装教程: https://docs.mongodb.com/manual/tutorial/install-mongodb-on-red-hat/ 二.登录服务器,配置yum ...

  10. javascript中的typeof和类型判断

    typeof ECMAScript 有 5 种原始类型(primitive type),即 Undefined.Null.Boolean.Number 和 String.我们都知道可以使用typeof ...