面试题：js遍历数组有几种方式

543 11-02

日常对数据的处理都是后端来做，但是前端对数据的一些基本处理还是要掌握。数组是最常见的数据类型，我们时常要对他进行各种处理或者判断，接下来我给大家介绍几种基础的常用的遍历数组的方法，并求求大家不要再在项目里用 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 newArr1 = arr.some((item, index, c) => item.name === "张伟");
console.log(newArr1); // true

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

console.log(newArr2); // 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 newArr1 = arr.every((item, index, c) => item.age > 18);
console.log(newArr1); // false

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

console.log(newArr2); // true

5.Array.find()，Array.findIndex()

介绍

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

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

参数

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

返回值

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

使用场景

拿到符合条件的元素或他的下标

例子

找到年龄为 50 的人找到年龄为 40 的人

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

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

const newArr2 = arr.every((item, index, c) => item.age === 40);

console.log(newArr2); // undefined

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

摸鱼社区：智一面