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. tcpdump 学习（3）：MySQL Query

    在MySQL线上环境我们一般只打开了binary log,slow log,有时我们需要查看general log呢?因为该log记录所有的请求,打开该日志肯定给磁盘造成很大压力,IO能力有所下降,所 ...

  2. 使用 URLDecoder 和 URLEncoder 对统一认证中的http地址转义字符进行处理

    import java.io.UnsupportedEncodingException; import java.net.URLDecoder; import java.net.URLEncoder; ...

  3. hit2739

    好题,回路的问题一般都要转化为度数来做若原图的基图不连通,或者存在某个点的入度或出度为0则无解.统计所有点的入度出度之差di对于di>0的点,加边(s,i,di,0):对于di<0的点,加 ...

  4. 如何破解Webstorm 2016.2

    嗯,随着Webstorm2016.2的推出,网上的很多破解方法已经不能用了,不过功夫不负有心人,我终于查到了新的方法, 选择“license server” 输入:http://114.215.133 ...

  5. (寒假GYM开黑)2018 German Collegiate Programming Contest (GCPC 18)

    layout: post title: 2018 German Collegiate Programming Contest (GCPC 18) author: "luowentaoaa&q ...

  6. Codeforces #442 Div2 E

    #442 Div2 E 题意 给你一棵树,每个结点有开关(0表示关闭,1表示开启),两种操作: 反转一棵子树所有开关 询问一棵子树有多少开关是开着的 分析 先 DFS 把树上的结点映射到区间上,然后就 ...

  7. python3开发进阶-Django框架的Form表单系统和基本操作

    阅读目录 什么是Form组件 常用字段和插件 自定义校验的方式 补充进阶 一.什么是Form组件 我们之前在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标 ...

  8. AngularJS的加载执行过程

    1. HTML页面的加载,这会触发加载页面包含的所有JS (包括 AngularJS) 2. AngularJS启动,搜寻所有的指令(directive) 3. 找到ng-app,搜寻其指定的模块(M ...

  9. 数据挖掘经典算法——K-means算法

    算法描述 K-means算法是一种被广泛使用的基于划分的聚类算法,目的是将n个对象会分成k个簇.算法的具体描述如下: 随机选取k个对象作为簇中心: Do 计算所有对象到这k个簇中心的距离,将距离最近的 ...

  10. MetaWeblog是什么

    MetaWebBlog API(MWA)是一个Blog程序接口标准,允许外部程序来获取或者设置Blog的文字和熟悉.他建立在XMLRPC接口之上,并且已经有了很多的实现. 所以现在很多博客系统都支持这 ...