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. Selenium2+python自动化65-js定位几种方法总结【转载】

    前言 本篇总结了几种js常用的定位元素方法,并用js点击按钮,对input输入框输入文本 一.以下总结了5种js定位的方法 除了id是定位到的是单个element元素对象,其它的都是elements返 ...

  2. Python 进阶 之 函数对象

    Python的世界里,万物皆对象,函数当然也是: 首先要定义一个函数: def add(a,b): print a+b 其次定义一个字典来引用该函数: dic = {"add":a ...

  3. 磁盘挂载MOUNT 445问题集

    挂载磁盘mount -t cifs -o username="Administrator",password="123@qq" //192.168.100.4/ ...

  4. 错误 NETSDK1068: 框架依赖型应用程序主机需要一个至少 “netcoreapp2.1” 的目标框架

    错误 NETSDK1068: 框架依赖型应用程序主机需要一个至少 “netcoreapp2.1” 的目标框架 我有一个ASP.NET Core 2网站应用程序,编译运行都没有问题,但是发布时却出了错, ...

  5. POJ 2255 Tree Recovery && Ulm Local 1997 Tree Recovery (二叉树的前中后序遍历)

    链接:poj.org/problem?id=2255 本文链接:http://www.cnblogs.com/Ash-ly/p/5463375.html 题意: 分别给你一个二叉树的前序遍历序列和中序 ...

  6. 8、Flask实战第8天：add_url_rule和app.route原理

    之前我们使用@app.route这个装饰器来把视图函数和url绑定 @app.route('/') def hell_world(): return 'hello world' 而且我们可以通过url ...

  7. VS code 的变量设定

    文档来自https://code.visualstudio.com/docs/editor/variables-reference 预定义的变量有: ${workspaceFolder} - the ...

  8. java.sql.SQLException: Access denied for user ''@'localhost' (using password: No)

    出错原因: 连接数据库是忘记配username 和 password 了 刚在学hiberbate4,把持久层从纯粹的jdbc改为hiberbate 出现的错误.(原来的是直接读取properties ...

  9. 5.1 java类集（java学习笔记）Collection、List接口及ArrayList、LinkedList类。

    一.类集 类集就是一组动态的对象数组,说类集可能不好理解,类集又称容器,容器顾名思义就是放东西的地方. 类集就是为了让我们更加简洁,方便的存放.修改.使用数据的. 二.Collection接口 我们看 ...

  10. 点击VS2010调试按钮无反应

    使用vs打开网站的方式分为两种. 1) 点击“在浏览器中查看”无反应的话,就点击“浏览方式”,选择一个浏览器进行查看. 2)第二中是直接点击调试按钮,结果浏览器无反应. 以上两种方法不成功的原因都是浏 ...