ES系列 | ES5数组遍历方式

481 阅读3分钟

「这是我参与2022首次更文挑战的第5天,活动详情查看:2022首次更文挑战」。

ES系列文章

ES5数组的遍历方式

  • for循环

  • forEach()

  • map()

  • filter()

  • some()

  • every()

  • reduce()

  • for in

for循环

let list= [1, 2, 3];
for (let i = 0; i < list.lenght; i++){ 
    console.log(list[i]) 
}

forEach():没有返回值,只是针对每个元素调用func

array.forEach(function(elem,index,array)){ }

  • elem必需,表示当前元素
  • index可选,表示当前元素索引值
  • array可选,表示当前元素所属的数组对象
  • 不支持break和cuntinue
  • 不对空数组进行检测
let arr= [1, 2, 3];
array.forEach(function(elem,index,array)){
    if (arr [i] == 2){
        break
        //不支持break和cuntinue
    }
    console.log(elem,index)
}
forEach():循环中途无法跳出

map():返回新的Array,每个元素为调用func的结果

array.map(function(value)){ }

  • map返回值会组成新数组
  • 不改变原有数组值
  • 不对空数组进行检测
let arr= [1, 2, 3];
let result=arr.map(function(value){
    value+=1
    return value 
}) 
console.log(arr,result)
// [1 2 3]     [2 3 4] 

filter():返回符合func条件的元素数组

array.filter(function(value)){ }

  • 返回数组,包含了符合条件的原有元素。如果没有符合条件的元素则返回空数组,有则形成新的数组
  • 不改变原数组
  • 不对空数组进行检测
let arr= [1, 2, 3];
let result=arr.map(function(value){
    return value == 2
}) 
console.log(arr,result)
// [1 2 3]  [2]

some():返回boolean,判断是否有元素是符合func条件

array.some(function()){ }

  • 返回boolean值,数组中如果有一个元素满足条件,返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素,返回false
  • 不会改变原数组
  • 不会对空数组进行检测
let arr= [1, 2, 3];
let result=arr.some(function(value){
    return value==2 
})
console.log(arr,result)
//[1 2 3] true

every():返回boolean,判断每个元素是否符合func条件

array.every(function()){ }

  • 返回boolean值,检测所有元素是否满足条件,有才返回true , 否则返回false
  • 不会改变原数组
  • 不会对空数组进行检测
let arr= [1, 2, 3];
let result=arr.every(function(value){ 
    return value==2
}) 
console.log(arr,result)
//[1 2 3] false

reduce():接收一个函数作为累加器

array.reduce(function(prev,cur,index,array)){}

  1. prev。初始值, 或者计算结束后的返回值
  2. cur。当前元素
  3. index。当前元素的索引
  4. array。当前元素所属的数组对象
  • reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值
  • reduce() 对于空数组是不会执行回调函数的。 场景一:reduce求和
let arr= [1, 2, 3];
let sum=arr.reduce(function(prev,cur,index,array){
    return prev + cur 
},0) 
console.log(sum)
// 6

场景二:reduce求最大值

let arr= [1, 2, 3];
let max=arr.reduce(function(prev,cur){
return Math.max(prev,cur)
})
console.log(max)
// 4

场景三:reduce去重

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

for in

  • 遍历数组的索引
  • 遍历数组时会把原型的属性方法也遍历
Array.prototype.foo=function(){ 
    console.log('foo') 
} 
for(let index in arr){    
    console.log(index,arr[index]) 
}

一个前端小白,若文章有错误内容,欢迎大佬指点讨论!