JavaScript中几种数组遍历的方式

学习JavaScript总结了一下集中数组遍历的方式
更多学习参考菜鸟教程

---

前言

学习js记录一下几种数组遍历的方式

---

提示：以下是本篇文章正文内容，下面案例仅供参考

一、普通for循环遍历

for (let i = 0; i < arr.length; i++) {
    console.log(arr[i])
}

二、ES5和ES6中的其他方式

1.forEach

代码如下（示例）：

let objArr = [
    { name: '123', age: 1 },
    { name: '456', age: 2 },
    { name: '789', age: 3 }
]
let arr = [1, 2, 3, 4]
arr.forEach(function(currentValue, index, arr) {
    currentValue += 5 //输出：[1,2,3,4]
    arr[index] += 5 //输出：[6,7,8,9]
})
objArr.forEach(function(currentValue, index, arr) {
    currentValue.name = '改变了'
    currentValue.age += 5
})
console.log(objArr)

forEach接受一个函数作为参数，函数有3个参数
第一个：当前项的值
第二个：当前项的索引
第三个：当前操作的数组对象
注意：若数组内的元素是引用类型时操作第一个参数可以改变原有数组内容
若数组内的元素时基本数据类型时操作第一个参数无法改变原有内容
forEach中无法使用break和continue关键字

2.map()

代码如下（示例）：

let arr = [1, 2, 3, 4]
let newArr = arr.map(function(currentValue, index, arr) {
    currentValue *= 5
    return currentValue
})
console.log(arr) //[1, 2, 3, 4]
console.log(newArr) //[5, 10, 15, 20]

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。
map() 方法不会改变原有数组。
map() 不会对空数组进行检测。
map() 不会改变原始数组。

3.filter()

代码如下（示例）：

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
let newArr = arr.filter(function(currentValue, index, arr) {
    return currentValue % 2 == 0 //该条件为true则会返回当前元素
})
console.log(newArr) //[2, 4, 6, 8, 10, 12, 14]

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
filter() 不会改变原始数组。

4.some()

代码如下（示例）：

//不会改变当前数组
let arr = [1, 2, 3, 4, 5, 6]
let res = arr.some(function(currentValue, index, arr) {
    return currentValue % 2 == 0 //只要有一个元素使得该条件成立则会返回true,否则false
})
console.log(res) //true

5.every()

代码如下（示例）：

//不会改变当前数组
 let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
 let res = arr.every(function(currentValue, index, arr) {
     return currentValue % 2 == 0 //每一项都使得条件成立会返回true
 })
 console.log(res) //false

6.for in

代码如下（示例）：

 let arr = [1, 2, 3, 4, 5, 6]
 for (let index in arr) {
     console.log(index, arr[index])
 }
 Array.prototype.fun = function() {
     console.log('这是自定义的方法')
 }
 for (let index in arr) {
     console.log(index, arr[index])
 }

for in 可以对于数组的遍历是不太适合的，他会把我们通过prototype加进去的自定义方法也遍历出来

7.find()

代码如下（示例）：

let arr = [1, 2, 3, 4, 5, 6]
let res = arr.find(function(currentValue, index, arr) {
    return currentValue % 2 == 0 //如果这一项条件满足则会返回当前项
})
console.log(arr, res) //[1, 2, 3, 4, 5, 6] 2

find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。
find() 方法为数组中的每个元素都调用一次函数执行：
当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
如果没有符合条件的元素返回 undefined
不会改变数组的原始值。

8.findIndex()

代码如下（示例）：

let arr = [1, 2, 3, 4, 5, 6]
let res = arr.findIndex(function(currentValue, index, arr) {
    return currentValue % 2 == 0 
    //如果这一项条件满足则会返回当前项的索引值
})
console.log(arr, res) //[1, 2, 3, 4, 5, 6] 1

findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。
findIndex() 方法为数组中的每个元素都调用一次函数执行：
当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。
如果没有符合条件的元素返回 -1
并不会改变数组的原始值。

9.for of

代码如下（示例）：

 let arr = [1, 2, 3, 4, 5, 6]
 for (let item of arr) {
     console.log(item)
 } //1 2 3 4 5 6

 for (let item of arr.values()) {
     console.log(item)
 } //1 2 3 4 5 6

//获取索引
 for (let index of arr.keys()) {
     console.log(index)
 } //0 1 2 3 4 5

//获取索引和值
 for (let [index, item] of arr.entries()) {
     console.log(index, item)
 }

10.reduce()

代码如下（示例）：

 //求和
let arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
let res = arr1.reduce(function(total, currentValue, currentIndex, arr) {
    return total += currentValue
})
console.log(res) //55

//去重
let arr2 = [1, 2, 2, 3, 3, 6, 7, 8, 8, 10]
let newArr = arr2.reduce(function(total, currentValue, currentIndex, arr) {
    total.indexOf(currentValue) == -1 && total.push(currentValue)
    return total
}, [])
console.log(newArr) //[1, 2, 3, 6, 7, 8, 10]

参数：function(total,currentValue, index,arr)，initialValue
total 初始值, 或者计算结束后的返回值。
currentValue 当前元素
currentIndex 当前元素的索引
arr 可选 当前元素所属的数组对象。
initialValue 可选 传递给函数的初始值

总结

不同的遍历有着不同的功能，利用这些方法可以帮助我们在开发过程简化很多操作，多加练习吧