不要再用for循环了!=>工作中常用的几个数组遍历方法

5,357

日常对数据的处理都是后端来做,但是前端对数据的一些基本处理还是要掌握。数组是最常见的数据类型,我们时常要对他进行各种处理或者判断,接下来我给大家介绍几种基础的常用的遍历数组的方法,并求求大家不要再在项目里用 轻易的使用 for 循环来进行一般数组的遍历了(for循环适合某些特殊的场景),那玩意儿维护起来挺难受的

1.Array.forEach()

介绍

这是最基础的数组遍历方法,接收一个函数作为参数,效果是可以将数组循环一遍,函数参数有三个入参,不返回任何数据

[].forEach((item, index, arr) => {});

参数

item 每次遍历时对应的数组的元素 index 每次遍历时对应的数组的下标 arr 被遍历的数组本身

返回值

使用场景

需要遍历一个数组的时候

例子

将所有的数据和对应的下标都打印出来

const arr = ["张三", "罗翔", "张伟"];
arr.forEach((item, index, arr) => {
  console.log(item, index);
});
// '张三' 0
// '罗翔' 1
// '张伟' 2

2.Array.filter()

介绍

对数组进行筛选,接收一个方法作为参数,该方法的返回值为 true 时就将该元素添加进新的数组

[].filter((item, index, arr) => true);

参数

item 每次遍历时对应的数组的元素 index 每次遍历时对应的数组的下标 arr 被遍历的数组本身

返回值

一个新的数组

使用场景

需要获取到列表里符合条件的元素

例子

将所有大于 4 的数字挑选出来

const arr = [1, 5, 9, 2, 3];

const newArr = arr.filter((item, index, c) => item > 4);

console.log(newArr); //[5, 9]

3.Array.map()

介绍

对数组进行映射,传一个方法,该方法需要返回一个数据,然后将所有返回的数据组成一个数组

[].map((item, index, arr) => 对数据进行处理并返回);

参数

item 每次遍历时对应的数组的元素 index 每次遍历时对应的数组的下标 arr 被遍历的数组本身

返回值

一个新的数组

使用场景

对数据进行处理,变成自己需要的数据格式

例子

将所有人的名字取出来

const arr = [
  { name: "张三", age: 14 },
  { name: "罗翔", age: 50 },
  { name: "张伟", age: 23 },
];

const newArr = arr.map((item, index, c) => item.name);

console.log(newArr); //['张三', '罗翔', '张伟']

4.Array.some()

介绍

对数组进行遍历,传入一个方法作为参数,返回一个 true 或者 false,一旦有一条返回的 true 则立即中止遍历

[].some((item, index, arr) => true);

参数

item 每次遍历时对应的数组的元素 index 每次遍历时对应的数组的下标 arr 被遍历的数组本身

返回值

当有一次遍历符合条件则返回 true,所有数据都不符合条件返回 false

使用场景

判断列表是否有一个或一个以上的元素符合某个条件

例子

列表里是否有人叫张伟? 列表里是否有人叫林三心?

const arr = [
  { name: "张三", age: 14 },
  { name: "罗翔", age: 50 },
  { name: "张伟", age: 23 },
];

const hasZhangWei = arr.some((item, index, c) => item.name === "张伟");
console.log(hasZhangWei); // true

const hasLinSanXin = arr.some((item, index, c) => item.name === "林三心");

console.log(hasLinSanXin); // false

5.Array.every()

介绍

对数组进行遍历,传入一个方法作为参数,返回一个 true 或者 false,false,一旦有一条返回的 false 则立即中止遍历(和 some 相反)

[].every((item, index, arr) => true);

参数

item 每次遍历时对应的数组的元素 index 每次遍历时对应的数组的下标 arr 被遍历的数组本身

返回值

当有遍历的所有方法 true 则返回 true,否则 false

使用场景

判断列表是否所有的元素都符合某个条件

例子

列表里是否所有人年龄都大于 18? 列表里是否所有人年龄都大于 3?

const arr = [
  { name: "张三", age: 14 },
  { name: "罗翔", age: 50 },
  { name: "张伟", age: 23 },
];

const all18 = arr.every((item, index, c) => item.age > 18);
console.log(all18); // false

const all3 = arr.every((item, index, c) => item.age > 3);

console.log(all3); // true

6.Array.find(),Array.findIndex()

介绍

对数组进行遍历,传入一个方法作为参数,返回第一个符合条件的元素本身或者他的下标(find 返回元素本身,findIndex 返回其下标)

[].find((item, index, arr) => true);
[].findIndex((item, index, arr) => true);

参数

item 每次遍历时对应的数组的元素 index 每次遍历时对应的数组的下标 arr 被遍历的数组本身

返回值

find 返回符合条件的元素本身,没有就返回 undefined findIndex 返回符合条件的元素的下标,没有就返回 -1

使用场景

拿到符合条件的元素或他的下标,没有就返回undefined

例子

找到叫罗翔的人并拿到他的信息 找到叫罗翔的人的下标

const arr = [
  { name: "张三", age: 14 },
  { name: "罗翔", age: 50 },
  { name: "张伟", age: 23 },
];

const person = arr.find((item, index, c) => item.name === '罗翔');
console.log(person); //   { name: "罗翔", age: 50 }

const i = arr.findIndex((item, index, c) => item.name === '罗翔');

console.log(i); // 1

还有一些其他的好用的方法,比如reduce,有兴趣可以去看看