详解JS中遍历数组的八种方法

2024-07-04 23:35| 来源: 网络整理| 查看: 265

常见遍历数组的方法（内置）

遍历：就是将数组中的元素全部取出来。

一，利用for()循环 var arr=[1,2,3,4,5,6] for(var i=0;i console.log("第一个参数="+value); // console.log("第二个参数="+index); // console.log("第三个参数="+array); })

分别对他们显示，这样结构比较清晰：在这里插入图片描述

在这里插入图片描述缺点：这种写法的问题在于，无法中途跳出forEach循环，break命令或return命令都不能奏效。

三，map（）函数

map函数，遍历数组每个元素，并回调操作，需要返回值，返回值组成新的数组，原数组不变。

每个元素都是回调函数返回的值。

var arr=[1,2,3,4,5,6]; var result=arr.map(function (value){ value=value+1; //我们可以稍微改变返回值，来确定会不会组成新的数组 console.log("第一个参数="+value); return value; }) console.log (arr,result);

在这里插入图片描述

四，filter（）函数

返回一个新数组，数组的元素是原数组中通过测试的元素（就是回调函数返回 true 的话，对应的元素会进入新数组），原数组不变。

var arr=[1,"男",true,66]; var result=arr.filter(function (value){ return typeof value === 'number'; //我们判断数据类型是否为Number,是则将其值返回 }) console.log (arr,result);

在这里插入图片描述

五，some（）函数

遍历数组中是否有符合条件的元素，返回值为Boolean值这个它只要找到一个符合条件的，就返回 true。

var arr=[1,"男",true,66]; var result=arr.some(function (value){ return typeof value === 'number'; }) console.log (arr); console.log (result); var arr2=[1,null,true,66]; var result2=arr2.some(function (value){ return typeof value === 'String'; }) console.log (arr2); console.log (result2);

在这里插入图片描述

六，every（）函数

测试数组的各个元素是否通过了回调函数的测试

若都通过，返回 true，否则返回 false

简单的说就是如果回调函数每次返回的值都是 true 的话，则 every() 返回 true，否则为 false。

var arr=[1,2,8,66]; var result=arr.every(function (value){ return typeof value === 'number'; }) console.log (arr); console.log (result); var arr2=[1,"男",true,66]; var result2=arr2.every(function (value){ return typeof value === 'number'; }) console.log (arr2); console.log (result2);

在这里插入图片描述

七，find（）函数

返回第一个通过测试的元素

如果没有通过测试的元素，则会返回undefined。

var arr=[1,2,8,66,"女","男"]; var result=arr.find(function (value){ return typeof value === 'string'; }) console.log (arr); console.log (result); var arr2=[1,"男",true,66,false]; var result2=arr2.find(function (value){ return typeof value === 'boolean'; }) console.log (arr2); console.log (result2);

在这里插入图片描述

八，findIndex（）函数

这个函数与上面的find（）作用一样，就是它返回的值为该通过第一个元素的索引。

var arr=[1,2,8,66,"女","男"]; var result=arr.findIndex(function (value){ return typeof value === 'string'; }) console.log (arr); console.log (result); var arr2=[1,"男",true,66,false]; var result2=arr2.findIndex(function (value){ return typeof value === 'boolean'; }) console.log (arr2); console.log (result2);

在这里插入图片描述

总结：我们可以根据自己的需求来使用其中的方法，除去for循环，这七种回调函数，它们的参数都有三个，就是我们在forEach()中详细介绍的，如果自己有需求可以自己向里面在添加参数，来返回所需内容。我们用更简洁的语法（比如内置函数）遍历数组，从而消除循环结构。

【本文地址】

公司简介

联系我们