js数组的遍历方法

1.for循环

const arr=["aaa","bbb","ccc"];
for(let i=0;i<arr.length;i++){
    console.log(arr[i]);
}

2.for...of 和 for...in

const arr = ["aaa", "bbb", "ccc"];
for (const item of arr) {
    console.log(item);
}
//也可以获取下标
const arr = ["aaa", "bbb", "ccc"];
for (const item of arr.entries()) {
    console.log(item);
}

分别输出

for in一般用于遍历对象（也可遍历数组，但得到的是索引值；跳出循环可用break，continue，return）；for of一般用于遍历数组（跳出循环用try catch或throw，不可用break，continue，return）。若要用for of遍历类数组对象，应先转换成数组。如下：

for of和for in还有以下区别：

 1.for of无法遍历对象          

var userMsg = {
    0: 'jack',
    1: 'marry',
    2: 'john',	
    3: 'james'
};
 
for(var key in userMsg){
    console.log(key, userMsg[key]);	
}

console.log('----------------------');

for(var item of userMsg){	
    console.log(item);
}

 输出结果：

  2.遍历输出结果不同

var arr = ['jack','marry','john','james'];
for(var key in arr){
    console.log(key);	
}
console.log('----------------------');
for(var item of arr){	
    console.log(item);
}

 输出结果

 3.for in 会遍历自定义属性，for of不会

var arr = ['jack', 'john', 'marry', 'james'];
arr.name = "数组";

for (var key in arr) {
    console.log(key + ': ' + arr[key]);
}
console.log('-----------分割线-----------');
for (var item of arr) {
    console.log(item);
}

3.forEach(callback, thisArg)

callback 函数每一轮循环都会执行一次，且还可以接收三个参数 (currentValue, index, array)， index, array 也是可选的， thisArg(可选) 是回调函数的 this 指向。 * 遍历可枚举的属性。若参数使用了thisArg，callback不可为箭头函数。

注意：

1.forEach本身不会改变原数组，但每次循环调用的callback可能会改变。

 let arr = [1, 2, 3, 4, 5];
 let a = arr.forEach(function(value, index, arr) {
     console.log(value)
    //输出
            1
            2
            3
            4
            5
 })
 console.log(a) //输出结果 undefined
 
 console.log(arr.toString())//输出 1,2,3,4,5

在callback中如何改变原数组？使用arr[index]操作原数组

// 基本类型
const numArr = [33,4,55];
numArr.forEach((ele, index, arr) => {
    if (ele === 33) {
        arr[index] = 999
    }
})
console.log(numArr);  // [999, 4, 55]

// 引用类型：使用arr[index]
const allChangeArr = [{    name: 'wxw',    age: 22}, {    name: 'wxw2',    age: 33}]
allChangeArr.forEach((ele, index, arr) => {
    if (ele.name === 'wxw2') {
        arr[index] = {
            name: 'change',
            age: 77
        }
    }
})
console.log(allChangeArr); // // [{name: "wxw", age: 22},{name: "change", age: 77}]

2.forEach与for of一样不能用break和return跳出循环。

 let arr = [1, 2, 3, 4];

 function find(array, num) {
     array.forEach((value, index) => {
         if (value === num) {
             return index;
         };
     });
 };
 let index = find(arr, 2);
 console.log(index);
 // 输出结果 undefined

如果真的要用return返回某个值，那就只能将return操作放在函数中，而不是forEach循环中：

let arr = [1, 2, 3, 4];

function find(array, num) {
    let index_;
    array.forEach((value, index) => {
        if (value === num) {
            index_ = index;
        };
    });
    return index_;
};
console.log(find(arr, 2));
//输出结果 1

4.map

map()方法返回一个新数组，数组中的元素为原始数组元素调用函数处理的后值。 
map()方法按照原始数组元素顺序依次处理元素。 

语法：array.map(function(currentValue, index, arr), thisIndex)

参数说明：

function(currentValue, index, arr)：必须。为一个函数，数组中的每个元素都会执行这个函数。其中函数参数：
currentValue：必须。表述当前元素的的值(item)
index：可选。当前元素的索引也就是第几个数组元素。
arr：可选。当前元素属于的数组对象
thisValue：可选。对象作为该执行回调时使用，传递给函数，用作"this"的值

示例：

var arr = [1,2,3,4,5,6,7,8,9,10];
var arr2 = arr.map(String);
console.log(arr);//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(arr2);//['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']

注意：

1.当map函数内部使用箭头函数的时候，无论是否带有thisValue，函数内部的this都指向全局window

var arr = [1,2,3,4,5,6,7,8,9,10];
var arr1 = [2,2,2,2,2,2,2,2,2,2];
var arr2 = arr.map((currentValue, index, arr) => {
        console.log(this);//window
},arr1);

2.当map函数内部使用function形式的时候，如果带有thisValue，函数内部的this指向thisValue

var arr = [1,2,3,4,5,6,7,8,9,10];
var arr1 = [2,2,2,2,2,2,2,2,2,2];
var arr2 = arr.map(function(currentValue, index, arr){
        console.log(this);//arr1
},arr1);

5.filter

filter 函数对数组中的每个元素都会执行一次回调函数，如果回调函数返回 true，则将该元素添加到新数组中；如果返回 false，则不添加。这使得 filter 成为一种方便的方法来创建满足特定条件的新数组。

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

callback: 用于测试每个元素的函数。接受三个参数：
element: 当前被处理的元素。
index（可选）: 当前被处理的元素的索引。
array（可选）: 调用 filter 的数组。
thisArg（可选）: 执行 callback 函数时，用于设置 this 的值。

示例

const people = [
    { name: "Alice", age: 25 },
    { name: "Bob", age: 30 },
    { name: "Charlie", age: 20 },
];

const adults = people.filter(person => {
    return person.age >= 25;
});

console.log(adults); // 输出: [{ name: "Alice", age: 25 }, { name: "Bob", age: 30 }]

6.reduce

reduce() 方法对数组中的每个元素执行一个由您提供的reduce函数(依次执行)，将其结果汇总为单个返回值。

语法：arr.reduce( callback , [initialValue] )

 参数一： callback 函数（执行数组中每个值的函数，包含四个参数）：

    prev 必需 （上一次调用回调返回的值，或者是提供的初始值（initialValue））
    cur 必需（数组中当前被处理的元素）
    index 可选 （当前元素在数组中的索引）
    arr 可选 （调用 reduce 的数组）
参数二：initialValue 可选 （表示初始值，作为第一次调用 callback 的第一个参数。）

        提供初始值，cur 从数组第一项开始，若不提供初始值，则 cur 从第二项开始执行，对应的第一次 prev 是数组第一项的值

示例：

//1.不设置初始值
let arr = [1, 2, 3, 4, 5, 6];
let sum = arr.reduce(function (prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
});
console.log('arr:', arr, 'sum:', sum);
//输出
    1 2 1
    3 3 2
    6 4 3
    10 5 4
    15 6 5
    arr: [ 1, 2, 3, 4, 5, 6 ] sum: 21


//2.设置初始值
let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce(function (prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
}, 666) //这里设置了初始值666
console.log("arr:", arr, "sum:", sum);
//输出
    666 1 0
    667 2 1
    669 3 2
    672 4 3
    676 5 4
    arr: [ 1, 2, 3, 4, 5 ] sum: 681

注意：

1.如果没有提供initialValue，reduce 会从索引1的地方开始执行 callback 方法，跳过第一个索引。

如果提供initialValue，从索引0开始。如示例一

2.reduce是一个对数组累积操作的方法，使用时要加上 return 返回累积操作的数据。这样 prev 才能获取上一次执行的结果，否则是 undefined；

3.操作空数组时要给prev，否则报错

7.some

判断数组中是否有至少一个元素符合function中的条件，返回true或false

语法:array.some( function ( item, index, arr) {} , thisValue )
function : 必须,数组中的每个元素都会执行这个函数

        第一个参数:item,必须,当前元素的值

        第二个参数:index,可选,当前元素在数组中的索引值

        第三个参数:arr,当前元素属于的数组对象

thisValue : 可选,对象作为该执行回调时使用，传递给函数，用作 "this" 的值。
如果省略了 thisValue ，"this" 的值为 "undefined"

示例：

const array = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 35 }
];
const targetName = 'Bob';
 
const isObjectValueExist = array.some(obj => obj.name === targetName);
 
console.log(isObjectValueExist); // 输出 true

注意：

如果是空数组，那么some方法默认会返回false

8.every

every() 方法是 JavaScript 数组的一个高阶函数，用于检查数组中的所有元素是否满足指定的条件。它会遍历数组中的每个元素，并对每个元素应用一个回调函数，只有当所有元素都满足条件时，every() 方法才会返回 true，否则返回 false。

语法：array.every(function(currentValue,index,arr), thisValue)

参数说明：
- function：必需，表示对每个元素进行处理的回调函数。
  - currentValue：必需，当前元素的值。
  - index：可选，当前正在处理的元素的索引。
  - arr：可选，调用 every 方法的数组。
- thisValue：可选，执行回调函数时使用的 `this` 值。

示例：

const array = [1, 2, 3, 4, 5];
const allPositive = array.every((element) => element > 0);
console.log(allPositive); // 输出 true

注意：

如果数组为空，则 every() 方法会直接返回 true。另外，如果数组中有一个元素不满足条件，every() 方法会立即停止遍历，并返回 false。