js中数组常用遍历，VUE 中数组常用遍历

迷南。 2023-06-11 10:23 1阅读 0赞

js中数组常用遍历，VUE 中 数组常用遍历方法

1，filter() 遍历数组  
①filter遍历数组会返回一个新的数组，  
②循环次数：数组的长度

/*
        1,filter 循环 会返回一个新的数组
        2,循环次数为是整个数组的长度
         */
        let filArr = [1,2,3,4,5,6]
        let newFilArr = filArr.filter( (item,i) =>{
            console.log("循环==i==",i);
           return item >= 3
        } )
        console.log("newFilArr==",newFilArr)

运行效果图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]  
2，some()函数进行循环 找到符合条件的便会终止循环，否则会遍历整个数组。  
①符合条件时返回ture,否则返回false  
②循环次数：小于等于数组长度；  
③当条件满足时，就会终止循环，并返回ture,如果没有满足判断条件，会遍历整个循环

/*
     1,some 循环 会返回一个true 或false
     2,当条件满足时，就会终止循环，并返回ture,如果没有满足判断条件，会遍历整个循环
      */
        let someArr = [1,2,3,4,5,6]
    
        let newSomeArr = someArr.some( (item,i) =>{
            console.log("some循环==i==",i);
            return item >= 3
        } )
        console.log("newSomeArr==",newSomeArr)

![在这里插入图片描述][20191223174153217.png]

3 map()循环  
①会遍历整个数组的循环  
②会得到一个新的数组（返回数组是什么取决于map函数中的调用用法），如下两个例子

let mapArr = ['one','two','three']
        let newMapArr = mapArr.map((item,i) => {
            console.log("map循环==i==",i);
            return item === 'two'
        })
        console.log("mapArr==",mapArr)
        console.log("newMapArr==",newMapArr)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 1]

let mapArr = ['one','two','three']
        let newMapArr = mapArr.map((item,i) => item += ',haha')
        console.log("mapArr==",mapArr)
        console.log("newMapArr==",newMapArr)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 2]

4，forEach() 函数  
①无任何返回，可改变原来数组中的内容  
②循环次数：数组的长度  
③不支持return，不需要return语句

如下案例：给每个对象中添加age属性

let forArr = [{name:'tom',sex:'man'},{name:'linda',sex:'woman'},]
         forArr.forEach((item,i) => {
            console.log("forEach循环==i==",i);
             item.age = 27
        })
    
        console.log("forArr==遍历后===",forArr)

![在这里插入图片描述][20191224092438150.png]

5，find()函数  
①有返回值，符合条件会返回一个数组中的项，比如对象  
②循环次数：小于等于数组长度

如下面3个案例所示
    
     //案例1： 返回uundefined
        let findArr = [{name:'tom',sex:'man'},{name:'linda',sex:'woman'},{name:'Join',sex:'man'},]
        let perObj = findArr.find((item,i) => {
            console.log("findArr循环==i==",i);
            return item.name === 'linda3'
        })
        console.log("perObj===",perObj)
    
        //案列2
        let ages = [3, 10, 18, 20];
        let newAge =    ages.find(item => item>10)
        console.log("最后数据==",newAge);
    
        //案列3
        const arr = [{name:"Jim",age:"20"},{name:"Lily",age:"18"},{name:"Mei",age:"18"},]
        let age18s =  arr.find((item,i)=>{
            console.log("findArr循环222==i==",i);
            return item.name === 'Lily'
        })
        console.log("age18s==",age18s);

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 3]

6 findIndex()  
①会返回符合对象或项所在的索引值，否则返回-1  
②循环次数：小于等于数组的长度

const arrIndex = [{name:"Jim",age:"20"},{name:"Lily",age:"18"},{name:"Mei",age:"18"},]
        let index =  arrIndex.findIndex((item,i)=>{
            console.log("findIndex==循环次数i==",i);
            return item.name === 'Lily'
        })
        console.log("index==",index);

![在这里插入图片描述][20191224100025331.png]

7 every()函数  
①用于检测所有数组项中是否都符合某个条件，如果都符合则返回true，只要有一项不符合则返回false，后面的元素则不遍历  
②循环次数：小于等于数组长度

let everyArr = [{name:'tom',sex:'man'},{name:'linda',sex:'woman'},{name:'Join',sex:'man'},]
        let isEvery = everyArr.every((item,i) => {
            console.log("every循环次数==i==",i);
            return item.sex === 'woman'
        })
        console.log("isEvery===",isEvery)

![在这里插入图片描述][20191224100745742.png]  
some() 和every() 有点类似

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]: /images/20230531/d34917e68ad44f299c18f672df2b3864.png
[20191223174153217.png]: /images/20230531/19d073816a5c42a989b1c1f0f5fb433a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 1]: /images/20230531/8e155b8d69b94f9d94d50be29f707138.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 2]: /images/20230531/0ce91072c6954c108d3ae983a78e95d6.png
[20191224092438150.png]: /images/20230531/0341f239c6df4e9ab282a5efa57b333b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 3]: /images/20230531/89602458ec6649e59f122b19298e62ea.png
[20191224100025331.png]: /images/20230531/558165909f444d71825fffc32bfc0ae8.png
[20191224100745742.png]: /images/20230531/016a830106254d91962c45faf065ca80.png