🔄 这些 JS 数组遍历是否都用过 🔄

在JavaScript遍历数组对象有好几种方式，这里将主要对forEach、map、reduce、filter、every、some这六个函数来进行讲述，对于every和some我是属于很少会用到的，不知道各位如何😵

forEach 🤡

forEach 是 ES5 中操作数组的一种方法，主要功能是遍历数组中的元素，参数是一个回调函数，回调函数中有三个参数

调用语法：

arr.forEach((item, index, array)=>{    ...})

三个参数当中一般最后的数组参数很少会使用。

forEach属于for循环的加强版，与jQuery中的$.each用法类似。即使是空数组也不会出现报错。

对于对象元素虽然不能直接进行遍历，但是可以通过Object.entries或者Object.values等转换方法将对象转换后进行遍历。

例子：

let arr = [1, 2, 3, '456', false, { sex: null }]let obj = { name:'张三', age: 40, scroe: 77, isPass: true }
/*********** forEach ***********/arr.forEach((item, index, objArr)=>{    console.log(`数组元素${index} : ${item}`);}) console.log('-------------------------');Object.values(obj).forEach((item, index, objArr)=>{    console.log(`对象元素${index} : ${item}`);}) 

结果：

map 🤖

这里是 map 指的是数组的map函数，而不是ES6中的Map数据结构。

map的用法使用方式与forEach类似，但是主要是为了创建一个新的数组。

• forEach方法不会返回结果，而是会返回undefined
  

• map会返回一个新的数组，原数组和新数组互不影响

例子：

// map生成新数组let newarr = arr.map((item, index, objArr)=>{    console.log(`数组元素${index} : ${item}`);    return item;})arr[1] = 10;  // 改变原数组，新数组不受影响console.log(newarr);console.log(arr);

结果：

注意： 这里如果修改的是原数组中的对象{sex: null}中sex值， 新数组 newarr 也还是会相应改变，因为两个数组的对象指向的存储地址还是同一个地方。

虽然map和forEach在遍历使用上基本差不多，但是在效率上还是forEach更快，毕竟map还要返回新数组，这里涉及到了数组的深拷贝。

两者的使用场景也因此有所区别：

• 如果只是单纯遍历数组，只是需要使用到内部元素时，最好使用forEach
  

• 如果是希望改变数据值时，将数组按照某种规则映射为另一个数组，就可以使用map
  

• 当然，一般来说如果没有很严格的性能要求，其实使用map这个高阶写法也很不错

reduce 👾

reduce() 方法对数组中的每个元素执行一个由您提供的 reducer 函数(升序执行)，将其结果汇总为单个返回值

使用方式与forEach、map类似，回调函数中接受四个参数，并且返回一个累加的数值

arr.reduce((acc, cur, idx, src)=>{    ...    return total;})

因为reduce函数原意是累加方法，所以数组中的数值最好都是 number 类型，否则可能会出现错误

累加遍历（在内部可以进行元素的条件判断）：

let arr = [1, 2, 3, '456', false, { sex: null }];let total = arr.reduce((acc, cur, idx, src)=>{    let type = typeof cur;    if (type != 'number') {        if (type == 'string'){            cur = parseInt(cur);        } else{            cur = 0;        }    }    console.log(`累加数值：${acc}, 当前元素: ${cur}`);    return acc + cur;})console.log(`数组累加为：${total}`);

结果：

将内部的return acc + cur修改为return acc - cur，就会变成第一个元素开始减去后面的元素了。不过reduce主要还是特定的累加遍历

filter 👻

filter函数也是与map一样，会返回一个新的数组。如同名字一样，filter函数主要是对数组进行筛选判断的.

• 回调函数主要用来测试数组中的每个元素的函数，返回true就保留该元素，false则不保留

• 参数也是和map一样，三个参数，其中当前元素是必需的。

• 如果没有任何元素通过，则返回空数组

例子：

let newarr = arr.filter((item, index, objArr)=>{    if (typeof item == 'number') return true;    else return false;})console.log(newarr);

结果：[1, 2, 3]

every 👹

every函数的功能也是对数组元素进行判断，不过与filter不同的是，filter保留通过筛选的元素，返回新数组。

every函数是返回一个boolean值，测试一个数组内的所有元素是否都能通过某个指定函数的测试，只要有一个元素没有通过，就会返回false。 全部通过就是true

let flag = arr.every((item, index, objArr)=>{    if (item != null) return true;    else return false;})console.log(flag);

结果：true

注意： 这里如果是空数组，那么不管做什么判断，都会返回 true

let flag = [].every((item, index, objArr)=>{
    return false
})
console.log(flag); // true

some ☠️

some方法与上面的every函数正好相反，测试数组中是不是至少有 1 个元素通过了被提供的函数测试。返回的是一个Boolean类型的值。

注意： 如果是空数组，那么不管做什么判断，都会返回false

例子：

let arr = [1, 2, 3, '456', false, { sex: null }];let flag = arr.some((item, index, objArr)=>{    // 这里只有{ sex: null }符合条件    if (typeof item == 'object') return true;    else return false;})console.log(flag);  // true