前言
集合遍历是我们实现业务逻辑的常用手段之一,我们几乎每天都会使用到它去操作集合元素。今天就梳理一下一些常用的集合遍历方式。
1.for(let i = 0;i <length;i++)循环
这是我们最早接触的遍历集合的方式,简单容易理解,按照集合的索引顺序遍历集合的内容。数组Array的最大长度使用arr.length表示,其他集合使用size()函数表示。但是对于Set和Map来说这种方式不适用,因为没有取出下标对应值的方法。示例如下:
let arr = [2,4,6,8,10,12]; for (let i = 0;i < arr.length;i ++) { console.log(arr[i]); }
接下来的几种方式也是ES6支持的方法,主要通过回调函数的方式读取数据
2.forEach(ck)
forEach看起来更加简洁,但这种方法也有一个小缺陷:你不能使用break语句中断循环,也不能使用return语句返回到外层函数。
//数组的遍历 let arr = [2,4,6,8,10,12]; //回调函数简化前方式 //value:索引值,index:下标,arr:要遍历的数组 arr.forEach(function (value,index,arr) { console.log(index + ":" + value); }) //ES6后可以使用箭头函数 arr.forEach((v,k)=>{ console.log(k + ":" + v); }) //set的遍历 let set = new Set(arr); set.forEach((v,k)=>{ console.log(k + ":" + v);//k和v是相同的 }) //Map的遍历 let map = new Map().set(1,"apple") .set(2,"pear") .set(3,"balnana") .set(4,"orange"); //遍历key,value map.forEach((v,k)=>{ console.log(k + ":" + v); }) //遍历key,value map.forEach((v,k)=>{ console.log(k + ":" + v); })
3.for (.. of ..)
ES6引入了iterable类型,Array,Map,Set都属于iterable类型,它们可以使用for...of循环来遍历,意思为循环集合中的元素。注意区别于for...in用法,这是遍历对象属性的。示例如下
//数组的遍历 let arr = [2,4,6,8,10,12]; for (let v of arr) { console.log(v); } //set的遍历 let set = new Set(arr); for (let v of set) { console.log(v); } //Map的遍历 let map = new Map().set(1,"apple") .set(2,"pear") .set(3,"balnana") .set(4,"orange"); //遍历key,value for (let [k,v] of map) { console.log(k + ":" + v); } //遍历keys for (let k of map.keys()) { console.log(k) } //遍历values for (let k of map.values()) { console.log(k) } //遍历entries for (let [k,v] of map.entries()) { console.log(k + ":" + v) }
- 这是最简洁、最直接的遍历数组元素的语法
- 这个方法避开了for-in循环的所有缺陷
- 与forEach()不同的是,它可以正确响应break、continue和return语句
接下来的遍历方法的回调函数是有返回值的,并且只正对数组,ck指callback函数
4.map(ck)
map就是映射的意思,将原对象映射为新的数组,每个数组元素都执行一次ck函数,最后返回每次元素执行ck函数后返回值的集合(数组)。
//数组的遍历 let arr = [2,4,6,8,10,12]; let newArr = arr.map((v,k)=>v*2); newArr.forEach((v,k)=>{console.log(v)}); //输出4 8 12 16 20 24 arr = [{"name":"tom",salary:1200},{"name":"Tony",salary:1300}] newArr = arr.map((v,k)=>v.salary*2); newArr.forEach((v,k)=>{console.log(v)});//输出2400 2600
5.some(ck)
此方法用于判断数组中是否有满足条件的元素,如果有则返回true,没有则返回false
//数组的遍历 let arr = [2,4,6,8,10,12]; //判断是否有大于10的元素 let res = arr.some((v,k)=> v>10); console.log(res); //输出true //判断是否有大于20的元素 res = arr.some((v,k)=> v>20); console.log(res); //输出false
6.filter(ck)
filter过滤,用于过滤数组中符合条件的元素,和map方法一样,返回的是一个数组映射。
let arr = [2,4,6,8,10,12]; //将大于5的元素提取出来 let res = arr.filter((v,k)=> v>5); res.forEach((v)=>console.log(v));
7.every(ck)
every与some相似,从英文意思上来讲some表示"一些",数组中只要有满足条件的就会返回true;every表示"每一个",只要有一个不满足条件就返回false;
let arr = [2,4,6,8,10,12]; //判断是否每一个元素都大于5 let res = arr.every((v,k)=> v>5); console.log(res); //输出false //判断是否每一个元素都大于1 res = arr.every((v,k)=> v>1); console.log(res); //输出true
8.reduce(ck,[init]),ck回调函数,init初始值
reduce英文意思是减少,缩少,还有浓缩的意思(学好英文很重要。。。),意思就是按照callback规则累积运算得出一个计算结果。
let arr = [2,4,6,8,10,12]; //判断是否每一个元素都大于5 let res = arr.reduce((x,y)=>x+y,2); console.log(res); //输出44
reduce更多用法参照:https://segmentfault.com/a/1190000010731933