js中常用的循环遍历方法

 

let arr1 = [1, 2, 3, 4, 3, 2,-10]

for

for (let index = 0; index < arr1.length; index++) {
    if(arr1[index] === 4) 
    // continue // -5, 2, 3, 4, 3, 2, -10
    break  // -5, 2, 3
    console.log(arr1[index])
}

fo...of

for(item of arr1){
    if(item === 4)
    break // -5, 2, 3
    // continue  // -5, 2, 3, 4, 3, 2, -10
    console.log(item)
}

for 和 for ...of 可以使用 break 或者 continue 跳过或中断

forEach

arr1.forEach((item,i,arr)=>{
    console.log(item) // -5, 2, 3, 4, 3, 2, -10
    console.log(i) // 0, 1, 2, 3, 4, 5, 6
})

forEach 无法跳出循环

map

let newArr = arr1.map((item,inex) => {
    if(item === 3){
        return item = 100
    }
    return item
})
console.log(newArr)  // [-5, 2, 100, 4, 100, 2, -10]

map方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

filter

let arr2 = [ 
    { name: 'aaa', age: 10 },
    { name: 'bbb', age: 20 },
    { name: 'ccc', age: 10 },
    { name: 'ddd', age: 30 },
    { name: 'eee', age: 10 },
]
let result = arr2.filter(item => item.age == 10 )
console.log(result) 
// [{ name: 'aaa', age: 10 }, { name: 'ccc', age: 10 }, { name: 'eee', age: 10 }]

filter 会将符合回调函数条件的元素组成一个新数组。

some,every

let result1 = arr1.some((item) => item == 4) // true
let result2 = arr1.every((item) => item == 4) // false

二者都是用来做数组条件判断的，都是返回一个布尔值。

some 若某一元素满足条件，返回 true。所有元素不满足条件，返回 false。

every 与 some 相反，若有一元素不满足条件，返回 false。所有元素满足条件，返回 true。

find,findIndex

let arr2 = [ 
    { name: 'aaa', age: 10 },
    { name: 'bbb', age: 20 },
    { name: 'ccc', age: 10 },
    { name: 'ddd', age: 30 }
]

let result3 = arr2.find((item)=> item.age === 10)
// { name: 'aaa', age: 10 }
let result4 = arr2.findIndex((item)=> item.age === 20)
// 1

find返回符合条件的第一个元素，findIndex返回符合条件的第一个索引

reduce

// 累加器
let arr = [1, 3, 10, -5, 8]
let result = arr.reduce((cur,item)=>{
    return cur + item
},0)
console.log(result) // 17

//取最大值
let result6 = arr.reduce((cur,item)=>{
    return cur > item ? cur : item
}) //10

//取最小值
let result7 = arr.reduce((cur,item)=>{
    return cur < item ? cur : item
}) //-5

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

reduce 方法接收两个参数，第一个参数是回调函数（callback） ，第二个参数是初始值（initialValue）。

total:必需。初始值, 或者计算结束后的返回值。

currentValue:必需。当前元素。

currentIndex:可选。当前元素的索引。

arr:可选。当前元素所属的数组对象。

initialValue:可选。传递给函数的初始值。

for...in

let obj1 = {
    a:'111',b:'222',c:'333'
}

for(item in obj1){
    console.log(item) // a b c
}

可用于循环遍历对象的属性