js遍历数组的10种方法

8,233 阅读5分钟

1.for循环

for循环和while循环(下一段中)基本在各种语言中都存在,遍历数组最基本的方法,在此只作简单说明

const arr = [0, 1, 2, 3, 4, 5, 6, 7]//声明一个数组,由于const的缘由,arr指向的数组地址不可改变,但地址内容可以改变,即数组中的值可以改变
for (let i = 0; i < arr.length; i++) {
    if (i === 2) continue
    if (i === 5) break
    arr[i]++
}
console.log(arr)
//现输出:[1, 2, 2, 4, 5, 5, 6, 7]
//原数组:[0, 1, 2, 3, 4, 5, 6, 7]
//对比知,当arr[2]被跳过了,于是arr[2] = 2,没有加1
//当i = 5时,arr[5] = 5,且由于break跳出循环,后面的元素均未加1

由此看来,for中可以使用continuebreak,且能改变原数组的值(显而易见,循环中直接取的arr数组)

2.while循环

const arr = [0, 1, 2, 3, 4, 5, 6, 7]
let index = -1
while (index < arr.length) { //while循环
    index++
    if (index === 2) continue
    if (index === 5) break
    arr[index]++
    //index++  不能将此语句放在这里,否则循环会卡在index = 2一直continue,所以放在while后面,这也是index被初始值为-1的原因   
}
console.log(arr);
//现输出:[1, 2, 2, 4, 5, 5, 6, 7]
//原数组:[0, 1, 2, 3, 4, 5, 6, 7]
//对比知,当arr[2]被跳过了,于是arr[2] = 2,没有加1
//当i = 5时,arr[5] = 5,且由于break跳出循环,后面的元素均未加1

for的输出一模一样,其实就是利用while循环还原了for循环,当然while还有其他妙用,比如while(true),在此不加讨论,这里主要说明while在此的作用和功能和for一样

3.forEach()方法

此方法比较简洁,不过缺点比较明显,只能将数组的元素全部遍历,不支持breakcontinue,该函数返回值为undefined

const arr = [0, 1, 2, 3, 4, 5, 6, 7]
arr.forEach((value, index, arr2) => {
    //if (index == 2) continue 报错:SyntaxError: Illegal continue statement: no surrounding iteration statement
    //if (index == 5) break    报错:SyntaxError: Illegal break statement
    value++
    arr2[index] += 10
})
console.log(arr);
//现输出:[10, 11, 12, 13, 14, 15, 16, 17]
//原数组:[0 , 1 , 2 , 3 , 4 , 5 , 6 , 7]

由输出结果知,value++不能改变原数组中的值,由此可知value只是被原数组赋值了,独占另一块内存,而arr2则是和arr指向同一块地址

多学一点,该方法完整参数:

Array.prototype.forEach(function(value, index, arr), thisValue)

详解传送门

4.every()方法

该方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。如果所有元素都通过检测返回 true,否则返回 false。参数和forEach()一致,也不能使用breakcontinue,但可以实现他们的功能,在方法体内return false 等同于breakreturn true 等同于 continue, 如果不写return语句, 默认是 return false

const arr = [0, 1, 2, 3, 4, 5, 6, 7]
let a = arr.every((value, index, arr2) => {
    //if (index == 2) continue //报错:SyntaxError: Illegal continue statement: no surrounding iteration statement
    //if (index == 5) break    报错:SyntaxError: Illegal break statement
    if (index == 2) return true //实现continue功能
    if (index == 5) return false //实现实现break功能
    value++
    arr2[index] += 10
    return true //不可省略,否则默认为return false,相当于break
}, )
console.log(arr);
console.log(a);//false
//现输出:[10, 11,  2, 13, 14, 15, 16, 17]
//原数组:[0 , 1 , 2 , 3 , 4 , 5 , 6 , 7]

由输出可见,和forEach()一样,value++不影响原数组的值,只要该函数有一个return false起作用了,函数返回值就为false,由此可见此方法主要用于判断数组内元素是否全部符合某个条件,而上诉代码只是用于区别与其他遍历数组方法。

主要用途

const arr = [0, 1, 2, 3, 4, 5, 6, 7]
let a = arr.every((value) => value > -1)//判断数组元素是否都大于-1
console.log(a);//true

(箭头函数中,当函数体只有一条语句时,可省略{},并且会返回该语句)

5.some()方法

arr.some(callback(element[, index[, array]])[, thisArg]),和every()做对比,由名字就知道该方法只要数组中存在某一个符合条件的就返回true,全部不符合条件则返回false由于功能上的不同,有不一样的规则,在方法体内return false 等同于continuereturn true 等同于 break, 如果不写return语句, 默认是 return true(***注意:***完全和every()相反,因为当some()没有找到符合的元素时需要继续往下面找,而every()遇到不符合的元素就直接停止了,some()遇到符合的元素直接停止)

主要用途:

const arr = [0, 1, 2, 3, 4, 5, 6, 7]
let a = arr.every((value) => value > 6)//判断数组是否存在一个元素大于6
console.log(a);//true

6.filter()方法

见名知意,过滤数组,返回值为一个新数组,由原数组中符合条件的元素组成

const arr = [0, 1, 2, 3, 4, 5, 6, 7]
let newArr = arr.filter((value) => value > 3) //判断数组元素是否大于3
console.log(newArr); //[ 4, 5, 6, 7 ]

若无符合条件的数组则返回空数组

7.map()方法

对每一个数组元素应用函数,并返回一个新的数组

const arr = [0, 1, 2, 3, 4, 5, 6, 7]
let newArr = arr.map((value) => value * 2) //将数组中每一个元素都乘以2
console.log(newArr); //[0,  2,  4,  6, 8, 10, 12, 14]

8.reduce()方法

遍历数组全部元素,将函数处返回的数字累加到一起,并返回这个累加结果,可初始化一个值

const arr = [0, 1, 2, 3, 4, 5, 6, 7]
let sum = arr.reduce((accumulator,currentValue) => { //accumulator为每次迭代后的累计值,currentValue为每次迭代时从arr传来的元素值
    return currentValue * 2 + accumulator
},100) //将数组中每一个元素都乘以2累加并加上初始值100
console.log(sum); //156

9.for...in语句

本质上该方法用来迭代对象,由于数组是特殊的对象,也可以进行迭代,但不推荐,于是这里不举例说明,本文主要用于区分数组的不同遍历方法,于是这里打开了此方法的传送门

10.for...of语句

此语句支持returnbreak

const arr = [0, 1, 2, 3, 4, 5, 6, 7]
for (let item of arr) {
    //item++ 并不会影响原数组
    if (item === 2) continue //支持
    if (item === 5) break //支持
    arr[item]++ //改变原数组
}
console.log(arr);

该语句遍历数组只是用途之一,还可遍历多种可迭代对象,传送门

创作不易,点个赞呗