常用的数组循环方法整理

115 阅读2分钟

在实际的项目开发中,后端返回过来基本上都是数组包裹着对象这样类似数据,有时候并没有处理好还需要我们前端进一步去处理一下,这个时候就不要怪后端老大哥啦。毕竟别人也在努力搬他的砖啊,所以关键时候还是得靠我们自己敲出来最漂亮的代码,在这里我列举了一些常用的数组方法。

1.ForEach 方法对数组的每个元素执行一次给定的函数

场景1:

    let arr = [1,2,3,4,5]
    arr.forEach(item => {
        item +=2
        console.log(item)    
    })
    console.log(arr)

打印结果在这里我们看到了循环内部 item 的值发生了改变,但是arr的值并没有发生变化

image.png

场景2:

  let arr = [1,2,3,4,5]
    arr.forEach((item,index) =>{
        arr[index] +=2
        console.log(item);
    })
    console.log(arr);

打印结果

image.png

这次我们可以看到原数组的值是发生了改变的,但是item的值并没有发生变化

所以有些面试官会在这里给你挖个坑,问你当forEach执行的时候会修改原数组的数据吗,假如你回答不能,那....对不起出门右转啦

image.png

所以我们正确回答应该是forEach不能直接修改调用他的对象,但是他可能会被callback()函数改变

2. map方法创建一个新数组,其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

    let arr = ['2019年', '2020年', '2021年']
     let num = [0, 1, 2]
     let newArr = arr.map((year, i) => ({ year, num: num[i] }))
    console.log(newArr,'newArr');

打印结果

image.png

3. every()方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

    let arr = [1,23,4,5,78,10]
    let res = arr.every(item => item>=1)
    console.log(res);

打印结果

image.png

4.some()。方法测试一个数组内的某一个元素是否能通过指定函数的测试它返回一个布尔值。

    let arr = [1,23,4,5,78,10]
    let res = arr.some(item => item<2)
    console.log(res);

打印结果

image.png

5. filter() 方法创建一个新数组,其包含通过所提供函数实现的测试的所有元素

    let arr = [1,2,34,5,6,7,5,1,0,23,54]
    let res =  arr.filter(item => item > 10)
    console.log(res);

打印结果

image.png

6.reduce()方法对数组中的每个元素按序执行一个由您提供的 reducer 函数,每一次运行 reducer 会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值。

const array1 = [1, 2, 3, 4];


const sum = 0;
const sumWithInitial = array1.reduce(
  (previousValue, currentValue) => previousValue + currentValue,
  sum
);

console.log(sumWithInitial);

打印结果

image.png