日常对数据的处理都是后端来做,但是前端对数据的一些基本处理还是要掌握。数组是最常见的数据类型,我们时常要对他进行各种处理或者判断,接下来我给大家介绍几种基础的常用的遍历数组的方法,并求求大家不要再在项目里用 轻易的使用 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.Array.filter()

介绍

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

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

参数

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

返回值

一个新数组

使用场景

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

例子

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); //['张三', '罗翔', '张伟']