1.for循环
使用临时变量,将长度缓存起来,避免重复获取数组长度,当数组较大时优化效果才会比较明显。
for( j = 0,len= arr.length; j < len; j++) {
}
2.foreach循环
遍历数组中的每一项,没有返回值,即使有return,也不会返回任何值,对原数组没有影响,不支持IE
//1 没有返回值
arr.forEach(( item,index,array) = > {
//执行代码
} )
//参数:item数组中的当前索引的值, index当前项的索引, array原始数组;
//数组中有几项,那么传递进去的匿名回调函数就需要执行几次;
3.map循环 映射数组
有返回值,可以return出来
map的回调函数中支持return返回值;return的是啥,相当于把数组中的这一项变为啥(并不影响原来的数组,只是相当于把原数组克隆一份,把克隆的这一份的数组中的对应项改变了);
arr.map( function( value,index,array) {
//do something
return XXX
} )
var ary = [ 12,23,24,42,1] ;
var res = ary.map( function ( item,index,ary ) {
return item*10;
} )
console.log( res) ; //--> [ 120,230,240,420,10] ; 原数组拷贝了一份,并进行了修改
console.log( ary) ; //--> [ 12,23,24,42,1] ; 原数组并未发生变化
ps: arr.forEach()和arr.map()的区别
1. arr.forEach()是和for循环一样,是代替for。arr.map()是修改数组其中的数据,并返回新的数据。
2. arr.forEach() 没有return arr.map() 有return
4.for…of…遍历
可以正确响应break、continue和return语句
for ( var value of myArray) {
console.log( value) ;
}
5.filter遍历 (过滤)
不会改变原始数组,返回新数组
var arr = [
{ id: 1, text: 'aa' , done: true } ,
{ id: 2, text: 'bb' , done: false }
]
console.log( arr.filter( item = > item.done))
var arr = [ 73,84,56, 22,100]
var newArr = arr.filter( item = > item> 80) //得到新数组 [ 84, 100]
console.log( newArr,arr)
6.every遍历
every()是对数组中的每一项运行给定函数,如果该函数对每一项返回true,则返回true。
var arr = [ 1, 2, 3, 4, 5, 6 ] ;
console.log( arr.every( function( item, index, array ) {
return item > 3;
} )) ;
false
7.some遍历
some()是对数组中每一项运行指定函数,如果该函数对任一项返回true,则返回true。
var arr = [ 1, 2, 3, 4, 5, 6 ] ;
console.log( arr.some( function( item, index, array ) {
return item > 3;
} )) ;
true
8.reduce
reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值。
var total = [ 0,1,2,3,4] .reduce(( a, b) = > a + b) ; //10
reduce接受一个函数,函数有四个参数,分别是:上一次的值,当前值,当前值的索引,数组
[ 0, 1, 2, 3, 4] .reduce( function( previousValue, currentValue, index, array) {
return previousValue + currentValue;
} ) ;
9.find
find()方法返回数组中符合测试函数条件的第一个元素。否则返回undefined
var stu = [
{
name: '张三' ,
gender: '男' ,
age: 20
} ,
{
name: '王小毛' ,
gender: '男' ,
age: 20
} ,
{
name: '李四' ,
gender: '男' ,
age: 20
}
]
function getStu( element) {
return element.name == '李四'
}
stu.find( getStu)
//返回结果为
//{ name: "李四" , gender: "男" , age: 20}
10.findIndex
对于数组中的每个元素,findIndex 方法都会调用一次回调函数(采用升序索引顺序),直到有元素返回 true。只要有一个元素返回 true,findIndex 立即返回该返回 true 的元素的索引值。如果数组中没有任何元素返回 true,则 findIndex 返回 -1。
findIndex 不会改变数组对象。
[ 1,2,3] .findIndex( function( x) { x == 2; } ) ;
// Returns an index value of 1.
[ 1,2,3] .findIndex( x = > x == 4) ;
// Returns an index value of -1.