JavaScript数组遍历常有的方法

Javascript 数组遍历 基本是 for for-in for-each for-of map 等等

这里一共列举了 13 个数组遍历方法

1. 普通for循环

const arr = [11,22,33,44,55,66,77,88]
for(i=0;i<arr.length;i++){
    console.log(arr[i])
}

最简单的一种 也是使用频率最高的一种 虽然性能不弱 但仍有优化空间

2. 优化版 for 循环

const arr = [11,22,33,44,55,66,77,88]
for(i=0;len=arr.length,i<len;i++){
    console.log(arr[i])
}

使用临时变量 将长度缓存起来，避免重复获取数组长度 当数组较大时优化效果才会比较明显
这种方法基本是所有循环遍历方法中性能最高的一种

3. 弱化版 for 循环

const arr = [11,22,33,44,55,66,77,88]
for(i=0;arr[i]!=null;i++){
    console.log(arr[i])
}

这种方法严格上也属于 for 循环 只不过没有使用 length 判断 而使用变量本身判断
这种方法的性能要远远小于普通 for 循环
使用的也很少

4. forEach 循环

// 遍历普通数组
const arr = [11,22,33,44,55,66,77,88]
arr.forEach(function(item,index,array){
    // index 可要可不要 item可以是对象
    console.log(item,index,array)
})

// 遍历对象数组
const arr = [
    {id:1,name:'lisa'},
    {id:2,name:'jack'},
    {id:3,name:'tom'}
]
arr.forEach(function(item){
    console.log(item.id + '-----' + item.name)
})

数组里的元素个数有几个 该方法里的回调就会执行几次
第一个参数是数组里的元素 第二个参数为数组元素的索引 第三个参数则是它自己
数组自带的 for 循环 使用频率较高 实际上性能比普通for循环弱

5. forEach 变种

Array.prototype.forEach.call(arr,function(el){})

由于 forEach 是 Array 型自带的 对于一些非这种类型的 无法直接使用 所以才有了这种变种 使用这个变种可以让类似的数组拥有 forEach 功能
实际性能比普通 forEach 弱
使用比较少

6. for in 循环

// 遍历数组
const arr = [11,22,33,44,55,66,77,88]
for(let i in arr){
    // i表示index
    console.log(arr[i])
}
// 数组索引只是具有整数名称的枚举属性 并且与通用对象属性相同 不能保证for...in将以任何特定的顺序返回索引
// 循环语句将返回所有可枚举属性 包括非整数类型的名称和继承的那些

// 遍历对象
const obj = {
    a:'lisa',
    b:'jack',
    c:'tom'
}
for(let key in obj){
    // 输出的 key 是数组索引
    console.log(key + '----' + obj[key])
}

这个循环很多人爱用 但实际上 经分析测试 在众多的循环遍历方式中 它的效率是最低的
主要用来遍历对象的属性

7. map 遍历

const arr = [11,22,33,44,55,66,77,88]
var newArr = arr.map(function(item,index){
    console.log(item + '-----' + index)
    return item + 10
})
console.log(newArr)

map 即是 映射 的意思 原数组被 映射 成对应的新数组
这种方式也是用的比较广泛的 虽然用起来比较优雅 但实际效率还比不上 forEach
tip: forEach 和 map 区别
---- forEach 用来遍历数组中的每一项 这个方法执行没有返回值 不影响原数组
---- map 支持return 相当原数组克隆了一份 把克隆的每项改变了 也不影响原数组

8. for of 遍历(ES6支持)

const arr = [11,22,33,44,55,66,77,88]
for(let value of arr){
    // 打印出来的是值
    console.log(value)
}

这种方式是es6里面用到的 性能高于 for-in 但仍然比不上普通的 for 循环

9. filter 遍历数组 过滤出符合条件的元素并返回一个新数组

var arr = [
    {id:1,name:'lisa',done:true},
    {id:2,name:'jack',done:true},
    {id:3,name:'tome',done:false}
]
var newArr = arr.filter(function(item,index){
    return item.done
})
console.log(newArr)

10. some 遍历数组 只要有一个以上的元素满足条件就返回 true 否则返回 false

var arr = [
    {id:1,name:'lisa',done:true},
    {id:2,name:'jack',done:true},
    {id:3,name:'tome',done:false}
]
var newArr = arr.some(function(item,index){
    return item.done
})
console.log(newArr) // true

11. every 遍历数组 每一个元素都满足条件 返回 true 否则返回 false

var arr = [
    {id:1,name:'lisa',done:true},
    {id:2,name:'jack',done:true},
    {id:3,name:'tome',done:false}
]
var newArr = arr.every(function(item,index){
    return item.done
})
console.log(newArr) // false

12. find 遍历数组 返回符合条件的第一个元素 如果没有符合条件的元素则返回 undefined

var arr = [1,1,2,2,3,4,4,5,6]
var num = arr.find(function(item,index){
    return item === 3
})
console.log(num) // 3

13. findIndex 遍历数组 返回符合条件的第一个元素的索引 如果没有符合条件的元素返回 -1

var arr = [1,1,2,2,3,4,4,5,6]
var num = arr.findIndex(function(item,index){
    return item === 3
})
console.log(num) // 4

以上的分析都是空的循环 没有循环内部代码
但基本可以得出结论 : 普通的 for 循环 才是最优雅的
优化后的 普通for循环 最快
网上有一张关于性能对比的图片

javascript 原生遍历方法的建议用法：
用for循环遍历数组
用for-in遍历对象
用for-of遍历类数组对象