JS数组循环遍历常用的9种方法

JavaScript027

JS数组循环遍历常用的9种方法,第1张

首先定义一个数组

const arr = [1,2,3,4,5,6]

第一种:for循环

for (let i = 0i<arr.lengthi++){

   console.log(arr[i])

}

for(j=0,len=arr.lengthj<lenj++){}//这种方法基本上是所有循环遍历方法中性能最高的一种

第二种 for of (需要ES6支持) 性能要好于forin,但仍然比不上普通for循环

for (let value of arr){

       console.log(value)

}

第三种 for in 它的效率是最低的

for (let i in arr){

      console.log(arr[i])

 }

第四种 foreach() 实际上性能比普通for循环弱

    1、箭头函数写法

    arr.forEach(value =>{

        console.log(value)

    })

    2、普通函数写法

    arr.forEach(function(value){

       console.log(value)

     })

第五种 entries()

for (let [index, value] of arr.entries()) {

     console.log(value)

 }

第六种 keys()

for (let inx of arr.keys()){

console.log(arr[inx])

}

第七种 reduce()

1、箭头函数

arr.reduce((pre,cur)=>{

       console.log(cur)

 })

2、普通函数

arr.reduce(function(pre,cur){

     console.log(cur)

})

第八种 map() 但实际效率还比不上foreach

1、箭头函数

 arr.map(value=>{

       console.log(value)

 })

2、普通函数

arr.map(function(value){

      console.log(value)

})

第九种 values()

for (let value of arr.values()){

       console.log(value)

 }

forEach本质上是不可终止的,如果非要终止的话建议使用其他循环方法。不要强行使用forEach,避免出现不必要的bug。但如果一定要终止forEach可以参考以下方法

1.使用try catch 抛出错误达到终止循环的效果

2.因为forEach有遇到空数组不会执行回调函数的特性,所以还可以在循环途中将数组置空达到终止循环的目的

对数组的遍历大家最常用的就是for循环,ES5的话也可以使用forEach,ES5具有遍历数组功能的还有map、filter、some、every、reduce、reduceRight等,只不过他们的返回结果不一样。但是使用foreach遍历数组的话,使用break不能中断循环,使用return也不能返回到外层函数。

那么接下来我们一起看一下for in 和for of 的区别吧。

##### for in

看一个简单的例子

```

//for in 应用于数组

Array.prototype.sayHello = function(){

    console.log("Hello")

}

Array.prototype.str = 'world'

var myArray = [1,2,10,30,100]

myArray.name='数组'

for(let index in myArray){

    console.log(index)

}

//输出结果如下

0,1,2,3,4,name,str,sayHello

//for in  应用于对象中

Object.prototype.sayHello = function(){

    console.log('Hello')

}

Obeject.prototype.str = 'World'

var myObject = {name:'zhangsan',age:100}

for(let index in myObject){

    console.log(index)

}

//输出结果

name,age,str,sayHello

//首先输出的是对象的属性名,再是对象原型中的属性和方法,

//如果不想让其输出原型中的属性和方法,可以使用hasOwnProperty方法进行过滤

for(let index in myObject){

    if(myObject.hasOwnProperty(index)){

        console.log(index)

    }

}

//输出结果为

name,age

//你也可以用Object.keys()方法获取所有的自身可枚举属性组成的数组。

Object.keys(myObject)

```

可以看出for in 应用于数组循环返回的是数组的下标和数组的属性和原型上的方法和属性,而for in应用于对象循环返回的是对象的属性名和原型中的方法和属性。

使用for in 也可以遍历数组,但是会存在以下问题:

1.index索引为字符串型数字,不能直接进行几何运算

2.遍历顺序有可能不是按照实际数组的内部顺序

3.使用for in会遍历数组所有的可枚举属性,包括原型。例如上栗的原型方法method和name属性

##### for of

```

Object.prototype.sayHello = function(){

    console.log('Hello')

}

var myObject = {

    name:'zhangsan',

    age:10

}

for(let key of myObject){

    consoloe.log(key)

}

//输出结果

//typeError

Array.prototype.sayHello = function(){

    console.log("Hello")

}

var myArray = [1,200,3,400,100]

for(let key of myArray){

    console.log(key)

}

//输出结果

1,200,3,400,100

```

for in遍历的是数组的索引(即键名),而for of遍历的是数组元素值。

所以for in更适合遍历对象,不要使用for in遍历数组。