JavaScript遍历数组的方法总结

一、for循环

通过索引遍历数组

ini 复制代码

const arr = [1, 2, 3, 4];
for(let i = 0; i < arr.length; i++){
    console.log(arr[i]);
}

二、forEach()

forEach()是数组的一个方法，允许你对数组的每一项执行回调函数

ini 复制代码

const arr = [1, 2, 3, 4];
arr.forEach(item => console.log(item))；

三、map()

map()方法创建一个新数组，其中每个元素是通过调用通过的函数继续转换的结果

ini 复制代码

const arr = [1, 2, 3, 4];
const newArr = arr.map(item => item*2);
console.log(newArr);
//[2, 4, 6, 8]

四、filter()

filter()方法创建一个新数组，包含所有通过回调函数测试的元素（返回true的元素）

ini 复制代码

const arr = [1, 2, 3, 4];
const sum = arr.filter(item => item % 2 === 0);
//[2, 4]

五、reduce()

reduce()方法对数组中的每个元素执行一个提供的函数，并将结果汇总为单个值

ini 复制代码

const arr = [1, 2, 3, 4];
//0代表的是acc的初始值
const sum = arr.reduce((acc, item) => acc + item, 0);
console.log(sum);
//10
//可以用于展开数组
const arrs = [[1, 2, 3], [4, 5], [6]];
//[]代表acc的初值为空数组；concat()方法将acc和_arr数组合并，返回一个新数组
const flattened = arrs.reduce((acc, _arr) => acc.concat(_arr), [])；
//[1, 2, 3, 4, 5, 6]

六、some()

some()方法测试数组中是否至少一个元素通过的测试函数。若符合一个则返回ture，否则返回false

ini 复制代码

const arr = [1, 2, 3, 4];
const result = arr.some(item => item % 2 === 0);
console.log(result);
//true

七、every()

every()方法测试数组中的所有元素是否都通过了测试的函数。若都符合则返回true，否则返回false

ini 复制代码

const arr = [2, 4, 6, 8];
const result = arr.some(item => item % 2 === 0);
console.log(result);
//true

八、find()

find()方法用于返回满足测试函数中的第一个元素。若没有找到，则返回undefined

ini 复制代码

const arr = [1, 2, 3, 4];
const found = arr.find(item => item > 2);
console.log(found);
//3

九、findIndex()

findIndex()方法用于返回满足测试函数中的第一个元素的索引。没有找到返回undefined

ini 复制代码

const arr = [1, 2, 3, 4];
const index = arr.findIndex(item => item > 2);
console.log(index);
//2

十、for...of

直接遍历数组中的元素

ini 复制代码

const arr = [1, 2, 3, 4];
for(const item of arr)
    console.log(item);

十一、for...in

遍历数组的索引（或对象的属性）

ini 复制代码

const arr = [1, 2, 3, 4];
for(const key in arr)
    console.log(arr[key]);

但这个方法遍历数组可能会导致访问数组的其他属性

ini 复制代码

const arr = [1, 2];
arr.otherItem = 'hello';
for(const key in arr)
    console.log(key, arr[key]);
//0 1
//1 2
//othetItem hello