JavaScript数组对象的迭代方法详解

简介: JavaScript数组对象的迭代方法详解上一篇博客讲到了数组的方法,当然里边比较复杂的就是数组的迭代方法,因为涉及到了回调函数,所以这篇博客我们来详细讲解一下js数组迭代方法的使用。1.forEach(funcrion(value,index,arr){}):对数组的每一项运行给定函数,这个方法不进行返回,所以一般用于让数组循环执行某方法。 var arr=[1,2,3,4,5,6]; arr.forEach(function(val,index,arr){ console.log(val,index,arr); }) // 其中:

JavaScript数组对象的迭代方法详解




上一篇博客讲到了数组的方法,当然里边比较复杂的就是数组的迭代方法,因为涉及到了回调函数,所以这篇博客我们来详细讲解一下js数组迭代方法的使用。

1.forEach(funcrion(value,index,arr){}):对数组的每一项运行给定函数,这个方法不进行返回,所以一般用于让数组循环执行某方法。


vararr=[1,2,3,4,5,6];
arr.forEach(function(val,index,arr){
console.log(val,index,arr);
    })
// 其中:// value:每一个数组项的值 必填项// index:每一个数组项对应的索引// arr:当前的数组

注意:forEach()方法不返回值,所以回调函数中使用return会打印出来undefined。

2.map(funcrion(value,index,arr){}):对数组的每一项运行给定函数,它将返回执行函数后的结果组成的新数组。

varaNum2= [1.2, 1.8, 2.0, 4.3];
console.log(aNum2.map(Math.floor()));// [1,1,2,4]vararr=[1,2,3];
console.log(arr.map(function(val,index){
returnval*3    }));// 3 6 9// 其中:// value:每一个数组项的值 必填项// index:每一个数组项对应的索引// arr:当前的数组


注意:map()方法有返回值,返回值为新的数组,所以可以直接再回调函数中return。


3.every(funcrion(value,index,arr){}):对数组的每一项都运行给定函数,进项判断,若对于每项执行函数都返回了true,则其结果为true。


vararr=[10,20,30];
console.log(arr.every(function(val){
returnval>20;
    }));// falseconsole.log(arr.every(function(val){
returnval>0;
    }));// true// 其中:// value:每一个数组项的值 必填项// index:每一个数组项对应的索引// arr:当前的数组


注意:every()方法所有的数组项都符合判断时返回true,否则返回false。


4.some(funcrion(value,index,arr){}):对数组的每一项都运行给定函数,进行判断,若存在一项符合条件的数组项,则其结果为true。


vararr=[10,20,30];
console.log(arr.some(function(val){
returnval>20;
    }));// trueconsole.log(arr.some(function(val){
returnval>0;
    }));// trueconsole.log(arr.some(function(val){
returnval<0;
    }));// falsearr.some(function(val){
console.log(val<0);
    });//fasle false false// 其中:// value:每一个数组项的值 必填项// index:每一个数组项对应的索引// arr:当前的数组

注意:some()方法如果回调函数执行完会根据结果返回true或false,但是回调函数中打印判断是,只会作为判断条件的返回值,则会打印多遍。

5.fliter(funcrion(value,index,arr){}):对数组的每一项都运行给定函数,进行过滤,将符合条件的数组项添加到新的数组中,并返回新的数组。


 

varaNum=[1,2,3,4];
console.log(aNum.filter(function (num) {
returnnum>1;
    }));//[2,3,4,]aNum.filter(function (num) {
console.log(num>1);//true true true    })


注意:filter()方法对数组项进行过滤,然后将符合条件的数组项添加到一个新的数组并返回,但是如果直接打印这个判断条件,相当于打印的判断条件的结果,只会返回true或者false。


6.ES6中新增的迭代方法

1.find():返回第一个符合传入测试(函数)条件的数组元素。


varaNum=[10,20,30,40];
console.log(aNum.find(function (num) {
returnnum>19;
    }));//20console.log(aNum.find(function (num) {
returnnum<0;
    }));//undefined


2.findIndex():返回符合传入测试(函数)条件的数组元素索引。

console.log(aNum.findIndex(function (num) {
returnnum>19;
    }));//1

3.includes():判断一个数组是否包含一个指定的值。


console.log(aNum.includes(17));//falseconsole.log(aNum.includes(20));//true

总结:


   forEach()与map()是一对,用于数组遍历执行指定函数,前者不返回数组,后者返回 处理过的新数组。


   every()与some()是一对,分别适用于检测数组是否全部满足某条件或者存在满足的数组项,返回true或false。


   filter()则是相当于过滤器的存在,过滤掉数组中不符合条件的数据,将符合条件的数组项添加到新数组,并返回。


视频讲解链接:
https://www.bilibili.com/video/BV1UQ4y1A73N/

相关文章
|
5月前
|
监控 负载均衡 JavaScript
有哪些有效的方法可以优化Node.js应用的性能?
有哪些有效的方法可以优化Node.js应用的性能?
296 69
|
4月前
|
JavaScript Linux 内存技术
Debian 11系统下Node.js版本更新方法详解
本指南详细介绍在Linux系统中安装和管理Node.js的步骤。首先检查现有环境,包括查看当前版本和清除旧版本;接着通过NodeSource仓库安装最新版Node.js并验证安装结果。推荐使用nvm(Node Version Manager)进行多版本管理,便于切换和设置默认版本。同时,提供常见问题解决方法,如权限错误处理和全局模块迁移方案,以及版本回滚操作,确保用户能够灵活应对不同需求。
290 0
|
4月前
|
JavaScript Linux 内存技术
Debian 11系统下Node.js版本更新方法
Debian 11更新Node.js主要就是这三种方式,无论你是初涉其中的新手还是找寻挑战的专家,总有一种方式能满足你的需求。现在,你已经是这个
322 80
|
6月前
|
编解码 JavaScript 前端开发
【Java进阶】详解JavaScript的BOM(浏览器对象模型)
总的来说,BOM提供了一种方式来与浏览器进行交互。通过BOM,你可以操作窗口、获取URL、操作历史、访问HTML文档、获取浏览器信息和屏幕信息等。虽然BOM并没有正式的标准,但大多数现代浏览器都实现了相似的功能,因此,你可以放心地在你的JavaScript代码中使用BOM。
164 23
|
6月前
|
JavaScript 前端开发 Java
js 垃圾回收机制的方法
JS回收机制方法讲解
|
7月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
存储 JavaScript 前端开发
|
JavaScript
js基础笔记学习247event对象3
js基础笔记学习247event对象3
136 0
js基础笔记学习247event对象3
|
JavaScript
js基础笔记学习309筛选jquery对象1
js基础笔记学习309筛选jquery对象1
135 0
js基础笔记学习309筛选jquery对象1
|
JavaScript
js基础笔记学习245event对象1
js基础笔记学习245event对象1
66 0
js基础笔记学习245event对象1

热门文章

最新文章