您的位置:首页 > Web前端 > JavaScript

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

2020-06-05 06:12 357 查看

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。

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: