当前位置: 首页 > 科技观察

数组解析统计的5类22种方法

时间:2023-03-16 15:56:54 科技观察

JS是目前唯一几乎完全支持函数式编程的流行语言,而函数式编程的出发点就是处理数组。因此,我们先来盘点5类数组的22个方法。1、数组变换Transform(函数范式中的纯函数)首先列出了对数组变换进行无副作用操作的函数。1)reduce2)map3)flat4)flatMap5)fill6)forEach。其中forEach不是纯函数,而是一种隐式迭代方法,所以归类于此。//1.reducelettotal=[0,1,2,3].reduce((acc,cur)=>acc+cur,0);//2.mapconstmaped=[4,7,9,18].map(x=>x*2);//3.flatletarr2=[5,2,3].flat();//4.flatMap[5,8,9,6].flatMap(x=>[[x*2]]);//5.fill是一个非纯函数,但是因为它经常被用来构造迭代的范围,所以这里归类为Array(5).fill(0)//6.forEach是一个非纯函数,可以将其处理为map副作用问题的替代方案。['x','y','z'].forEach(el=>console.log(el));2、数组逻辑判断完逻辑谓词的六个方法(函数范式的纯函数),我们继续考察逻辑判断用到的高阶函数:1)filter2)find3)findIndex4)includes5)indexOf6)一些7)每个我们都可以建立我们自己的有用范围而不是。其中include是应用于元素的find,indexOf是应用于元素的findIndex。//1.filter[23,76,98,101].filter(v=>v>30&&v<100);//[76,98]//2.find只需要单个元素,使用find[23,76,98,101].find(v=>v>30&&v<100);//76//3.findIndex查找单个元素的索引[23,76,98,101].findIndex(v=>v>30&&v<100);//1//4.includes是find查找具体元素[23,76,98,101].includes(77)//false//5.indexOf是findIndex查找具体元素的索引,返回值是-1[23,76,98,101].indexOf(77)//-1//6.some[23,76,98,101].some(v=>v>30&&v<100)//true//7。every[23,76,98,101].every(v=>v>30&&v<100)//false3.非函数式数组变换(纯函数)以上两组12个函数都是函数式范式编程的纯函数。接下来,我们检查其他转换数组的纯函数。(纯函数是指没有side-effect副作用的函数):1)concat2)join3)slice4)splice(非纯函数会修改原数组,放在这里只是为了和slice做对比,提醒一下)//1.concat['x','y','z'].concat([9,8,7]);//2.join['x','y','z'].join(",");//3.slice['x','y','z'].slice(1,3);//4.splice放在第四组,这里只是提醒一下和切片比较。4、操作数据结构(非纯函数)数组可以作为两种抽象结构数据的载体:分别是栈和队列。1)push2)pop3)shift4)unshift5)splice(splice是一种特殊的方法,因为原来的数组已经改变了,放在这里)letarr=[23,76,98,101];//1.push元素分别加入Tail>arr.push(120)5>console.log(arr)[23,76,98,101,120]//2.pop上面push和pop的结合构建了一个栈数据结构。>arr.pop()120>arr[23,76,98,101]//3.shift从数组头部取出元素,结合push构建队列数据结构>arr.shift()23>arr[76,98,101]//4.unshift从数组头部开始添加元素>arr.unshift(59,145)5>arr[59,145,76,98,101]//5.splice是拼接数组的特殊方法>arr.splice(1,2,55,66,77,88)[145,76]>arr[59,55,66,77,88,98,101]5.数组排序(非纯函数)处处以排序结束,是否排序不管是reverse还是reverse都是直接在原数组上修改,也就是inplace操作。1)排序2)reverse//1.sort[23,76,98,101].sort((x,y)=>x-y)//2.reverse[23,76,98,101].reverse()六、思维导引图总结