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
相关推荐
伍哥的传说2 小时前
Radash.js 现代化JavaScript实用工具库详解 – 轻量级Lodash替代方案
开发语言·javascript·ecmascript·tree-shaking·radash.js·debounce·throttle
前端程序媛-Tian2 小时前
【dropdown组件填坑指南】—怎么实现下拉框的位置计算
前端·javascript·vue
iamlujingtao3 小时前
js多边形算法:获取多边形中心点,且必定在多边形内部
javascript·算法
嘉琪0013 小时前
实现视频实时马赛克
linux·前端·javascript
爱分享的程序员3 小时前
前端面试专栏-前沿技术:30.跨端开发技术(React Native、Flutter)
前端·javascript·面试
超级土豆粉3 小时前
Taro 位置相关 API 介绍
前端·javascript·react.js·taro
草履虫建模4 小时前
RuoYi-Vue 项目 Docker 容器化部署 + DockerHub 上传全流程
java·前端·javascript·vue.js·spring boot·docker·dockerhub
阿丽塔~5 小时前
【vue3+vue-pdf-embed】实现PDF+图片预览
javascript·vue.js·pdf
zhuà!7 小时前
taro+react重新给userInfo赋值后,获取的用户信息还是老用户信息
javascript·react.js·taro
超浪的晨7 小时前
JavaWeb 入门:JavaScript 基础与实战详解(Java 开发者视角)
java·开发语言·前端·javascript·后端·学习·个人开发