js数组常见的遍历方法

比眉伴天荒 2023-06-30 10:45 17阅读 0赞

## 1、for循环遍历 ##

根据数组的长度，进行循环遍历，获取每一个数组的值进行使用，对原来数组没有影响

var arr=[1,2,3];
    for(var i=0;i<arr.length;i++){
      if(arr[i]>0){
        ....
      }
    }

## 2、forEach遍历 ##

forEach的参数是的元素和索引，以及数组的本身，arr.forEach(元素值，元素的索引，数组本身)

var arr = [1,5,8,92];
    arr.forEach((item,index,array)=>{
      console.log('数组的元素值为'+item);
      console.log('数组的元素索引为'+index);
      console.log('数组的值'+array);
    })

结果如下：

![20200117095658407.png][]

## 3、map遍历 ##

map遍历方法有返回值，可以把需要的的值通过遍历return出来，而且不会改变原数组，参数和forEach一样三个参数：数组的元素值、数组元素值索引、数组本身

var arr = [78,899,12,45];
    var test = arr.map((item,index,array)=>{
      return item*10
    })
    console.log(test); //[780,8990,120,450]

## 4、for of 遍历 ##

for of遍历可以多种数据类型：数组、字符串等等，但是对象的话建议使用for in进行遍历

var arr3 = [4,8,6,8,4];
    var test = "hello";
    for(var value of arr3){
      console.log(value)
    }
    for(var value of test){
      console.log(value)
    }

遍历结果如下所示：

![20200117145524168.png][]

## 5、for in遍历 ##

for in遍历一般情况下都是遍历对象，其中参数为对象的键，我们可以通过遍历出来的键来获取对象中它的值，从而形成键值对

var person = {name:'lili',age:'18',height:175}
    for(var index in person){
      console.log(value+':'+person[index])
    }

## 6、some遍历 ##

some一般用于判断一个数组中有没有符合条件的那一项，如果有一项符合条件则返回true，退出遍历，如果所有项都不符合条件那么则返回fasle

var arr = [78,99,45,75];
    var result = arr.some((item,index,array)=>{
      return item>50
    })
    console.log(result); //true
    var result2 = arr.some((item,index,array)=>{
      return item>100
    })
    console.log(result2); //false

## 7、every遍历 ##

every一般用于判断数组中每一项都符合条件时，返回true，

var arr1 = [1,8,5,85];
    var arr2 = [100,80,56,88];
    var test1 = arr1.every((item,index,array)=>{
      return item>50
    })
    var test2 = arr2.every((item,index,array)=>{
      return item>50
    })
    console.log(test1,test2);  //false,true

## 8、filter遍历 ##

filter返回的是数组，返回的数组中包含符合条件的元素，不会修改原来的数组

var arr = [1,2,3,45,6,48];
    var last = arr.filter((item,index,array)=>{
      return item%2 == 0;
    })
    console.log(last); //[2,6,48]

[20200117095658407.png]: https://img-blog.csdnimg.cn/20200117095658407.png
[20200117145524168.png]: https://img-blog.csdnimg.cn/20200117145524168.png