JS数组遍历方法集合

Posted 2020-11-25 东城以东

就让我们在逆战中成长吧,加油武汉，加油自己

1.for循环

使用零时变量将长度存起来，当数组较大时优化效果才会比较明显。

var ar1=[2,4,6,8]
for(var i=0;i<ar1.length;i++){
    console.log(i)
　　console.log(ar1[i])
}

2.foreach循环

遍历数组中每个数，没有返回值

使用break不能中断循环，使用return也不能返回到外层函数

 

var ar1=[2,4,6,8]
ar1.foreach((item,index,arr){
    //第一个参数代表当前元素
    //第二个参数代表当前元素下标
    //第三个参数代表原数组
})
//数组中长度多少就循环多少次

3.for-of循环

运行循环获得键值

var ar1=[2,4,6,8]
for(var i of ar1){
    console.log(i)
    //2,4,6,8
}

for-of可用使用break，continue 和 return 配合使用，跳出循环

for(var i of ar1){
    if(i==4){
        break
    }
    console.log(i)//2
}

对于普通对象直接遍历的话是会报错的 obj is not iterable

for-of循环不支持普通对象，但如果你想迭代一个对象的属性，你可以用for-in循环（这也是它的本职工作）或内建的Object.keys()方法：

可以使用 Object.keys(obj) 方法将对象的键名生成一个数组，然后遍历这个数组

var obj={
        "naem":"张三",
        "age":18
    }
    for(var i of Object.keys(obj)){
        console.log(i+":"+obj[i])
        //name:张三  age:18
    }

4.for-in

只能获得对象的键名，不能获得键值

var obj={
        "naem":"张三",
        "age":18
    }
for(var i in obj){
        console.log(i)
        //name
        //age
    }   

for...in 循环不仅遍历数字键名，还会遍历手动添加的其它键，甚至包括原型链上的键。for...of 则不会这样

let arr = [1, 2, 3]
arr.set = ‘hello‘  // 手动添加的键
Array.prototype.name = ‘word‘  // 原型链上的键
 
for(var i in arr) {
  console.log(i)
//0
//1
//2
//set
//name
}

for-in是为遍历对象而设计的，不适用于遍历数组。(遍历数组的缺点：数组的下标index值是数字，for-in遍历的index值"0","1","2"等是字符串)

5.map

不会改变原数组，有返回值可用return，成为一个新数组（只是相当于把原数组克隆一份，把克隆的这一份的数组中的对应项改变了）

var ar1=[2,4,6,8,12]
var map1=ar1.map((item)=>{
    if(item==6){
        return item*2
    }
})
console.log(map1)
//[undefined, undefined, 12, undefined, undefined]

之所以会出现undefined，是因为map()方法创建了一个新数组，但新数组并不是在遍历完array1后才被赋值的

下面这样写才是正确的

var map1=ar1.map((item)=>{
    if(item == 6){
        return item * 2
    }
    return item
})
console.log(map1)
//[2，4,12,8,12]

5.filter

不会对原数组进行修改 返回新数组

 

 var filt=ar1.filter((item,index)=>{
     //返回索引大于2的元素组成新的数组
    if(index>2){
        return item
    }
 })
 console.log(filt)
 //[8,12]

 

6.reduce

reduce()作为一个循环使用。接收四个参数：初始值（上一次返回值），当前元素值，当前元素下标，原数组。

var a=[4,5,6,7,8]
//item代表一次回调的值 初始值为0
//cart代表当前元素的值
//index当前下标
//arr原数组
var num=a.reduce((item,cart,index,arr)=>{
    return item+=cart
},0)
//初始值为0

console.log(num) //输出为30

7.some

every()与some()方法都是JS中数组的迭代方法。

some()是对数组中每一项运行给定函数，如果该函数满足任一项返回true，则返回flase

var a=[1,2,4,69,56,89]
var some1=a.some((item)=>{
return item > 50
})
console.log(some1)//true

8.every()

every()与some()方法都是JS中数组的迭代方法。

every()是对数组中每一项运行给定函数，如果该函数所有项返回true,则返回true。一旦有一项不满足则返回flase

var a=[1,2,4,69,56,89]
var some1=a.every((item)=>{
return item > 50
})
console.log(some1)//flase