有关js各类数组遍历

js数组遍历是在数组操做中常常用到的，前段时间学习vue视频，上边顺带讲解了js数组的遍历方法，当时没有留下笔记，到今天来回想，果真仍是忘记了一些，因而仍是选择开始在这里记录下来。废话很少说，下面开始。

1.for循环

这个方法应该是js学习者最早接触到的js遍历方法，反正我是第一个接触到的，也许是我水平低，我常常用的就是这个方法。

//假设存在一个数组arr
let arr = [1,2,3,4,5];

//for循环
for(let i = 0; i < arr.length; i++){
    //do someing……

    console.log(arr[i]);
}

//console.log
1
2
3
4
5复制代码

2.forEach循环

这个方法使用次数是仅次于上面的for循环的（我的观点），可是，实际效率其实并无for循环高。forEach循环的参数有两个，第一个为参数为实际操做的函数function，第二个参数that是改变this指向的，通常也不多用。forEach参数的函数中也有两个参数，第一个是循环的每一项item，第二个参数是每一项对应的下标index。注意，使用中，that和index都可不写不用,并且forEach循环不支持return

//假设存在一个数组arr
let arr = [1,2,3,4,5];

//forEach循环
arr.forEach(function(item,index){
    //do someing……

    console.log(arr[i]);
},that);

//console.log
1
2
3
4
5
复制代码

3.for in循环

这确实也是一个循环，可是平时基本不会用这个去遍历一个数组，由于他的“弊端”很明显，数组的私有属性也会遍历。默认遍历的是数组的key值，因此会是string类型

//假设存在一个数组arr
let arr = [1,2,3,4,5];
//给数组添加一个私有属性
arr.a = "key"

//for in循环
for(let key in arr){
    //do someing……

    console.log(typeof(key));
}

//console.log
//注意这里打印出来6个，for in循环会将数组的私有属性也遍历
string
string
string
string
string
string复制代码

4.for of循环(ES6)

for of循环是es6的方法，他弥补了forEach和for in循环的弊端。既有return，并且不会遍历数组的私有属性。注意：for of循环不能遍历对象

//假设存在一个数组arr
let arr = [1,2,3,4,5];
//给数组添加一个私有属性
arr.a = "key"

//for of循环
for(let val of arr){
    //do someing……

    console.log(val);
}

//console.log
//注意这里打印出来5个，for of循环不会将数组的私有属性遍历
1
2
3
4
5复制代码

5.filter过滤器

filter过滤器就我的而言，也是一个比较经常使用的方法。他会去遍历一个数组并返回一个新的数组，因此并不会影响原数组。遍历数组每一项，回调函数返回了true，就把这一项添加到新数组。其中回调函数有两个参数(item,index)，item是每一项，index是下标。index能够不写不用

//假设存在一个数组arr
let arr = [1,2,3,4,5];
//声明一个新的空数组
let newArr = [];
//给数组添加一个私有属性
arr.a = "key"

//filter过滤器
//这里使用的是es6箭头函数
newArr = arr.filter(item=>item>3);
//这里使用的是es5语法,和上面的操做相等
newArr = arr.filter(function(item){
    return item > 3;
})
console.log(newArr)

//console.log
[4,5]复制代码

6.map映射

map映射会去遍历数组的每一项，可是不会操做改变原数组，同filter同样会返回一个新的数组。回调函数返回的是什么，对应的新数组的那一项就会是什么

//假设存在一个数组arr
let arr = [1,2,3,4,5];
//声明一个新的空数组
let newArr = [];
//给数组添加一个私有属性
arr.a = "key"

//map映射
//这里使用的是es6语法
newArr = arr.map(item=>`<div>${item}</div>`);
//这里是通常语法
newArr = arr.map(function(item){
    return "<div>" + item + "</div>";
})
console.log(newArr)

//console.log
[
    "<div>1</div>",
    "<div>2</div>",
    "<div>3</div>",
    "<div>4</div>",
    "<div>5</div>"
]复制代码

7.include和find

include和find都是es6的的方法。include有一个参数，它会遍历数组的每一项与参数对比，若是存在该参数，则返回true。而find的参数是一个回调函数，函数的参数是每一项以及对应下标，find会返回匹配的那一项，一旦匹配就不会继续往下匹配,find返回一个新的数组

//假设存在一个数组arr
let arr = [1,2,3,4,5,55];

//include
console.log(arr.include(5));

//include console
true

//find
let res = arr.find(function(item,index){
    //若是这一项包含了5则返回true
    return item.toString().indexOf(5) > -1;
})
console.log(res);

//find console
5复制代码

8.some和every

some和every是两个做用截然相反的方法。some遍历数组，找到true，即返回true，不然返回false；every则是找到false返回false，不然返回true

//假设存在一个数组arr
let arr = [1,2,3,4,5,55];

//some
let someResult = arr.some(item=>item > 4);
console.log(someResult);

//some console
true

//every
let evevyResult = arr.every(item=>item > 0);
console.log(everyResult);

//every console
true复制代码

9.reduce

说实话，这个方法我到如今都不太明白，没法在这里说明，但愿你们本身查阅

2018.5.30 更新~

社区仍是一个好地方，取长补短。原本觉得一篇拙见不会有人来注意，就没有管理这篇文章，理解了reduce以后再来更新笔记，发现就有一些大牛来为我指点迷津了。在此感谢各位大牛的指正与指教~

正文：

reduce是es5的方法，从数组的第一项开始逐步迭代至最后一项。reduce的参数能够有两个，第一个是一个回调函数（必需），函数参数可包括四个：prev，cur，index，arr。其中，prev是前一个迭代的值，cur是当前迭代的一项，index是当前一项的下标，arr则是迭代的原数组；reduce的第二个参数是传入的基础值，可不用。若是不用，迭代将从数组的第一项开始

//假设存在一个数组arr
let arr = [1,2,3,4,5];

//reduce
//不传入第二个参数
let result = arr.reduce((prev,cur,index,arr)=>prev+cur);

console.log(result);

//console
15

//传入第二个参数
let result = arr.reduce((prev,cur,index,arr)=>{return prev+cur;},100);

console.log(result);

//console
115




复制代码