1. for 循环

for (let i = 0; i < arr.length; i++) {console.log(arr[i]);
}
// i ：当前元素的索引
// 0 ：遍历初始位置(索引)
// arr ：遍历的数组
// i < arr.length ：遍历的条件,满足该条件执行遍历,否则结束
// i++ ：每执行一次后执行的代码
// 耗时 1.61 ms
let ary = []
for (let i = 1; i <= 1000000; i++) {ary.push(i)
}
console.time()
for (let i = 1; i < ary.length; i++) {}
console.timeEnd()

2. for of

for (let item of arr) {console.log(item);
}
// item : 当前元素的值
// arr ：遍历的数组
// 耗时 15.77 ms
let ary = []
for (let i = 1; i <= 1000000; i++) {ary.push(i)
}
console.time()
for (let item of ary) {}
console.timeEnd()

3. for in

for (let item in arr) {console.log(item);console.log(arr[item]);
}
// item ：当前元素索引
// arr ：遍历的数组
// arr[item] ：当前元素的值
// 耗时 147.97 ms
let ary = []
for (let i = 1; i <= 1000000; i++) {ary.push(i)
}
console.time()
for (let item in ary) {}
console.timeEnd()

4. forEach

arr.forEach((item, index, arr) => {console.log(item);console.log(index);console.log(arr);
})
// item ：必须，当前元素的值
// index ：可选，当前元素的索引
// arr ：可选，遍历的数组，当前元素所属的数组对象
// 耗时 12.29 ms
let ary = []
for (let i = 1; i <= 1000000; i++) {ary.push(i)
}
console.time()
ary.forEach((item) => {})
console.timeEnd()

5. every

不改变原数组
有返回值，如果数组中所有元素都通过测试，则返回 true ，否则返回 false 且不再往后执行

arr.every((item, index, arr) => item, this)
// item ：必须，当前元素的值
// index ：可选，当前元素的索引
// arr ：可选，遍历的数组，当前元素所属的数组对象
// this ：可选，传递给函数用作 "this" 值的值，如果为空，则"undefined"将作为其"this"值传递
// 耗时 10.39 ms
let ary = []
for (let i = 1; i <= 1000000; i++) {ary.push(i)
}
console.time()
ary.every((item, index, arr) => item, this)
console.timeEnd()

6. filter

不会改变原数组。
返回值是数组，通过测试的数组元素组成的新数组，没有通过的元素，返回空数组

arr.filter((item, index, arr) => {console.log(item);console.log(index);console.log(arr);return item === "c"
}, this)
// item ：必须，当前元素的值
// index ：可选，当前元素的索引
// arr ：可选，遍历的数组，当前元素所属的数组对象
// this ：可选，传递给函数用作 "this" 值的值，如果为空，则"undefined"将作为其"this"值传递
// 耗时 11.73 ms
let ary = []
for (let i = 1; i <= 1000000; i++) {ary.push(i)
}
console.time()
ary.filter((item, index, arr) => {}, this)
console.timeEnd()

7. map

不改变原数组
返回值是数组，包含原始数据中的每个元素调用提供的函数的结果

arr.map((item, index, arr) => {console.log(item);console.log(index);console.log(arr);return item === "a"
})
// item ：必须，当前元素的值
// index ：可选，当前元素的索引
// arr ：可选，遍历的数组，当前元素所属的数组对象
// 耗时 15.67 ms
let ary = []
for (let i = 1; i <= 1000000; i++) {ary.push(i)
}
console.time()
ary.map((item, index, arr) => {})
console.timeEnd()

8. reduce

reduce() 方法将数组缩减为单个值
函数等返回值存储在累加器中
不会改变原数组
返回值返回上次调用回调函数的累积结果

 arr.reduce((tot, item, index, arr) => {console.log(tot);console.log(item);console.log(index);console.log(arr);return tot += item
})
// tot ： 必须，initialValue ，或函数先前返回的值
// item ：必须，当前元素的值
// index ：可选，当前元素的索引
// arr ：可选，遍历的数组，当前元素所属的数组对象
// this ：可选，传递给函数用作 "this" 值的值，如果为空，则"undefined"将作为其"this"值传递
// 耗时 10.96 ms
let ary = []
for (let i = 1; i <= 1000000; i++) {ary.push(1)
}
console.time()
ary.reduce((tot, item, index, arr) => {return tot += item
})
console.timeEnd()

9. some

不改变原数组
数组中存在元素通过测试则返回true，且不再继续执行，否则返回false

arr.some((item, index, arr) => {console.log(item);console.log(index);console.log(arr);return item === "c"
},this)
// item ：必须，当前元素的值
// index ：可选，当前元素的索引
// arr ：可选，遍历的数组，当前元素所属的数组对象
// this ：可选，传递给函数用作 "this" 值的值，如果为空，则"undefined"将作为其"this"值传递
// 耗时 10.24 ms
let ary = []
for (let i = 1; i <= 1000000; i++) {ary.push(false)
}
console.time()
ary.some((item, index, arr) => {})
console.timeEnd()

如有错误，欢迎指正，谢谢！
以上内容仅供参考，欢迎大家讨论。

关于 js 数组遍历的几种方式相关推荐

JS数组遍历的几种方式
JS数组遍历的几种方式 JS数组遍历,基本就是for,forin,foreach,forof,map等等一些方法,以下介绍几种本文分析用到的数组遍历方式以及进行性能分析对比第一种:普通for循环代 ...
html遍历数组,JS数组遍历的几种方式
JS数组遍历,基本就是for,forin,foreach,forof,map等等一些方法,以下介绍几种本文分析用到的数组遍历方式以及进行性能分析对比第一种:普通for循环代码如下: for(j = ...
【C语言】二维数组遍历的3种方式
#include <math.h> #include <stdio.h> #include <stdlib.h>#define ROW 2 #define COL ...
php中数组遍历的四种方式
首先要讲一点的是:PHP中的数组与C/C++中的数组不同. 它是基于键值对结构的hash表来实现的(存在key/value的概念).有点类似于python和lua中的dictionary. 在没有显示 ...
java中数组遍历的三种方式
使用显示数组 for,for-each,和toString 题目描述 1.for循环遍历程序: 运行结果: 2.foreach语句遍历语法格式: 注: 运行结果: 程序: 运行结果: 3.Arra ...
js数组去重的四种方式
// 删除重复的 function only(arr){for(var i=0;i<arr.length;i++){for(var j = i+1;j<arr.length;j++){if ...
js数组添加元素的几种方式
方法一:在数组开头添加元素在数组开头添加元素可以通过数组名.push()方法来实现,该方法可以接受任意数量的参数逐个添加到数组末尾,并返回修改后数组的长度,改变了原来的数组. var arr=[2 ...
JS数组添加元素的三种方式
1.push() 结尾添加 arrayObject.push(newelement1,newelement2,....,newelementX) 参数描述 newelement1 必需.要添加到数组 ...
【Vue】JS数组添加元素的三种方式
1.push() 结尾添加数组.push(元素) 参数描述 newelement1 必需.要添加到数组的第一个元素. newelement2 可选.要添加到数组的第二个元素. newelement ...

关于 js 数组遍历的几种方式