javascript数组遍历的方式及其区别

for循环

• 使用示例

let array = ['item1','item2'];
let len = array.length;
for(let i=0;i<len;i++){
	console.log(array[i],i) //1 ，2，3，4
}

适用场景:非常灵活的一种方式，可以不必要遍历整个数组，可以根具需求随意跳出循环，但写法较为繁琐。

foreach

• 描述

forEach() 方法按升序为数组中含有效值的每一项执行一次 callback 函数，那些已删除或者未初始化的项将被跳过（例如在稀疏数组上）。

可依次向 callback 函数传入三个参数：

数组当前项的值

数组当前项的索引

数组对象本身

• 使用示例

let array = ['item1','item2'];
array.foreach((item,index,originalArray)=>{
	console.log(item) //'item1','item2'
})

适用场景:常用的一种写法，方便使用，除了抛出异常，没有办法打断遍历

map

• 描述

map 方法会给原数组中的每个元素都按顺序调用一次 callback 函数。callback 每次执行后的返回值（包括 undefined）组合起来形成一个新数组。 callback 函数只会在有值的索引上被调用；那些从来没被赋过值或者使用 delete 删除的索引则不会被调用。

因为map生成一个新数组，当你不打算使用返回的新数组却使用map是违背设计初衷的，请用forEach或者for-of替代。你不该使用map: A)你不打算使用返回的新数组，或/且 B) 你没有从回调函数中返回值。

callback 函数会被自动传入三个参数：数组元素，元素索引，原数组本身。

• 使用示例

let array = ['item1','item2'];
array.map((item,index,originalArray)=>{
	console.log(item) //'item1','item2'
})

适用场景:返回一个新的数组

reduce

• 描述

reduce为数组中的每一个元素依次执行callback函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：

accumulator 累计器

currentValue 当前值

currentIndex 当前索引

array 数组

• 使用示例

var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);
//sum 6

适用场景:reduce 相当于给函数开辟了一个临时的变量 我们将需要暂存的数据存储 传到下一个循环。有这样需求的场景下使用较方便。

reduceRight的遍历顺序为从右向左
{.is-warning}

every

• 描述

every 方法为数组中的每个元素执行一次 callback 函数，直到它找到一个会使 callback 返回 falsy 的元素。如果发现了一个这样的元素，every 方法将会立即返回 false。否则，callback 为每一个元素返回 true，every 就会返回 true。callback 只会为那些已经被赋值的索引调用。不会为那些被删除或从未被赋值的索引调用。

callback 在被调用时可传入三个参数：元素值，元素的索引，原数组

• 使用示例

[12, 5, 8, 130, 44].every(x => x >= 10); // false
[12, 54, 18, 130, 44].every(x => x >= 10); // true

适用场景:当需要遍历数组 来判断是否每个元素都满足条件的时候非常方便

some

• 描述

类似于every。every是所有都true才返回true,some是只要一个true就返回true。