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

JavaScript021

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)

 }

<script type="text/javascript">

/*对比:

1、map速度比foreach快

2、map会返回一个新数组,不对原数组产生影响,foreach不会产生新数组,foreach返回undefined

3、map因为返回数组所以可以链式操作,foreach不能

4, map里可以用return ,而foreach里用return不起作用,foreach不能用break,会直接报错*/

/*方法一:*/

var arr1 = [1, 2, 3, 4, 5, 6]

for(var i = 0, len = arr1.lengthi <leni++) { //优化性能处理

console.log(arr1[i], 'for遍历出来的数据')//每个item 1,2,3,4,5,6

}

/*方法二:*/

/*forEach方法中的function回调支持3个参数,第1个是遍历的数组内容;第2个是对应的数组索引,第3个是数组本身*/

var arr2 = [{

name: 'bob',

age: 20

},

{

name: 'tom',

age: 18

},

{

name: 'sos',

age: 19

}

]

arr2.forEach((val, i) =>{ //没有返回值的,对原来数组也没有影响

console.log(val, '遍历出来的每个obj')

})

/*方法三:*/

var fruits = [1, 2, 3, 4, 5, 6, 7, 8]

let arr = fruits.map((item, index) =>{

console.log(item, 'top')

console.log(index, 'top')

return item * 8

})

console.log(arr, 'newarr') //[8, 16, 24, 32, 40, 48, 56, 64] "newarr"

var a = fruits.indexOf("Apple", 4)

console.log(a)

//for 和 forEach都是普通循环,map 带返回值并且返回一个新数组;

/*

*当前元素的值,当期元素的索引值,当期元素属于的数组对象

语法:array.map(function(currentValue,index,arr), thisValue)

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

map() 方法按照原始数组元素顺序依次处理元素。

注意: map() 不会对空数组进行检测。

注意: map() 不会改变原始数组。

* */

/*方法四:*/

/*兼容写法:

不管是forEach还是map在IE6 - 8 下都不兼容( 不兼容的情况下在Array.prototype上没有这两个方法), 那么需要我们自己封装一个都兼容的方法:*/

/**

* forEach遍历数组

* @param callback [function] 回调函数;

* @param context [object] 上下文;

*/

Array.prototype.myForEach = function myForEach(callback, context) {

context = context || window

if('forEach' in Array.prototye) {

this.forEach(callback, context)

return

}

//IE6-8下自己编写回调函数执行的逻辑

for(var i = 0, len = this.lengthi <leni++) {

callback &&callback.call(context, this[i], i, this)

}

}

/**

* map遍历数组

* @param callback [function] 回调函数;

* @param context [object] 上下文;

*/

Array.prototype.myMap = function myMap(callback, context) {

context = context || window

if('map' in Array.prototye) {

return this.map(callback, context)

}

//IE6-8下自己编写回调函数执行的逻辑var newAry = []

for(var i = 0, len = this.lengthi <leni++) {

if(typeof callback === 'function') {

var val = callback.call(context, this[i], i, this)

newAry[newAry.length] = val

}

}

return newAry

}

</script>

数组:

var arr = [‘a’,‘b’,'c']

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

console.log(i,arr[i])

}

对象:

var person = { name:'tom',age:'29',sex:'男‘};

// 对象如果要用for循环来遍历,需要先有Object.key()的方法来拿到可迭代(遍历)的私有属性名的集合(数组)

var keys = Object.keys(person)

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

console.log(keys[i]+":"+person[keys[i]])

}

数组:

for(let key in arr){

// 值得注意的是,key为数组的索引,如若需要获取属性的值,则需要使用数组加索引下标 的形式来获取

console.log(key,arr[key])

}

对象:

for(let key in obj){

// 值得注意的是,key为对象的键名,键值要以obj[key]的方式来获取

console.log(key,obj[key])

}

数组:

for(let value of arr){

//值得注意的是,for...of跟for...in是不一样的,for...in遍历的是数组的索引,for...of遍历的是数组的值

console.log(value)

}

对象:

for...in是不能单独来遍历一个对象的,会报错。

如果对象是一个类数组对象,那用array.from方法转成一个数组就可以用for...of来遍历了。

或者结合Object.keys()方法来使用

for(let key of Object.keys(obj)){

// for...of遍历输出的也是键名

console.log(key,obj[obj])

}

数组:

forEach()方法遍历数组是没有返回值

值得注意的是数组中有几项,那么传递进去的匿名回调函数就需要执行几次;

arr.forEach((item,index,arr)=>{

console.log(item,index,arr)

)

// 其中item是数组中的当前项,index是数组中的当前下标,arr是原始数组

对象:

原则上forEach是用来遍历数组的,不能遍历对象,但是可以用Object.getOnwPropertyNames()方法来使得对象能被forEach遍历出来。

Object.getOnwPropertyNames()返回一个数组,成员是参数对象自身全部属性的属性名,不管该属性是否能被遍历。

Object.getOnwPropertyNames(obj).forEach((item,index,arr)=>{

console.log(item,index,obj[item])

})