5. 遍历的方法有哪些?
ES5:forEach
every
some
filter
map
reduce
reduceRight
ES6:entries
find
findIndex
keys
values
/* 1.forEach方法: 定义:对数组的每个元素执行一个给定的函数,返回值undefined。不能终止循环,除非抛出异常。 用法:arr.forEach(function(currentValue,index,array){}) 参数:currentValue正在处理的元素 index正在处理的元素的索引 array正在操作的数组 */ const arr = ['a','b','c','d'] const newArr = [] let resp = arr.forEach((ele,idx)=>{ newArr[idx] = ele.toUpperCase() }) console.log(newArr)//["A", "B", "C", "D"] console.log(resp)//undefined
/* 2.every方法: 定义:测试数组内的所有元素是否都能通过某个指定的函数。返回Boolean。如果一个元素返回false,则立即返回false,不在继续执行。(若为空数组,直接返回true) 用法:arr.every(function(element,index,array){}) 参数:element用于测试的元素 index用于测试的元素的索引 array调用every的当前数组 */ const arr = [2,4,6,8,10] let resp = arr.every((ele,idx)=>{ return ele % 2 === 0 }) console.log(resp)//true const arr1 = [2,4,6,9,10] let resp1 = arr1.every((ele,idx)=>{ console.log(idx)//0,1,2,3 未打印4 return ele % 2 === 0 }) console.log(resp1)//false
/* 3.some方法: 定义:测试数组中是不是至少有一个元素通过了指定函数,返回Boolean。如有满足条件的值,立即返回(若为空数组,直接返回false) 用法:arr.some(function(element,index,array){}) 参数:element正在处理的元素 index正在处理的元素的索引 array调用some的数组 */ const arr = [1,2,3,4,5] let resp = arr.some((ele,idx)=>{ console.log(idx)//0,1,2 有满足条件的值,立即返回 return ele >= 3 }) console.log(resp)//true
/* 4.filter方法: 定义:测试数组中的所有元素是否通过了指定函数,返回一个新数组。如果没有任何元素通过,则返回空数组。 用法:arr.filter(function(element,index.array){}) 参数:element正在处理的元素 index正在处理的元素的索引 array调用filter的数组 */ const words = ['spray', 'limit', 'elite', 'destruction', 'present']; const result = words.filter((ele,idx)=>{ return ele.length > 6 }); console.log(result);//["destruction", "present"]
/* 5.map方法: 定义:为数组的每一个元素都执行一次指定的函数,返回一个新数组。 用法:arr.map(function(element,index,array){}) 参数:element正在处理的元素 index正在处理的元素的索引 array调用filter的数组 */ const sqrts = [9,16,25] const nums = sqrts.map((ele,idx)=>{ return Math.sqrt(ele) }) console.log(nums)// [3, 4, 5]
/* 6.reduce方法: 定义:为数组中的每一个元素都执行指定函数,将其汇总的结果单个返回(从左往右)。 用法:arr.reduce(function(accumulator, currentValue, index, array), initialValue]) 第一个参数:回调函数,四个参数,分别为:回调返回的初始值(如果没有初始值,则为数组第一个元素的值),数组中正在处理的元素,正在处理的元素的索引,调用reduce的原数组。 第二个参数:为回调返回值的初始值。 */ //基础用法: const arr = [0, 1, 2, 3, 4] let result = arr.reduce((prev, current,idx) =>{ console.log(prev, current,idx)//0 1 1 1 2 2 3 3 3 6 4 4 //初始值默认为数组第一个元素,索引则会从1开始,不是第0 。 return prev + current });//无初始值 console.log(result)//10 let result1 = arr.reduce((prev, current,idx) =>{ console.log(prev, current,idx)//10 0 0 10 1 1 11 2 2 13 3 3 16 4 4 return prev + current },10);//初始值为10 console.log(result1)//20 //进阶用法: //a.二位数组转一维数组 const arr = [[0, 1], [3, 2], [4, 5]] let result = arr.reduce((prev,current,idx)=>{ return prev.concat(current) },[]) console.log(result)//[0, 1, 3, 2, 4, 5] //b.计算数组中每个元素出现的次数 const names = ['Alice','Bob','Tiff','Bruce','Alice','Tom'] let result = names.reduce((allNames,name)=>{ if(name in allNames){ allNames[name]++ }else{ allNames[name] = 1 } return allNames },{}) console.log(result)//{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1, Tom: 1} //c.根据属性对object进行分类 const peoples = [ { name: 'Alice', age: 20 }, { name: 'Max', age: 30 }, { name: 'Max', age: 40 }, { name: 'Tom', age: 50} ]; let groupByProperty = (arrs,property)=>{ return arrs.reduce((acc,current)=>{ let key = current[property] if(!acc[key]){ acc[key] = [] } acc[key].push(current) return acc },{}) } let result = groupByProperty(peoples,'name') console.log(result)//{"Alice":[{"name":"Alice","age":20}],"Max":[{"name":"Max","age":30},{"name":"Max","age":40}],"Tom":[{"name":"Tom","age":50}]}
/* 7.reduceRight方法: 定义:为数组中的每一个元素都执行指定函数,将其汇总的结果单个返回(从右往左)。 用法:arr.reduce(function(accumulator, currentValue, index, array), initialValue]) 第一个参数:回调函数,四个参数,分别为:回调返回的初始值(如果没有初始值,则为数组最后一个元素的值),数组中正在处理的元素,正在处理的元素的索引,调用reduce的原数组。 第二个参数:为回调返回值的初始值。 */ const arr = [[0, 1], [3, 2], [4, 5]] let result = arr.reduceRight((prev,current,idx)=>{ return prev.concat(current) },[]) console.log(result)//[4, 5, 3, 2, 0, 1]
/* 8.find方法: 定义:返回满足条件的第一个元素的值,否则返回undefined。 用法:arr.find((ele,idx,array)) */ const arr = [5, 12, 8, 130, 44]; const result = arr.find((ele,idx,array)=>{ console.log(idx) //0 1 return ele > 10 }); console.log(result);//12
/* 9.findIndex方法: 定义:返回满足条件的第一个元素的索引,没找到返回-1。 用法:arr.findIndex((ele,idx,array)) */ const arr = [5, 12, 8, 130, 44]; const idx = arr.findIndex((ele,idx,array)=>{ console.log(idx) //0 1 return ele > 10 }); console.log(idx);//1
/* 10.entries方法: 定义:返回一个新的Array Iterator对象,包含[key,value]键值对。有一个next方法。 用法:arr.entries() */ const arr = ['1','2','3','4','5'] let iterator = arr.entries() console.log(iterator)//Array Iterator {} console.log(iterator.next())//{"value": [0,"1"],"done": false} //next.done 用于指示迭代器是否完成:在每次迭代时进行更新而且都是false,直到迭代器结束done才是true。 //拓展 for(let e of iterator){ //循环之前不要调用next方法哦,不然迭代器会从最后一次开始执行。 console.log(e)//[0, "1"] [1, "2"] [2, "3"] [3, "4"] [4, "5"] }
/* 11.keys方法: 定义:返回一个包含数组键的Array Iterator对象。 用法:arr.keys() */ const arr = ['a', 'b', 'c'] const iterator = arr.keys(); for (const key of iterator) { console.log(key); //0 1 2 }
/* 12.values方法: 定义:返回一个包含数组每个索引值的Array Iterator对象。 用法:arr.values() */ const arr = ['a', 'b', 'c'] const iterator = arr.values(); for (const value of iterator) { console.log(value);//a b c }
方法 | 返回值 | 是否改变原数组 | 指定函数是否需要return | 遍历元素个数 |
forEach | undefined | 否 | 否 | 所有元素 |
every | true/false | 否 | 是 | 所有元素 |
some | true/false | 否 | 是 | 满足条件 |
filter | 新数组 | 否 | 是 | 所有元素 |
map | 新数组 | 是 | 是 | 所有元素 |
reduce | 单个返回值 | 否 | 是 | 所有元素 |
reduceRight | 单个返回值 | 否 | 是 | 所有元素 |
find | 满足条件第一个元素 | 否 | 是 | 满足条件 |
findIndex | 满足条件第一个元素的索引 | 否 | 是 | 满足条件 |
6. 其他数组方法
数组扁平化:flat
flatMap
/* 1.flat方法: 定义:按照指定深度递归遍历数组,并将所有元素合并到一个新数组返回。 用法:arr.flat(depth) 参数:depth为深度,默认为1。 */ const arr = [1, 2, [3, 4, [5, 6]]]; let flat = arr.flat(Infinity) console.log(flat)//[1, 2, 3, 4, 5, 6]
/* 2.flatMap方法: 定义:使用指定函数映射每个元素,返回压缩后的新数组。该方法效果等同于flat深度为1。 用法:arr.flatMap(function(currentValue,index,array)) 参数:指定回调函数 */ const arr = [[2], [4], [6], [8]] let str = arr.flatMap((currentValue)=>{ return currentValue }) console.log(str)// [2, 4, 6, 8]