js中数组遍历常用的方法

 

常见的数组遍历方法，比如 for in，for  of， forEach，map，filter，every，some，find,reduce等

1，普通for循环，经常用的数组遍历

var arr = [1,2,0,3,9];

for ( var i = 0; i <arr.length; i++){

console.log(arr[i]);

}

2，优化版for循环:使用变量，将长度缓存起来，避免重复获取长度，数组很大时优化效果明显

for(var j = 0,len = arr.length; j < len; j++){

console.log(arr[j]);

}

3，forEach，ES5推出的,数组自带的循环，主要功能是遍历数组，实际性能比for还弱

 

arr.forEach(function(value,i){

　　console.log('forEach遍历:'+i+'--'+value);

 

})

arr.forEach((val)=>{

console.log(val)

})

forEach这种方法也有一个小缺陷：你不能使用break语句中断循环，也不能使用return语句返回到外层函数。

4,map遍历，map即是 “映射”的意思 用法与 forEach 相似

1、创建新数组

2、不改变原数组

3、输出的是return什么就输出什么新数组

4、回调函数参数，item(数组元素)、index(序列)、arr(数组本身)

5、使用return操作输出，会循环数组每一项，并在回调函数中操作

arr.map(function(value,index){

console.log('map遍历:'+index+'--'+value);

});

map遍历支持使用return语句，支持return返回值

var temp=arr.map(function(val,index){

console.log(val);

return val*val

})

console.log(temp); //先打印值，再返回数组

forEach、map都是ECMA5新增数组的方法，所以ie9以下的浏览器还不支持

5，for-of遍历 是ES6新增功能

for( let i of arr){

console.log(i);

}

 

• for-of这个方法避开了for-in循环的所有缺陷
• 与forEach()不同的是，它可以正确响应break、continue和return语句 

for-of循环不仅支持数组，还支持大多数类数组对象，例如DOM NodeList对象。

for-of循环也支持字符串遍历

 

JS对象遍历：

1，for-in遍历

for-in是为遍历对象而设计的，不适用于遍历数组。

遍历数组的缺点：数组的下标index值是数字，for-in遍历的index值"0","1","2"等是字符串

for (var index in arr){

console.log(arr[index]);

console.log(index);

}

 

arr.filter()、includes()、find()、findIndex()— —筛选数组

一、arr.filter()

1、创建新数组

2、不改变原数组

3、输出的是判断为true的数组元素形成的新数组

4、回调函数参数，item(数组元素)、index(序列)、arr(数组本身)

5、使用return操作输出，会循环数组每一项，并在回调函数中操作

示例：    

二、arr.includes()

只是判断数组是否含有某值，不用return，不用回调函数，输出一个true或false

无用

示例：

三、arr.find()

1、不创建新数组

2、不改变原数组

3、输出的是一旦判断为true则跳出循环输出符合条件的数组元素

4、回调函数参数，item(数组元素)、index(序列)、arr(数组本身)

5、使用return操作输出，会循环数组每一项，并在回调函数中操作

示例：

四、arr.findIndex()— — 与find()相同

1、不创建新数组

 

2、不改变原数组

 

3、输出的是一旦判断为true则跳出循环输出符合条件的数组元素序列

 

4、回调函数参数，item(数组元素)、index(序列)、arr(数组本身)

 

5、使用return操作输出，会循环数组每一项，并在回调函数中操作

 

（较无用）

 

示例：

arr.some()、every()— —判断数组

(不常用)

 

一、some()

1、不创建新数组

 

2、不改变原数组

 

3、输出的是判断为true则马上跳出循环并return成true

 

4、回调函数参数，item(数组元素)、index(序列)、arr(数组本身)

 

5、使用return操作输出，会循环数组每一项，并在回调函数中操作

 

示例：

一、every()— —与some相反

1、不创建新数组

 

2、不改变原数组

 

3、输出的是判断为false则马上跳出循环并return成false

 

4、回调函数参数，item(数组元素)、index(序列)、arr(数组本身)

 

5、使用return操作输出，会循环数组每一项，并在回调函数中操作

 

示例：

reduce()— —叠加数组

不一定在数学意义上的叠加计算，这里叠加指：可以利用前遍历操作的结果到下一次遍历使用，重复叠加使用下去

 

1、创建新数组

 

2、不改变原数组

 

3、输出的是return叠加什么就输出什么 新数组

 

4、回调函数参数

 

pre(第一次为数组第一项，之后为上一操作的结果)

next(数组的下一项)

index(next项的序列)

arr(数组本身)

回调函数后的改变第一项参数。（不影响原数组）

5、使用return操作输出，会循环数组每一项，并在回调函数中操作

 

示例：

//reduce()：

//求和计算

var arr1 = [1,2,3,4,5] ;

var new1 = arr1.reduce(function(sum,next,index){

        return sum+next ;    

        /*

         *第一次：pre-->1  next-->2  index-->1

         *遍历计算return得结果为pre+next=1+2=3

         *第二次：pre-->3  next-->3  index-->2

         *遍历计算return得结果为pre+next=3+3=6

         *第三次：pre-->6  next-->4  index-->3

         *遍历计算return得结果为pre+next=6+4=10

         *第四次：pre-->10  next-->5  index-->4

         *遍历计算return得结果为pre+next=10+5=15

        */

})

//扁平化数组

var arr2 = [[1,2,3],[4,5],[6,7]] ;

var new2 = arr2.reduce(function(pre,next,index){

        return pre.concat(next);    //前数组拼接后数组 .concat()

})

//对象数组叠加计算

var arr3 = [{price:10,count:1},{price:15,count:2},{price:10,count:3}];

var new3 = arr3.reduce(function(pre,next,index){

        return pre+next.price*next.count;

        //当需要对第一项进行操作时，后面pre使用上一项操作结果，不再需要操作

        //所以当需要操作第一项的时候，利用reduce(callbreak(){},往数组第一项前添加一项，如:0)

},0)    //在原数组第一项添加为0，不改变原数组，则可不操作第一项

console.log(new1);

console.log(new2);

console.log(new3);

console.log(arr1);        //普通数组

console.log(arr2);        //多重数组

console.log(arr3);        //对象数组