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=>`
//这里是一般语法
newArr = arr.map(function(item){
return "
})
console.log(newArr)
//console.log
[
"
"
"
"
"
]复制代码
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
复制代码