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

空城机
495 阅读2分钟

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

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


forEach 🤡

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

调用语法：

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

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

参数描述
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}`);
})

结果：

forEach循环.png


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);

结果：

map1.png

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

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

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

  • 如果只是单纯遍历数组，只是需要使用到内部元素时，最好使用forEach
  • 如果是希望改变数据值时，将数组按照某种规则映射为另一个数组，就可以使用map
  • 当然，一般来说如果没有很严格的性能要求，其实使用map这个高阶写法也很不错

reduce 👾

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

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

arr.reduce((acc, cur, idx, src)=>{
    ...
    return total;
})
参数描述
acc（Accumulator）累计器，初始值, 或者计算结束后的返回值；不止可以做加法，必需
cur（Current Value）当前值，必需
idx（Current Index）当前索引，可选
src（Source Array）数组，可选

因为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}`);

结果：

reduce对象.png

将内部的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
avatar
文章
阅读
粉丝