JS数组遍历方法集合

Posted 东城以东

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS数组遍历方法集合相关的知识,希望对你有一定的参考价值。

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

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

 

以上是关于JS数组遍历方法集合的主要内容,如果未能解决你的问题,请参考以下文章

JS数组遍历方法集合

浅谈JS的数组遍历方法

JS数组与对象的遍历方法大全

JS数组与对象的遍历方法大全

JS数组与对象的遍历方法大全

java中把json怎么转换成数组