0

0

JavaScript中Array的迭代用法

一个新手

一个新手

发布时间:2017-09-19 10:48:11

|

1466人浏览过

|

来源于php中文网

原创

Array的迭代

喜欢研究javascript,比看html和css有意思多了。废话不多说,全面介绍javascript的array类型的5中迭代方法。力争做到全面,每一种方法都有简单和复杂的例子参考。

  • every()方法,每一项都返回true,返回true

  • some()方法,有一项返回true,返回true

  • filter()方法,返回一个数组,每一个元素都是返回true的

  • map()方法,返回一个数组,每一个元素都是调用函数的结果

    立即学习Java免费学习笔记(深入)”;

  • forEach()方法,不返回结果,每一项运行特定的函数


为什么要用这些迭代,就是懒呗,不喜欢写for循环,上面的每一个方法都是可以用for做的。所以技术产生的动力就是懒惰。喜欢迭代让代码显得很牛逼,最近看了ES6的语法,那才叫简洁,和天书差不多。不过也增加了代码阅读的难度。上面5种方法,常用的也就是map()和forEach(),先从forEach说起。

1. forEach()

这货就是一个for循环,把你想干的事情放在括号里就行了,也不返回什么结果。看一下定义:

定义:forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。  语法: array.forEach(function(currentValue, index, arr), thisValue)

注意的点:

金戈企业建站系统0.1
金戈企业建站系统0.1

软件介绍:金戈企业建站系统不仅是一份免费的企业建站代码包,而且它还是完全开源的,它倾注了作者1个多月来日日夜夜的心血,虽然有些地方没做到尽善尽美,可我相信在接下来的日子里我会通过反馈信息让她更丰满实用起来。1.完美的摸板机制,即使你对php一点也不懂,只要你会做网页。就可以立即打造新颖别致的网站界面(摸板制作方法手册正在紧张制作中,稍后发布)可惜作者精力有限,目前只提供一套摸板。不过只是暂时的2.

下载
  • forEach() 对于空数组是不会执行回调函数的

  • 是不返回结果的,如果取的话就是undefined,下面试试

  • 最后就是不会改变原来的数组

解释半天,就是一个把for循环封装了一下。什么语言不都有类似的方法,PHP也有一个类似的方法角foreach,来个简单的例子。

        var num = [1, 2, 3, 4, 5];
        num.forEach((value) => {            
        console.log(value);
        });

遍历数组打印每一个元素,他干的事情和for没有任何区别。这里用了匿名函数(ES6的箭头函数,少打个function而已),再写一个显示调用的函数,并把位置也传进去。

        function myFunc(item, index) {
            console.log(index, item);
        }        var num = [1, 2, 3, 4, 5];
        num.forEach(myFunc);

这里写图片描述

前面是位置,后面是数值,代码没什么好解释的。有一个参数就是可选的thisValue,说白了就是指定调用的函数里的this是哪一个,默认就是undefined。

thisValue 可选。传递给函数的值一般用 “this” 值。如果这个参数为空,”undefined” 会传递给 “this” 值。

还是举个例子比较清楚,代码说明一切。

        function myFunc(item, index) {
            console.log(this.value, index, item);
        }        var num = [1, 2, 3, 4, 5];        
        var obj = {value: '就是一个对象而已'};
        num.forEach(myFunc, obj);

这里写图片描述

很傻的一段代码,就是单纯地在每一次迭代中使用了传入对象的值。函数里的this就是传入的对象obj。该解释的都解释完了,多说一句,这货就是替代for的,但不绝对,从效率上看for循环还是比他快的,JavaScript语言精粹里提到的,这里就不细说了。

2. map()

这货比上一个有用多了,在很多JS框架里都会看到它的身影,比如React和Redux中,关于reducer函数,要求返回一个新的state对象,而不能修改原来的state对象,就是利用它来返回。

定义:map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。map() 方法按照原始数组元素顺序依次处理元素。

 语法:
array.map(function(currentValue,index,arr), thisValue)

注意的点:

  • map() 不会对空数组进行检测。

  • map() 不会改变原始数组。

这货干了很多想干的事,上面举了一个React中state的例子,反正就是会经常用得到。根据某个条件,把数组里的每一个元素都执行相关的函数功能,差不多这个意思了。网上的例子都是输出一个数组,每一个元素都是原来的两倍,换一个新一点,如果是奇数输出#,偶数输出*。

        var num = [1, 2, 3, 4, 5];        
        var newNum = num.map((item) => {            
        if(item%2) {                
        return '#';
            } else {                
            return '*';
            }
        });        console.log(newNum);

这里写图片描述

至于可选参数thisValue的用法,和上面的例子差不多,就不再写一遍了。5个里面这个最实用,出现的次数也是最多的。

3.filter()

这也是一个比较有用的方法,在对一个数组进行筛选的时候用到。

定义:filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。

 语法:
array.filter(function(currentValue,index,arr), thisValue)

注意的点:

  • filter() 不会对空数组进行检测。

  • filter() 不会改变原始数组。

举个比较复杂的例子,在Todo的例子,很多框架都会用这个例子来展示自己这个框架的好处。Todo应用里有很多事项,有完成的,也未完成的,那么把完成的或未完成的筛选出来就需要用到这个了。

        var todos = [
            {name: 'todo1', completed: false}, 
            {name: 'todo2', completed: true},
            {name: 'todo3', completed: false}
        ];        var todosCompleted = todos.filter((todo) => {            
        return todo.completed;
        });        console.log(todosCompleted);

这里写图片描述

直截了当,比在for循环里写if判断简洁多了。

4.every()和some()

最后两个一起说,这两是兄弟,大的叫且(&&),小的叫或(||),给出定义也能看明白:

定义: every() 方法用于检测数组所有元素是否都符

合指定条件(通过函数提供)。every() 方法使用指定函数检测数组中的所有元素:
  - 如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测
  - 如果所有元素都满足条件,则返回 true。

定义:some() 方法用于检测数组中的元素是否满足指定条件(函数提供)。some() 方法会依次执行数组的每个元素:
  - 如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。
  - 如果没有满足条件的元素,则返回false。

注意的点:

  • 都不会对空数组进行检测。

  • 不会改变原始数组。

很少在项目中会想到这两兄弟,用for循环加上if判断,break退出循环就可以实现。用迭代方法就是要少写几行代码,js有一个库underscore,那更简洁。Backbone框架就依赖了这个库来实现对model和collection的便捷操作。最后一个例子结束这一讲,判断数组里的数字是否都是奇数(every),是否有偶数(some)。

        var num = [1, 3, 5, 6];        
        console.log(num.every((value) => {    // flase            
        return value%2;
        }));        
        console.log(num.some((value) => {     // true
            return !(value%2);
        }));

这两个方法比较聪明,对于every()方法,只要有一个结果是false,就直接返回false,后面的就不检测了。同理对于some()方法,只有出现返回true的结果,也就直接返回true,后面就不检测了。这个就不具体测试了,这样做就是为了提高效率,就是一个break的事。

总结

讲了五种Array的迭代方法,就是程序员偷懒搞的,还有更懒的方法,ES6里面的语法就更像天书了,比如箭头函数(=>)就是为了省写function这个单词,还有一个很牛逼的扩展操作符…,直接看呆。以后有机会慢慢来写这些看不懂的符号,这一次讲的迭代是后面的基础,常用的也就是forEach和map方法,多用就记住了。

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
java入门学习合集
java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容,阅读专题下面的文章了解更多详细学习方法。

2

2026.01.29

java配置环境变量教程合集
java配置环境变量教程合集

本专题整合了java配置环境变量设置、步骤、安装jdk、避免冲突等等相关内容,阅读专题下面的文章了解更多详细操作。

2

2026.01.29

java成品学习网站推荐大全
java成品学习网站推荐大全

本专题整合了java成品网站、在线成品网站源码、源码入口等等相关内容,阅读专题下面的文章了解更多详细推荐内容。

0

2026.01.29

Java字符串处理使用教程合集
Java字符串处理使用教程合集

本专题整合了Java字符串截取、处理、使用、实战等等教程内容,阅读专题下面的文章了解详细操作教程。

0

2026.01.29

Java空对象相关教程合集
Java空对象相关教程合集

本专题整合了Java空对象相关教程,阅读专题下面的文章了解更多详细内容。

3

2026.01.29

clawdbot ai使用教程 保姆级clawdbot部署安装手册
clawdbot ai使用教程 保姆级clawdbot部署安装手册

Clawdbot是一个“有灵魂”的AI助手,可以帮用户清空收件箱、发送电子邮件、管理日历、办理航班值机等等,并且可以接入用户常用的任何聊天APP,所有的操作均可通过WhatsApp、Telegram等平台完成,用户只需通过对话,就能操控设备自动执行各类任务。

25

2026.01.29

clawdbot龙虾机器人官网入口 clawdbot ai官方网站地址
clawdbot龙虾机器人官网入口 clawdbot ai官方网站地址

clawdbot龙虾机器人官网入口:https://clawd.bot/,clawdbot ai是一个“有灵魂”的AI助手,可以帮用户清空收件箱、发送电子邮件、管理日历、办理航班值机等等,并且可以接入用户常用的任何聊天APP,所有的操作均可通过WhatsApp、Telegram等平台完成,用户只需通过对话,就能操控设备自动执行各类任务。

16

2026.01.29

Golang 网络安全与加密实战
Golang 网络安全与加密实战

本专题系统讲解 Golang 在网络安全与加密技术中的应用,包括对称加密与非对称加密(AES、RSA)、哈希与数字签名、JWT身份认证、SSL/TLS 安全通信、常见网络攻击防范(如SQL注入、XSS、CSRF)及其防护措施。通过实战案例,帮助学习者掌握 如何使用 Go 语言保障网络通信的安全性,保护用户数据与隐私。

8

2026.01.29

俄罗斯Yandex引擎入口
俄罗斯Yandex引擎入口

2026年俄罗斯Yandex搜索引擎最新入口汇总,涵盖免登录、多语言支持、无广告视频播放及本地化服务等核心功能。阅读专题下面的文章了解更多详细内容。

622

2026.01.28

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.3万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.5万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号