常见的数组遍历方法及其异同点(map、forEach、filter)

forEach、map、filter的区别

一、相同点

（1）都会循环遍历数组中的每一项

（2）map()、forEach()和filter()方法里每次执行匿名函数都支持3个参数

（3）只能遍历数组

二、不同点

（1）map()和filter()会返回一个新数组，不对原数组产生影响；

forEach()不会产生新数组，无返回值

1、Array.forEach()

介绍：

将数组循环一遍，函数参数有三个入参，不返回任何数据

格式：

[].forEach((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)

返回值：

一个新的数组

使用场景：

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

示例：

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

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

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

3、Array.map()

介绍：

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

格式：

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

返回值：

一个新数组

使用场景：

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

示例：

const arr = [
  { name: "张三", age: 14 },
  { name: "李四", age: 12 },
  { name: "王五", age: 13 },
]
const newArr = arr.map((item, index, arr) => item.name)
console.log(newArr); //['张三', '李四', '王五']

4、Array.some()

介绍：

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

格式：

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

返回值：

当有一次遍历符合条件则返回 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)

返回值：

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

使用场景：

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

示例：

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)

返回值：

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

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

使用场景：

拿到符合条件的元素或他的下标，没有就返回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