ES5|数组的各种遍历方式

本文深入探讨ES5中数组的多种遍历方法,包括for循环、forEach、map、filter、some、every、reduce和for...in。每种方法的特点、参数及应用场景均有详细解析,帮助读者掌握高效的数据处理技巧。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

之后所有例子都使用以下这个数组:

let arr=[1,2,3,2,4]

for循环

//for
for(let i=0;i<arr.length;i++){
     console.log(arr[i])
}
1 2 3 2 4

forEach()

array.forEach(function(elem,index,array), thisValue)
*elem必需,表当前元素
*index可选,表当前元素索引值
*array可选,表当前元素所属的数组对象
*thisValue可选。传递给函数的值一般用 “this” 值。如果这个参数为空, “undefined” 会传递给 “this” 值

*不支持continue和break
*无返回值 数组每一项执行function 但不改变原来数组
*不对空数组进行检测

//forEach()
arr.forEach(function(elem,index,array){
    elem+=1
    console.log(elem,index,array)
})
console.log(arr)
2 0  [1, 2, 3, 2, 4]
3 1  [1, 2, 3, 2, 4]
4 2  [1, 2, 3, 2, 4]
3 3  [1, 2, 3, 2, 4]
5 4  [1, 2, 3, 2, 4]
[1, 2, 3, 2, 4]

map()

array.map(function(elem,index,array), thisValue)
*elem必需,表当前元素
*index可选,表当前元素索引值
*array可选,表当前元素所属的数组对象
*thisValue可选,对象作为该执行回调时使用,传递给函数,用作 “this” 的值。如果省略了 thisValue,或者传入 null、undefined,那么回调函数的 this 为全局对象。

*返回新的Array,即每个元素调用function的结果
*不改变原来数组
*不对空数组进行检测

//map()
let result=arr.map(function(value){
    value+=1
    return value
})
console.log(arr,result)
 [1, 2, 3, 2, 4]  [2, 3, 4, 3, 5]

filter()

array.filter(function(elem,index,array), thisValue)
*elem必需,表当前元素
*index可选,表当前元素索引值
*array可选,表当前元素所属的数组对象
*thisValue可选。传递给函数的值一般用 “this” 值。如果这个参数为空, “undefined” 会传递给 “this” 值

*返回数组,包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组
*不改变原数组
*不对空数组进行检测

//filter()
let result=arr.filter(function(value){
    return value == 2
})
console.log(arr,result)
 [1, 2, 3, 2, 4]  [2, 2]

some()

array.some(function(currentValue,index,arr),thisValue)
*elem必需,表当前元素
*index可选,表当前元素索引值
*array可选,表当前元素所属的数组对象
*thisValue可选。传递给函数的值一般用 “this” 值。如果这个参数为空, “undefined” 会传递给 “this” 值

*返回boolean值,如果有一个元素满足条件,返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素,返回false
*不会改变原数组
*不会对空数组进行检测

//some()
let result=arr.some(function(value){
    return value==2
})
console.log(arr,result)
[1, 2, 3, 2, 4] true

every()

array.every(function(currentValue,index,arr), thisValue)
*elem必需,表当前元素
*index可选,表当前元素索引值
*array可选,表当前元素所属的数组对象
*thisValue可选。传递给函数的值一般用 “this” 值。如果这个参数为空, “undefined” 会传递给 “this” 值

*返回boolean值,所有元素满足条件,才返回true , 否则返回false
*不会改变原数组
*不会对空数组进行检测

//every()
let result=arr.every(function(value){
    return value==2
})
console.log(arr,result)
 [1, 2, 3, 2, 4] false

reduce()

array.reduce(function(prev,cur,index,array), initialValue)
*prev必需。初始值, 或者计算结束后的返回值
*cur必需。当前元素
*index可选。当前元素的索引
*array可选。当前元素所属的数组对象
*initialValue。可选。传递给函数的初始值

*reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值
*reduce() 对于空数组是不会执行回调函数的。

应用场景一:reduce计算和

//reduce计算和
let sum=arr.reduce(function(prev,cur,index,array){
    return prev+cur
},0)
console.log(sum)
12

应用场景二:reduce求最大值

//reduce求最大值
let max=arr.reduce(function(prev,cur){
    return Math.max(prev,cur)
})
console.log(max)
4

应用场景三:reduce去重

//reduce去重
let res=arr.reduce(function(prev,cur){
    prev.indexOf(cur)==-1 && prev.push(cur)
    return prev
},[])
console.log(res)
[1, 2, 3, 4]

for in

*遍历数组的索引
*遍历数组时会把原型的属性方法也遍历

//for in
Array.prototype.foo=function(){
    console.log('foo')
}
Array.prototype.a='123'
for(let index in arr){
    console.log(index,arr[index])
}
0 1
1 2
2 3
3 2
4 4
foo ƒ () {
  console.log('foo');
}
a 123
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值