遍历数组的方式

130 阅读2分钟

1.普通for循环

在for循环里做你想做的任何操作,可以改变原数组,也可以不改变

        let arr = [1,2,3,4,5]
        for(let i=0;i<arr.length;i++){
            //arr[i]=arr[i]+1 改变原数组
            console.log(arr[i]);
        }

输出结果:

image.png

2.for of

这种方法可以改变原数组

        let arr = [1,2,3,4,5]
        for(let s of arr){
            // s+=2  修改原数组
            console.log(s);
        }

输出结果:

image.png

3.for in

for-in不能改变原数组,其中用for-in遍历数组不合适,因为遍历出来得到的是每个属性的key(对于数组而言就是索引值),当遍历对象的时候输出对象中的属性

        let arr = [1,2,3,4]
        for(const s in arr){
            console.log(s);
        }
        let obj = {
            name:'zs',
            age:19
        }
        for(const s in obj){
            console.log(s);
        }

输出结果:

image.png

4.Array.every()

every方法测试一个数组内的所有元素是否都能通过指定函数的测试。如果有一个没通过,则输出false,如果都通过则输出true,该方法不改变原数组

        let arr = [1, 2, 3, 4, 5]
        const callback = (s,index,arr) =>{
            // s遍历数组的元素,index数组的索引值,arr数组
            console.log(s,index,arr);
            return s<10
        }
        console.log(arr.every((s) => s > 2));
        console.log(arr.every(callback));

输出结果:

image.png

5.Array.some()

和every类似,测试一个数组中是否有元素能通过测试,如果有一个能通过则输出true,要是全不通过则输出false,every和some类似于'与'和'或',如下图输出结果所示,当调用callback遍历的时候,只调用了一次,因为第一个就符合测试条件,返回true,那么就没有在遍历下去的必要了,相似的every只要在前面的遍历中要是有一个false,就不会再遍历下去

        let arr = [1,2,3,4,5]
        const callback = (s,index,arr)=>{
            // s遍历数组的元素,index数组的索引值,arr数组
            console.log(s,index,arr);
            return s<2
        }
        console.log(arr.some(s=>s>10));
        console.log(arr.some(callback));

输出结果:

image.png

6.Array.filter()

返回一个由原数组产生的新数组,如果原数组中的成员满足回调中的条件,则加入新数组中,原数组不会被修改

        let arr = [1, 2, 3, 4, 5]
        const callback = (s,index,arr) => {
            // s遍历数组的元素,index数组的索引值,arr数组
            console.log(s,index,arr);
            return s < 2
        }
        let arr1 = arr.filter((s) => s > 2)
        let arr2 = arr.filter(callback)
        console.log(arr1);
        console.log(arr2);

输出结果:

image.png

7.Array.map()

返回一个新数组,这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。g该方法不会修改原数组

        let arr = [1,2,3,4,5]
        const callback = (s,index,arr) =>{
            // s遍历数组的元素,index数组的索引值,arr数组
            console.log(s,index,arr);
            return s+=100
        }
        let arr1 = arr.map(s=>s+10)
        let arr2 = arr.map(callback)
        console.log(arr1);
        console.log(arr2);

输出结果:

image.png

8.Array.forEach()

该方法对数组的每个元素执行一次给定的函数。 原则上不可以改变原数组,但是你要是在遍历中拿到数组,也是可以改的

        let arr = [1,2,3,4,5]
        arr.forEach((s,index,arr)=>{
            // s遍历数组的元素,index数组的索引值,arr数组
            // arr[index]+=10 修改元素值
            console.log(s,index,arr);
        })

输出结果:

image.png

9.Array.reduce()

遍历数组,进行函数中的操作,并且把每次操作的返回的值,返回给下一次遍历,在下一次的遍历中,以上次的结果为初始值,在此进行操作,最后返回一个值

let arr = [1,2,3,4,5]
        
        console.log(arr.reduce((a,b)=>{
            // a上次运算传入的值,b当前遍历的值
            console.log(a,b);
            return a+b
        }));

输出结果:

image.png