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

　　

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>数组迭代方法</title>

</head>

<body>

    <script>

        var numberEvery = [1, 2, 3, 4, 5, 4, 3, 2, 1];

        var everyResult = numberEvery.every(function (item, index, array) {

            return (item > 2);

        });

        document.write("使用every():对数组的每一项运行给定函数,如果函数的每一项都返回true,则返回true,否则为false," + "数组数据为:" + numberEvery + " 判断是否符合条件:" + everyResult + "<br>");

        console.log(everyResult);

        var someResult = numberEvery.some(function (item,index,array) {

            return (item > 2);

        });

        document.write("使用some():对数组中的每一项运行给定函数,如果该函数对任一项返回true,则返回true,否则为false," + "数组数据为:" + numberEvery + " 只要有一项符合条件:" + someResult + "<br>");

        console.log(someResult);

        var filterResult = numberEvery.filter(function (item, index, array) {

            return (item > 0);

        });

        document.write("使用filter():对数组中的每一项运行给定函数,返回该函数会返回true的项组成的数组,否则返回[]," + "数组数据为:" + numberEvery + "返回符合条件的数组数据:" + filterResult + "<br>");

        console.log(filterResult);

        var mapResult = numberEvery.map(function (item,index,array) {

            return item * 2;

        });

        document.write("使用map():对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组:" + "数组数据为:" + numberEvery + "返回符合条件的数组数据:" + mapResult + "<br>");

        console.log(mapResult);

        numberEvery.forEach(function (item, index, array) {

            console.log(item,index);

        });

        document.write("使用forEach():对数组中的每一项运行给定函数,这个方法没有返回值:" + "数组数据为:" + numberEvery + "forEach的数据:" + numberEvery + "<br>");

        /*归并数组 reduce()和reduceRight()

            reduce()方法从数组的第一项开始,逐个遍历到最后,

            而reduceRight()则从数组的最后一项开始,向前遍历到第一项

            顾名思义,有点和IndexOf于LastIndex相似

            reduce()和reduceRight()的函数都会接收4个参数:前一个值、当前值、项的索引和数组对象,

            这个函数返回的任何值都会作为第一个参数自动传给下一项第一次迭代发送在数组的第二项上,

            因此第一个参数是数组的第一项,第二个参数就是数组的第二项

        */

        /*

            reduce(function('前一个值','当前值','索引','对象'){});

            reduceRight()只是方向相反

        */

        var values = [1,2,3,4,5];

        var sum = values.reduce(function (prev, cur, index, array) {

            return prev + cur;

        });

        document.write("reduce()将前一个值和当前值相加:"+sum+"<br>")

        console.log(sum);

        var sumReduceRight = values.reduceRight(function (prev, current, index, array) {

            return prev + current;

        })

        document.write("reduceRight()的值和reduce是相同的,主要取决要从哪头开始遍历数组:" + sumReduceRight+"<br>")

        console.log(sumReduceRight);

     </script>

</body>

</html>

　　

JavaScript高级编程——Array数组迭代（every()、filter()、foreach()、map()、some()，归并（reduce() 和reduceRight() ））的更多相关文章

  1. JS数组中every(),filter(),forEach(),map(),some()方法学习笔记！

    ES5中定义了五种数组的迭代方法:every(),filter(),forEach(),map(),some(). 每个方法都接受两个参数:要在每一项运行的函数(必选)和运行该函数的作用域的对象-影响 ...

  2. js数组中indexOf/filter/forEach/map/reduce详解

    今天在网上看到一篇帖子,如题: 出处:前端开发博客 (http://caibaojian.com/5-array-methods.html) 在ES5中一共有9个Array方法,分别是: Array. ...

  3. JavaScript高级编程——引用类型、Array数组使用、栈方法

    JavaScript高级编程——引用类型.Array数组使用.栈方法 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999 ...

  4. JavaScript高级编程———数据存储（cookie、WebStorage）

    JavaScript高级编程———数据存储(cookie.WebStorage) <script> /*Cookie 读写删 CookieUtil.get()方法根据cookie的名称获取 ...

  5. JavaScript高级编程———JSON

    JavaScript高级编程———JSON < script > /*JSON的语法可以表达一下三种类型的值 简单值:使用与javas相同的语法,可以在JSON中表达字符串.数值.布尔值和 ...

  6. JavaScript高级编程———基本包装类型String和单体内置对象Math

    JavaScript高级编程———基本包装类型和单体内置对象 <script> var stringObject = new String("hello world") ...

  7. javascript高级编程笔记01(基本概念)

    1.在html中使用JavaScript 1.  <script> 元素 <script>定义了下列6个属性: async:可选,异步下载外部脚本文件. charset:可选, ...

  8. JavaScript高级编程——Date类型

    JavaScript高级编程——Date类型 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...

  9. Javascript高级编程学习笔记（13）—— 引用类型（2）Array类型

    除了Object类型之外ECMA中最常用的引用类型可能就是Array类型了 并且ECMA中的数组类型和其他大多数编程语言的数组类型存在着很大的区别 今天就介绍一下JS中的Array的特别之处 区别 1 ...

随机推荐

  1. Windows Phone开发手记－WinRT下自定义圆形ItemsControl

    这里的ItemsControl指的是Xaml里的集合控件,包括ListView,GridView等,此篇博客主要参考MSDN Blog的一篇文章,具体出处为:http://blogs.msdn.com ...

  2. IntelliJ IDEA中Debug的使用技巧

    当运行结果跟我们设想的不一致时,我们就可以用debug进行代码调试,下面是我在日常开发中对debug的一些小结 (一)基本介绍 本篇文章是基于IntelliJ IDEA2018.3.2版本,Debug ...

  3. vue中修改Element ui样式不起作用

    公司做的一个后台系统,由于Elemen ui是响应式的,在小屏笔记本中,一行两列的表单会自动变成一行一列,这样就很不美观了,由于是后台系统,当时也没考虑适配问题. 老总 地表最强的电脑 运行了一下,当 ...

  4. 解决 Error: ENOSPC: System limit for number of file watchers reached

    manjaro 18.0 kde版本 运行 yarn test报错 Error: ENOSPC: System limit for number of file watchers reached 解决 ...

  5. PHP 编程小点

    1.全局变量,$global 2.引用.函数返回引用.写时拷贝.对象复制.clone.unset.$varname=null 3.函数作用域,但是没有块级作用域 4.php7 新特性 5.autolo ...

  6. es-09-spark集成

    es和spark的集成比较简单, 直接使用内部封装的一些方法即可 版本设置说明: https://www.elastic.co/guide/en/elasticsearch/hadoop/curren ...

  7. setup&hold

    setup time:建立时间,也就是在时钟上升沿到来前,数据需要稳定的时间.hold time:保持时间,指的是在时钟上升沿到来后,数据还需要保持的时间.实际上设置setup time和hold t ...

  8. PBN飞越转弯Flyover衔接TF、CF航段保护区组图

    PBN飞越转弯Flyover衔接TF.CF航段虽不常用,但也很重要,与旁切转弯有一定的相似性. 飞越转弯 flyover-TF/CF 叠加图: 飞越转弯 flyover-TF/CF 分解图:

  9. MySQL5.7+版本一些问题

    今天有一个需求.我要用本地的Java调用远程服务器的MySQL,因为我的MySQL版本为5.7.2,即比较新的版本.网上找的很多都比较旧,故贴此贴. 无密码: 初次安装MySQL可能没有设置密码,网上 ...

  10. [Angularjs]ng-bind-html指令

    摘要 在为html标签绑定数据的时,如果绑定的内容是纯文本,你可以使用{{}}或者ng-bind.但在为html标签绑定带html标签的内容的时候,angularjs为了安全考虑,不会将其渲染成htm ...