迭代器方法

在上篇中,我们探讨了很多数组方法,接下来总结一下最后一组方法——迭代器方法。这些方法对数组的每个元素应用一个函数,可以返回一个值、一组值、或者一个新数组。

1、不生成新数组的迭代器方法

以下这组迭代器方法不产生任何新数组,它们要么对数组中的每个元素执行某种操作,要么返回一个值。

1.1 forEach()

此方法接受一个函数作为参数,对数组中的每个元素使用该函数。

    function square(num) {console.log(num + '的平方为: ' + num * num)}var nums = [1, 2, 3, 4, 5]nums.forEach(square)

以上方法用于求数组nums中每个元素的平方,运行结果如下:

1.2 every()

此方法接受一个返回值为boolean类型的函数,对数组中的每个元素使用该函数,该函数返回值全部为true的话,every()才会返回true,否则返回false。

    function isOdd(num) {return num % 2 !== 0}var array = [1, 2, 3, 4, 5]var odd = array.every(isOdd)if(odd) {console.log('此数组中所有元素都为奇数')} else {console.log('此数组中并非所有元素为奇数')}

以上代码中,将用户判断元素是否是奇数的函数作为参数传给every(),当调用every()的数组中元素全部为奇数时,返回值为true,否则为false。运行结果如下:

1.3 some()

此方法与every()类似,区别在于传给some()的函数中,只要有一个返回true,此方法就返回true。

简单测试一下:

    function hasOdd(num) {return num % 2 !== 0}var array = [1, 2, 3, 4, 5]var odd = array.some(hasOdd)if(odd) {console.log('此数组中有奇数')} else {console.log('此数组中没有奇数')}

以上代码判断了数组元素中是否存在奇数,输出结果为“此方法中有奇数”。

1.4 reduce()

此方法接受一个函数,从一个累加值开始,不断地对累加值和数组中的后续元素调用该函数,直到数组的最后一个元素,最后返回得到的累加值。以下为使用reduce()求数组中元素和的例子。

    function add(total, num) {return total + num}var array = [1, 2, 3, 4, 5]var odd = array.reduce(add)console.log(odd)

结果如下:

注意:假如数组长度为1的话,array.reduce(add)并不会调用add(),而是直接返回该元素值。测试:

    function add(total, num) {console.log('total'+  total)console.log('num' + num)return total + num}var array = [1]var odd = array.reduce(add)console.log(odd)

以上代码直接输出1,add()方法中的两个log都不会执行,即:没有调用add()。

除了求和,reduce()还可以用于将数组元素连接成字符串。

    function connect(string, item) {return string + ' ' + item}var array = ['I', 'am', 'a', 'developer', 'from', 'guangzhou']var sentence = array.reduce(connect)console.log(sentence)

结果:

(5)reduceRight()

此方法与reduce()类似,区别在于执行顺序相反,reduce()为从左到右,此方法为从右到左。可以对以上代码修改一下作为测试:

    function connect(string, item) {return string + ' ' + item}var array = ['I', 'am', 'a', 'developer', 'from', 'guangzhou']var sentence = array.reduceRight(connect)console.log(sentence)

结果:

2、生成新数组的迭代器方法

有两个迭代器方法可以产生新数组,map()与filter()。

2.1 map()

map()与forEach()有点像,都是每个数组元素应用某个函数,区别在于map()返回一个新的数组,该数组的元素是对原数组应用某个函数后的结果。对forEach()中的例子做一下修改:

    function square(num) {return num * num}var nums = [1, 2, 3, 4, 5]var newArr = nums.map(square)console.log(newArr)

对字符数组也可以使用map(),原理跟数字的一样的,假如有一个数组['54321', '23456', '01234'],如何截出520?

这个需求就可以使用map()轻松实现:

    function connect(str) {return str[0]}var array = ['54321', '23456', '01234']var newArr = array.map(connect)console.log('哈哈哈: ' + newArr.join(''))

运行结果:

2.2 filter()

filter()与every()类似,传入一个返回值为boolean类型的函数。不同的是,对数组中的所有元素使用传入的方法,结果均为true时,该方法并不返回true,而是返回一个新数组,该数组包含原数组中应用该函数后结果为true的元素。举个例子:

    function isOdd(num) {return num % 2 !== 0}function isEven(num) {return num % 2 == 0}var nums = [1, 2, 3, 4, 5]var oddArr = nums.filter(isOdd)var evenArr = nums.filter(isEven)console.log('oddArr: ' + oddArr)console.log('evenArr: ' + evenArr)

运行结果:

2.3 filter()的应用例子。

(1)求及格的分数集,并对及格的所有分数进行求均值。

    function pass(score) {return score >= 60}var grades = [11, 33, 55, 66, 77, 57, 90, 59, 100]var passArr = grades.filter(pass)// 及格的所有分数console.log(passArr)// 及格分数的平均值var sum = 0, arrLength = passArr.length;for (var i = 0; i < arrLength; i++) {sum += passArr[i]}console.log(parseFloat(sum / arrLength))

结果:

(2)过滤掉无"love"的元素。

    function pass(word) {return word.indexOf('love') !== -1}var array = ['loveFamily', 'loveFriends', 'loveLearning', '哈哈哈啊哈哈']var love = array.filter(pass)console.log(love)

运行结果:

JavaScript数据结构与算法——数组详解(中)完结~

剩余内容(二维数组与多维数组)将在下篇总结。

以上总结如存在不正确的地方,欢迎指出O(∩_∩)O~~~

周末愉快!!

JavaScript数组结构与算法——数组详解(中)相关推荐

  1. shell编程数组与冒泡算法排序详解

    shell编程数组与冒泡算法排序详解 一 数组的四种表达方式 二 数组的增删改查操作 三 数组传参 3.1 主程序向函数传数组参数 3.2 从函数返回数组到主程序 四 冒泡算法排序 一 数组的四种表达 ...

  2. 秒懂的shell编程数组与冒泡算法排序详解

    shell编程数组与冒泡算法排序详解 一.数组的四种表达方式 二 .数组的增删改查操作 三 .数组传参 3.1 主程序向函数传数组参数 3.2 从函数返回数组到主程序 四 .冒泡算法排序 一.数组的四 ...

  3. JavaScript数据结构与算法——链表详解(上)

    注:与之前JavaScript数据结构与算法系列博客不同的是,从这篇开始,此系列博客采用es6语法编写,这样在学数据结构的同时还能对ECMAScript6有进一步的认识,如需先了解es6语法请浏览ht ...

  4. JavaScript 面试中常见算法问题详解

    JavaScript 面试中常见算法问题详解,翻译自 https://github.com/kennymkchan/interview-questions-in-javascript.下文提到的很多问 ...

  5. JavaScript数据结构与算法——队列详解(下)

    接下来会借助本人另一篇文章JavaScript数据结构与算法--队列详解(上)中实现的队列类及其方法实现一个应用. 配对问题 需求分析:在一个文件中保存着一份男女混合的数据,名称前以B开头表示男士,以 ...

  6. JavaScript数据结构与算法——列表详解(下),基于Nodejs实现一个列表应用

    1.上篇回顾: 上篇我们实现了一个列表类,并添加了一些属性,实现了比较多的方法,本文章将与大家一起使用列表实现一个图书借阅查询系统.需要使用JavaScript数据结构与算法--列表详解(上)中写好的 ...

  7. JavaScript数据结构与算法——列表详解(上)

    列表是一组有序的数据,每个数组中的数据项称为元素.数组相关知识不够了解的伙伴可以阅读本人上篇博客在JavaScript中,列表的元素可以是任意数据类型.列表中可以保存不定数量的元素,实际使用时元素的数 ...

  8. 数组,异质结构以及指针的详解

    数组,异质结构以及指针的详解 前言 昨天看了一部韩国电影,老千2,看到凌晨5点,不过发现韩国的棒子们确实养眼,女的贼拉漂亮,还有大尺度哦~ 咱们上一次分析了过程(方法)的实现,其中精妙的栈帧占据了首要 ...

  9. 【数据结构与算法】详解什么是图结构,并用代码手动实现一个图结构

    本系列文章[数据结构与算法]所有完整代码已上传 github,想要完整代码的小伙伴可以直接去那获取,可以的话欢迎点个Star哦~下面放上跳转链接 https://github.com/Lpyexplo ...

最新文章

  1. java对象序列化作用_Java学习之——理解对象序列化
  2. CentOS下安装JDK7 转载
  3. 如何判断SAP CDS view的association是inner join还是outer join实现的
  4. 使用jdk DOM,SAX和第三方jar包DOM4J创建,解析xml文件
  5. 用上Linux后收集变得山穷水尽
  6. 保存到本地_不用任何软件工具找回已保存在本地的网页密码
  7. VSCode每打开一次文件弹出一个git弹窗:-login -i rev-parse --show-toplevel
  8. 联合国超10万名员工记录遭泄露
  9. html页面数学公式添加(附图)
  10. 在ubuntu上一键安装TIM的脚本
  11. 简历中的“项目经验”该怎么写?
  12. r7 2700X装Linux,R7 2700X大战i7 8700K:谁才是游戏玩家的菜?
  13. steam使用技巧2
  14. 浅谈,如何获取MTK CPU信息 请看我是如何做的。一步步来吧
  15. 台式主机与显示器相连用HDMI还是VGA
  16. 机器学习算法 | Python实现k-近邻算法
  17. Android LCD整理二:mtk平台LCD流程分析(LK部分)
  18. java实现最近搜索词条
  19. C程序设计语言(The C Programming Language)读书笔记
  20. DC/AC:单相方波全桥逆变电路设计原理及实验仿真

热门文章

  1. 技术 KPI 的量化
  2. [译]GC专家系列3-GC调优
  3. 关于反射调用方法的一个log
  4. Android集成三方浏览器之Crosswalk
  5. [译]震惊!RxJava 5 个不为人知的小秘密
  6. iOS NSOperation 非并发执行
  7. 程序员要常做好的几件事
  8. apache和tomcat开启GZIP功能
  9. 无空头的链表代码:学生管理系统
  10. Thinkphp 使用过程中,模型中使用其它表却总是没起作用的解决办法