一、原生JS forEach()和map()遍历

共同点:

1.都是循环遍历数组中的每一项。 
2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前项的索引index,原始数组input。 
3.匿名函数中的this都是指Window。 
4.只能遍历数组。

1.forEach()

没有返回值,修改的是原数组。

var ary = [12,23,24,42,1];
var res = ary.forEach(function (item,index,input) {
input[index] = item*10;
})
console.log(res);//-->undefined;
console.log(ary);//-->[ 120, 230, 240, 420, 10 ];

2.map()

有返回值,可以return 出来。不修改原数组。

var ary = [12,23,24,42,1];
var res = ary.map(function (item,index,input) {
return item*10;
})
console.log(res);//-->[120,230,240,420,10];
console.log(ary);//-->[12,23,24,42,1];

二、jQuery .each()和.map()遍历

共同点:

即可遍历数组,又可遍历对象。

1.$.each()

没有返回值。$.each()里面的匿名函数支持2个参数:当前项的索引i,数组中的当前项n。如果遍历的是对象,k 是键,n 是值。

$.each( ["a","b","c"], function(i, n){
console.log( i + ": " + n );
});
// 0: a
// 1: b
// 2: c
 $.each( { name: "John", lang: "JS" }, function(k, n){
console.log( "Name: " + k + ", Value: " + n );
});
//Name: name, Value: John
// Name: lang, Value: JS

2.$.map()

有返回值,可以return 出来。.map()里面的匿名函数支持2个参数和.each()里的参数位置相反:数组中的当前项n,当前项的索引i。如果遍历的是对象,i 是值,n 是键。如果是("span").map()形式,参数顺序和.each() ,$(“span”).each()一样。

var arr=$.map( [0,1,2], function(n,i){
return n+i;
});
console.log(arr);
//[ 0, 2, 4 ] $.map({"name":"Jim","age":17},function(n,i){
console.log(n+":"+i);
});
//Jim:name
//17:age


原生JS forEach()和map()遍历,jQuery$.each()和$.map()遍历的更多相关文章

  1. 原生JS forEach()和map()遍历的区别以及兼容写法

    一.原生JS forEach()和map()遍历 共同点: 1.都是循环遍历数组中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前 ...

  2. 应该用forEach改变数组的值吗? 原生JS forEach()和map()遍历的异同点

    应该用forEach改变数组的值吗? https://segmentfault.com/q/1010000013170900?utm_source=index-hottest 由于js中的数组是引用类 ...

  3. 放弃jQuery,使用原生js吧!

    转自:http://itakeo.com/blog/2015/07/28/nojq/ 随着IE6.7.8的逐渐淘汰,HTML5的兴起,以及侧重点放在了移动端,jQuery可能变的不在那么重要,原生一样 ...

  4. 原生js使用forEach()与jquery使用each遍历数组,return false 的区别

    原生js使用forEach()与jquery使用each()遍历数组,return false 的区别: 1.使用each()遍历数组a,如下: var a=[20,21,22,23,24]; $.e ...

  5. js foreach、map函数

    语法:forEach和map都支持2个参数:一个是回调函数(item,index,input)和上下文: •forEach:用来遍历数组中的每一项:这个方法执行是没有返回值的,对原来数组也没有影响: ...

  6. JS forEach()与map() 用法(转载)

    JavaScript中的数组遍历forEach()与map()方法以及兼容写法   原理: 高级浏览器支持forEach方法语法:forEach和map都支持2个参数:一个是回调函数(item,ind ...

  7. C#保留2位小数几种场景总结 游标遍历所有数据库循环执行修改数据库的sql命令 原生js轮盘抽奖实例分析(幸运大转盘抽奖) javascript中的typeof和类型判断

    C#保留2位小数几种场景总结   场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.2 ...

  8. html中map area 热区自适应的原生js实现方案

    在做自适应网页的时候,如果在图片中使用了热区map.图片可以通过样式实现:图片大小随页面变化,但是MAP中每个area的坐标并不能通过css直接实现自适应.这篇文章就介绍通过原生js来实现:MAP中每 ...

  9. js常用的遍历方法以及flter,map方法

    1.首先明确vue主要操作数据.他并不提倡操作dom. 数组的变异:能改变原数组. *** 先来复习下便利==遍历一个数组的四种方法: <script> let arr = [1, 2, ...

随机推荐

  1. C和FORTRAN的快速傅里叶/余弦/正弦变换(Fast Fourier/Cosine/Sine Transform)开源库分享

    Takuya Ooura: General Purpose FFT Package, http://www.kurims.kyoto-u.ac.jp/~ooura/fft.html. Free C & ...

  2. POJ - 2312 Battle City BFS+优先队列

    Battle City Many of us had played the game "Battle city" in our childhood, and some people ...

  3. Lightoj 1008【规律】

    25 24 23 22 21 10 11 12 13 20 9 8 7 14 19 2 3 6 15 18 1 4 5 16 17 然后把这个转化成: 17 18 19 20 21 10 11 12 ...

  4. java后台杂记

    1.在@Select使用动态SQL有 "<=" 时要转义:<![CDATA[ <= ]]> 2.assert函数即断言,也即做出一些假设,程序运行时如果假设 ...

  5. AndroidTV开发

    AndroidTV的开发其实和Android的开发是一样的,现在的电视机可以安装AnroidApp

  6. 笔记-JavaWeb学习之旅7

    JavaScript基础 概念:一门客户端脚本语言,运行在客户端浏览器中,每一个浏览器都有JavaScript的解析引擎,是一个脚本语言,不需要编译,直接就可以被浏览器解析执行. JavaScript ...

  7. 再回首数据结构—AVL树(二)

    前面主要介绍了AVL的基本概念与结构,下面开始详细介绍AVL的实现细节: AVL树实现的关键点 AVL树与二叉搜索树结构类似,但又有些细微的区别,从上面AVL树的介绍我们知道它需要维护其左右节点平衡, ...

  8. JDBC连接池一 自定义连接池

    package com.mozq.jdbc; import java.io.IOException; import java.io.InputStream; import java.sql.Conne ...

  9. 归档-对模型数组对象(存储到本地的plist文件)也数组里存放的是模型

    一.模型文件 (1)JLMainViewsModel.h文件 必须遵循 NSCoding协议 @interface JLMainViewsModel : NSObject<NSCopying,N ...

  10. Flask (一) 简介

    Flask简介 Flask是一个基于Python实现的Web开发‘微’框架 'MicroFramework' Django是一个重型框架 官方文档: http://flask.pocoo.org/do ...