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。
- Javascript中遍历数组的几种方式?!
- 【JavaScript】(3)基础语法---数组的定义、使用方式及其注意事项
- JavaScript遍历数组方式总结
- JavaScript-数组遍历的两种方式
- JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别
- 数组ES5新增遍历迭代的方法及其区别
- Vue指令v-for之遍历输出JavaScript数组,json对象的几种方式
- js中数组遍历的几种方法及其区别
- js中foreach,for in,for of的使用及区别,遍历对象,遍历数组使用的不一样 JavaScript
- Javascript用递归的方式遍历json数组
- JavaScript 几种数组遍历方式以及性能分析对比
- JavaScript中for和for in在遍历使用getElementsByName()获取的数组时的小区别
- javascript数组遍历for与for in区别详解
- JavaScript数组遍历的几种方式
- 【JavaScript】js中的JSON和数组的区别,JSON的遍历
- javascript 两种函数书写方式及其区别
- javascript数组遍历for与for in区别详解
- Javascript 数组循环遍历之forEach
- JS几种数组遍历方式以及性能分析对比
- JavaScript遍历查找数组中最大值与最小值的方法示例