1、map方法

<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>map方法</title>
</head> <body>
<script type="text/javascript">
var arr = [6, 5, 4];
var arrNew = [];
arrNew = arr.map(function(value, index, arr) {
console.log('当前值:' + value);
console.log('当前值对应的索引:' + index);
console.log('原数组:' + arr);
return value * value
});
//map返回新数组
console.log(arrNew);
</script>
</body> </html>

控制台输出为:

2、filter方法

<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>filter方法</title>
</head> <body>
<script type="text/javascript">
var arr = [6, 5, 4];
var arrNew = [];
arrNew = arr.filter(function(value, index, arr) {
console.log('当前值:' + value);
console.log('当前值对应的索引:' + index);
console.log('原数组:' + arr);
return value % 2 == 0;
});
//map返回新数组
console.log(arrNew);
</script>
</body> </html>

控制台输出为:

3、forEach方法

<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>forEach方法</title>
</head> <body>
<script type="text/javascript">
var arr = [6, 5, 4];
var total = 0;
arr.forEach(function(value, index, arr) {
console.log('当前值:' + value);
console.log('当前值对应的索引:' + index);
console.log('原数组:' + arr);
total += value
});
console.log(total);
</script>
</body> </html>

控制台输出:

总结:以上函数的回调函数的形参是一样的

注意:jQuery中的each的参数是:

$(selector).each(function(index,element))
是不一样的顺序

js map、filter、forEach的更多相关文章

  1. (转载)js数组中的find、filter、forEach、map四个方法的详解和应用实例

    数组中的find.filter.forEach.map四个语法很相近,为了方便记忆,真正的掌握它们的用法,所以就把它们总结在一起喽. find():返回通过测试的数组的第一个元素的值 在第一次调用 c ...

  2. JavaScript数组方法的兼容性写法 汇总:indexOf()、forEach()、map()、filter()、some()、every()

    ECMA Script5中数组方法如indexOf().forEach().map().filter().some()并不支持IE6-8,但是国内依然有一大部分用户使用IE6-8,而以上数组方法又确实 ...

  3. JavaScript高级编程——Array数组迭代(every()、filter()、foreach()、map()、some(),归并(reduce() 和reduceRight() ))

    JavaScript高级编程——Array数组迭代(every().filter().foreach().map().some(),归并(reduce() 和reduceRight() )) < ...

  4. react+redux教程(三)reduce()、filter()、map()、some()、every()、...展开属性

    reduce().filter().map().some().every()....展开属性   这些概念属于es5.es6中的语法,跟react+redux并没有什么联系,我们直接在https:// ...

  5. ES5新增数组方法every()、some()、filter()、map()

    JavaScript ES5标准中新增了一些Array方法,如every().some().filter().map().它们的出现使我们能够更加便利地操作数组,但对IE9以下浏览器的兼容性比较差.下 ...

  6. reduce()、filter()、map()、some()、every()、...展开属性

    reduce().filter().map().some().every()....展开属性   这些概念属于es5.es6中的语法,跟react+redux并没有什么联系,我们直接在https:// ...

  7. 辅助函数和高阶函数 map、filter、reduce

    辅助函数和高阶函数 map.filter.reduce: 一.辅助函数:(1-1)响应式函数 (数组更新检测):    push()    pop()    shift()    unshift()  ...

  8. Python基础三. 函数、lambda、filter、map、reduce

    一.概述 函数, 就是用一些语句组织起来实现一组特定的功能, 用来重复调用. 函数的作用及意义:最大化的重用代码和最小化的代码冗余以及对流程的分解. Python中有哪些函数: 内建的函数 第三方模块 ...

  9. Swift函数编程之Map、Filter、Reduce

    在Swift语言中使用Map.Filter.Reduce对Array.Dictionary等集合类型(collection type)进行操作可能对一部分人来说还不是那么的习惯.对于没有接触过函数式编 ...

  10. python之map、filter、reduce、lambda函数 转

    python之map.filter.reduce.lambda函数  转  http://www.cnblogs.com/kaituorensheng/p/5300340.html 阅读目录 map ...

随机推荐

  1. KISSY - A Powerful JavaScript Framework

    KISSY 是一款跨终端.模块化.高性能.使用简单的 JavaScript 框架.除了完备的工具集合如 DOM.Event.Ajax.Anim 等,它还提供了经典的面向对象.动态加载.性能优化解决方案 ...

  2. [BZOJ4568][Scoi2016]幸运数字 倍增+线性基

    4568: [Scoi2016]幸运数字 Time Limit: 60 Sec  Memory Limit: 256 MBSubmit: 1791  Solved: 685[Submit][Statu ...

  3. [libgdx游戏开发教程]使用Libgdx进行游戏开发(10)-音乐和音效

    本章音效文件都来自于公共许可: http://files.cnblogs.com/mignet/sounds.zip 在游戏中,播放背景音乐和音效是基本的功能. Libgdx提供了跨平台的声音播放功能 ...

  4. Python3 list与循环练习(购物车)

    #!/usr/bin/env python3 # -*- coding: utf-8 -*- # Author;Tsukasa product_list = [ ('Iphone',5800), (' ...

  5. dutacm.club Water Problem(矩阵快速幂)

    Water Problem Time Limit:3000/1000 MS (Java/Others)   Memory Limit:163840/131072 KB (Java/Others)Tot ...

  6. 【贪心】【线性基】bzoj2844 albus就是要第一个出场

    引用题解:http://blog.csdn.net/PoPoQQQ/article/details/39829237 注意评论区. #include<cstdio> using names ...

  7. python函数中的关键字参数

    关键字参数: 就是在形式参数中必须要提供”传递参数名=传递参数值” 位置参数:  仅仅只有参数名 特点:1.位置参数只能出现在关键字参数之前,不管是在行参还是实参中. 2.关键字参数在调用时(实参)中 ...

  8. iis日志字段解析

    IIS日志字段 #Software: Microsoft Internet Information Services 7.5 #Version: 1.0 #Date: 2013-08-21 01:00 ...

  9. mongodb_服务端安装及连接

    安装环境:Windows7  64位    附件内容: 1.mongodb Windows7 补丁:451413_intl_x64_zip.exe 2.mongodb Windows 安装程序:mon ...

  10. verynginx +nginx_upstream_check_module模块,负载均衡检查模块。

    yum -y install git yum -y install patch yum -y install pcre-devel yum install -y zlib-devel   mkdir ...