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