JS中常用遍历数组的方法

for...of

for...of是es6中新引入的语法，它可以直接遍历可迭代对象（如数组）中的值，而不需要访问索引。of前是一个变量声明，用于存储每一次迭代的对象，of后是则是需要迭代的对象。

let arr = [1,2,3];
for(a of arr){
    console.log(a);
}

for...of 适用于需要遍历可迭代对象（如数组、字符串、映射等）并逐个处理其元素的场景，尤其当不需要索引或键时。

forEach

forEach是Array.prototype上的方法，接下来介绍的几种方法也都源自于此，其的语法结构为：

array.forEach(callback(element[, index[, array]])[, thisArg])

callbakc为回调函数，它会对迭代的每一个元素element执行次回调函数，后面的index array 和thisArg是可选项。它不会改变原数组，也不会创建新数组，而且没有任何返回值。

let arr = [1,2,3];
arr.forEach(a => console.log(arr))

它的缺点是不能中断或者跳出循环，如果需要中途退出应该使用别的方法,如果使用return只能阻止当前回调函数的进行，并不会影响整个forEach操作。

let arr = [1,2,3];
arr.forEach(a => {
    if(a>2){
        return a;
    }// a > 2时终止回调函数的进行
    console.log(a)
  }
)

适用于仅仅简单遍历数组时使用。

map

基本语法：

const newArray = array.map(callback(currentValue[, index[, array]])[, thisArg])

map方法用来数组映射，它也会对数组中每个元素执行回调函数，但是它不会改变原有的数组，而是将回调函数的返回值作为新元素加入到新的数组中，所以它的返回值将会是一个新的数组。

let arr = [1,2,3];
const newArr = arr.map(a => a+1);
console.log(newArr);

map同样可以用来处理复杂对象：

const users = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' }
];

const usernames = users.map(user => user.name);
console.log(usernames); // 输出: ['Alice', 'Bob', 'Charlie']

所以map应当在原数组不能满足需求时使用，且它能返回一个新数组可以与其他方法一起使用，适合对每个元素进行某种变换操作。如果只是单单想遍历数组则不推荐使用。

filter

基本语法：

const newArray = array.filter(callback(element[, index[, array]])[, thisArg])

同map相同，它也会返回一个新数组并且不改变原有数组，只是它的返回方式与map有所不同，它只会返回所有通过callback测试的元素，也就是回调函数的返回值是ture of false，是true则作为返回值加入新数组中，false则会被过滤，如果没有元素通过，则返回一个空数组。

let arr = [1,2,3];
// 小于2的元素执行函数返回值为false 则被过滤
const newArr = arr.filter(a => a > 2);
console.log(newArr);

它同样可以作为对复杂对象使用，并且过滤。其适用场景是为数组选出符合条件的理想元素，可以用于基于各种条件（如数值范围、字符串匹配、对象属性等）进行筛选。

find和findIndex

基本语法：

const foundElement = array.find(callback(element[, index[, array]])[, thisArg])

const foundElement = array.find(callback(element[, index[, array]])[, thisArg])

find用于查找满足指定条件的第一个元素，它返回的是第一个通过测试的元素，如果没有元素通过则会返回undefined,它不会遍历整个数组，一旦找到符合条件的元素就会停止遍历并且返回该元素。

let arr = [1,2,3];
const newArr = arr.find(a => a > 1);
console.log(newArr);

let arr = [1,2,3];
const newArr = arr.find(a => a > 3);
console.log(newArr);

findIndex与find不同的是，它返回的是数组的下标，并且没有元素通过时它将会返回-1，而不是undefined。

let arr = [1,2,3];
const newArr = arr.findIndex(a => a > 3);
console.log(newArr);