看完如果再写for循环,我真想捶死你。

带你深入了解循环遍历数组对象。

数组和对象作为一个最基础数据结构，在各种编程语言中都充当着至关重要的角色，你很难想象没有数组和对象的编程语言会是什么模样，特别是 JS ，弱类型语言，非常灵活。本文带你了解常用数组遍历、对象遍历的使用对比以及注意事项-再学不会我真想锤死你

- for循环

for循环：循环条件总比循环体多执行一次

const arr=[1,2,3,4,5]
for(let i=0;i<arr.length;i++){
    console.log(arr[i])
}
输出结果:1,2,3,4,5

- for...in

for..in循环:不建议用在遍历数组上，一般使用于遍历对象，当然数组也是可以使用的

let arr=[1,2,3,4,5]
for(let key in arr ){
     console.log(key)
}
输出结果:0,1,2,3,4

for…in 循环可以拿到数组的 key 值。针对上面的arr数组，拿到的也是key值，这个大家可以通过console.dir(arr) 来验证。

- for...of

for...of循环:使用for of 循环遍历数组，其结果就是打印出数组中的每一个值

let arr=[1,2,3,4,5]
arr.name='小李'
for(let item of arr){
    console.log(item)
}
输出结果:1,2,3,4,5

附加

如果for...of遍历的时候也想要key值或者数组的下标，可以使用arr.keys()

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

- forEach

forEach循环:forEach我们在熟悉不过了,forEach遍历时回调参数有三个，第一个参数是遍历数组的内容，第二个参数是遍历时对应的索引也就是下标，第三个参数是数组本身。

let arr=[1,2,3,4,5]
arr.forEach((item,index,Array)=>{
     console.log(item,index,Array)
})
输出结果:
- 1 0 [1,2,3,4,5]
- 2 1 [1,2,3,4,5]
- 3 2 [1,2,3,4,5]
- 4 3 [1,2,3,4,5]
- 5 4 [1,2,3,4,5]

forEach遍历时要注意的几点👇。

1. forEach遍历空数组时不会执行回调函数
2. 遍历时回调函数传入的三个参数，第一个参数是遍历数组的内容，第二个参数是遍历时对应的索引也就是下标，第三个参数是数组本身。第二个和第三个参数是可选的。
3. forEach遍历的时候不支持continue和break，如果想实现continue效果可以使用return,如果想实现break效果可以选择使用some,every方法

- map

map:遍历后返回一个经过调用后的全新数组,map循环时可接收三个参数,[第一参数]为数组中的每一项，[第二参数]为数组的下标，[第三个参数]为你要遍历的数组本身.

let arr=[1,2,3,4,5]
let newArr=arr.map(item=>{
    return item
})
console.log(newArr)
输出结果:[1,2,3,4,5]

map遍历数组时需要注意的事项👇

1. map遍历循环时不会检测空数组
2. map遍历循环时必须要有return
3. map循环遍历不会修改原数组
4. 同样和forEach是接收三个参数,但是map循环遍历时第二个和第三个参数都是可选的
5. map 循环会针对每一项都进行循环，如果跳过则会返回 undefined，例如

const arr=[1,2,3,4,5]
const newArr=arr.map(item=>{
    if(item>3){
        return item
    }
})
console.log(newArr)
输出结果:[undefined,undefined,undefined,4,5]

- filter

filter循环遍历会返回一个新数组 如果循环遍历中有判断,那么返回的值为符合条件的值。

const arr=[1,2,3,4,5,6]
let newArr=arr.filter(item=>{
    if(item>4){
        return item
    }
})
  console.log(newArr)
  输出结果:[5,6]

filter遍历数组时需要注意的事项👇

1. filter不会对空数组检测
2. 过滤后返回一个新数组,但是不会改变原数组
3. 同样和forEach是接收三个参数,[参数一]为数组的每一项,[参数二]为数组每一项的下标,[第三项]为要遍历的数组本身,但是filter循环遍历时第二个和第三个参数都是可选的

- some

some 循环查找数组中任意符合条件的元素并返回boolean值，当数组中有任意元素符合条件就返回 true 否则返回 fasle

const arr=[1,2,3,4,5]
let flag=arr.some(item=>{
    return item>3
})
console.log(flag)
输出结果:true

some遍历数组时要注意的事项👇

1. some循环遍历会依次执行数组的每一项
2. 如果循环中有一个条件成立则返回true,剩余参数不会执行检测,如果全不成立则返回false
3. some不会对空数组检测
4. some不会改变原数组
5. some 循环接受三个参数,[第一参数]为数组中的每一项,[第二参数]为数组的下标,[第三个参数]为你要遍历的数组本身,第二和第三参数都是可选的.

- every

every 循环查找数组中每一个值，如果数组中的值全部符合判断条件，那么则返回true，有一项不满足条件都返回false

let arr=[1,2,3,4,5]
let flag=arr.every(item=>{
    return item<6
})
console.log(flag)
输出结果:true

every遍历数组时要注意的事项👇

1. every不会对空数组检测
2. 会检测数组中的每一个值
3. 如果循环中有一个条件不成立,则返回false,并且剩余的元素不进行检测,也就是当有一个不成立的同时循环结束
4. every不会改变原数组 5.循环接受三个参数,[第一参数]为数组中的每一项,[第二参数]为数组的下标,[第三个参数]为你要遍历的数组本身,第二和第三参数都是可选的.

- reduce

reduce() 循环接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

const arr = [1, 2, 3];
const res = arr.reduce((total,item,index,arr)=>{
    return total + item;
}, 0)
console.log(res)
输出结果:6

reduce使用时要注意的👇

1. reduce对空数组是不会执行回调函数的
2. 循环时接收一个回调函数和一个初始值
3. 回调函数接受四个参数：[第一参数]为数组中的每一项累加和，[第二参数]为数组的每一项，[第三个参数]为数组的下标，[第四个参数]为你要遍历的数组本身。第三和第四参数都是可选的
4. 初始值为第一次循环累加的值 5.当然reduce 的作用也不单单只作为一个累加器来用，我们还可以利用reduce的特性做其他的用途，比如[数组的去重]