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
相关推荐
独立开阀者_FwtCoder11 分钟前
放弃 JSON.parse(JSON.stringify()) 吧!试试现代深拷贝!
前端·javascript·github
张晓~183399481211 小时前
数字人源码部署流程分享--- PC+小程序融合方案
javascript·小程序·矩阵·aigc·文心一言·html5
爱喝水的小周1 小时前
AJAX vs axios vs fetch
前端·javascript·ajax
Jinxiansen02111 小时前
unplugin-vue-components 最佳实践手册
前端·javascript·vue.js
几道之旅1 小时前
介绍electron
前端·javascript·electron
轻语呢喃2 小时前
React智能前端:从零开始的识图学单词项目(一)
javascript·react.js·aigc
断竿散人2 小时前
JavaScript 异常捕获完全指南(下):前端框架与生产监控实战
前端·javascript·前端框架
LRH2 小时前
JS基础 - 基于 Generator + Promise 实现 async/await 原理
前端·javascript
自由逐风2 小时前
前端小数点精度问题解析
javascript
断竿散人2 小时前
JavaScript 异常捕获完全指南(上):从同步异步到 Promise 错误处理
前端·javascript·promise