for、map及forEach的异同

[ScoutYin]

处理效率对比

处理效率上经过我的测试，for > forEach > map

处理效率测试代码如下：

var arr = [],
  max = 1000 // 多组max取值(10000，100000，...)进行测试
for (var i = 1; arr.push(i++) < max;)

var mapArr = [],forEachArr = [],forArr = []

console.time('map')
arr.map(function (val) {
  mapArr.push(val)
})
console.timeEnd('map')

console.time('forEach')
arr.forEach(function (val) {
  forEachArr.push(val);
})
console.timeEnd('forEach')

console.time('for')
for (var i = 0; i < arr.length; i++) {
  forArr.push(arr[i])
}
console.timeEnd('for')

map在功能定义上来说不适合与for以及forEach来进行比较，它会生成一个经过处理的新数组，因此内部实现肯定会相对于forEach来说更复杂一些.

forEach相对于for来说，实现同样的功能，除了方便书写能够节省代码量之外，还有没有其他的优势或者特殊用途？

首先通过两者的效率来看，在处理较长的数组时，可能不会使用forEach来遍历数组，但是forEach也有它另外一个优势，那就是在对稀疏数组的处理时，会跳过数组中的空位

for循环处理稀疏数组

var arr = new Array(100)

arr[0] = 1
arr[99] = 3

for (var i = 0, l = arr.length; i < l; i++) {
    console.log(`arr[${i}]`, arr[i])
}
console.log('i :' , i)

// 打印结果：
// arr[0] 1
// arr[1] undefined
// arr[2] undefined
// ...
// arr[99] 3
// i : 100

forEach处理稀疏数组

arr[0] = 1
arr[99] = 3

var count = 0
arr.forEach(function(value, index) {
    count++
    console.log(`arr[${index}]`, value)
})
console.log('count', count)

// 打印结果：
// arr[0] 1
// arr[99] 3
// count 2