数组常用遍历方法用法及其各项区别
- for,forEach,for in,for of的使用及区别
- filter,map的使用及区别
- includes,finde的使用及区别
- some,every的使用及区别
- reduce的使用及常见用法
for,forEach,for in,for of的区别:
var arr = [1,2,3,4,5];
arr.p = 'private'
for
for(let i = 0;i<arr.length;i++){
console.log(arr[i])
}
1、for循环不到数组的私有属性
2、可以使用return|break|continue终止|结束循环
3、for属于编程式写法
forEach
arr.forEach((item)=>{
console.log(item);
})
1、forEach循环不到数组的私有属性
2、return|break|continue不起作用
3、forEach属于声明式写法,不关心具体实现
for in
for(let key in arr){
console.log(key)
}
1、可以遍历到数组私有属性的值
2、key的类型是string型
3、可以使用return|break|continue终止|结束循环
4、不返回新数组
5、可以遍历对象,遍历对象时key编程对象的属性名
for of
for(let val of arr){
console.log(val);
}
1、不可以遍历数组的私有属性的值
2、val的值就是arr项的值
3、可以使用return|break|continue终止|结束循环
4、不返回新数组
filter,map
方法名 | filter | map |
---|---|---|
是否操作原数组 | 不会 | 不会 |
返回结果 | 过滤后的新数组 | 新数组 |
回调函数的返回结果 | 如果返回true这一项放到新数组中 | 回调函数中返回什么这一项就是什么 |
filter
[1,2,3,4].filter((item)=>{
return item>3
})
map
var li = [1,2,3,4].map((item)=>{
return `<li>${item}</li>`
})
<!--
1、li的值为:['<li>1</li>','<li>2</li>','<li>3</li>']
-->
var liList = li.join('');//返回结果为:'<li>1</li><li>2</li><li>3</li>'
includes返回的是boolean
var arr = [1,2,3,4,5];
arr.inclueds(7);//arr数组里有7吗?没有返回false
find
var arr = [1,2,3,4];
var result = arr.find(function(item,index){
return item.toString().indexOf('5')>-1
})
// result:undefined
var result2 = arr.find(function(item,index){
return item.toString().indexOf('2')>-1
})
//result2:2
1、回调函数中返回true停止循环并返回那一项的值,未找到返回undefined
2、不改变原数组
some&every
var arr = [1,2,3,4,5];
var someArr = arr.some(function(item){
return item>3
});
//someArr : true
var everyArr = arr.every(function(item){
return item<0
});
//everyArr:false
some:找true,找到true后停止循环,返回true,找不到返回false
every:找false,找到false后停止循环,返回false。找不到返回true
(os:这俩真是一对儿)
reduce:不改变原数组值
var arr = [1,2,3,4,5];
arr.reduce(function(prev,next,index,item){
console.log(arguments)
})
<!--
第一次循环:
prev:代表数组的第一项
next:代表数组的第二项
index:索引
item:当前数组
第二次循环:
prev:前两项的和
next:数组的第三项
-->
求数组的累加和:[1,2,3,4,5,...,100]
var arr = [1,2,3,4,5,...,100];
arr.reduce(function(prev,next){
return prev+next;//本次的返回值会作为下次的prev的值
})
已知数组:[{price:30,count:1},{price:20,count:2},{price:40,count:3}]
求:price*cout的各项累加和
var arr = [{price:30,count:1},{price:20,count:2},{price:40,count:3}]
let sumArr = arr.reduce(function(prev,next){
return prev+next.price*next.count
},0);//默认指定第一次prev的值为0
多维数组转一维数组
[[1,2,3],[2,3,4],[5,7,8]];
var arr = [[1,2,3],[2,3,4],[5,7,8]];
var newArr = arr.reduce(function(prev,next){
return prev.concat(next)
});
console.log(newArr);
<!--[1,2,3,2,3,4,5,7,8]-->
终于过完年了,新年第一篇总结,数组的常用方法及其区分~
2019常翻看常总结
热爱我热爱的