「这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战」
写在前面
今天是我写的第二篇文章 . 继上次写了改Bug的血泪分享史 . 个人感觉不管是什么类型的bug,都需要咱们有一个精准定位Bug 的能力 . 这种能力,不仅仅是经验上的积累,更多的还是你对基础的知识点是否足够了解.
因此,我打算最近开始分享一些自己每天学到的JS知识点.(也算是每天进步一点点)
今天分享的是数组扁平化的处理 . 很多时候,开发的过程中,会遇到后端返回的数据里,充斥着[12,[2],[3],12,{arr:[323]}] ...类似于这种乱糟糟的数据格式 . 有时候,咱们前端处理起来,真的是头皮发麻.
这时候,其实我们可以通过数组扁平化,对这些数据进行一个初步的处理(具体场景,咱们再具体分析)
其实扁平化的方式有很多种.我们可以根据代码长度进行讲解(从多到少)
1.递归(循环套循环)
首先,咱们第一想到的,肯定是递归的方法,循环嵌套循环,这种我个人感觉也是最损耗性能的一种方法.
不过我刚开始工作的时候,确实尝试过用递归的方式去做处理
let initArr = [];
const arrEvent = function(arr){
for(let item of arr){
// Array.isArray 顾名思义,判断数据类型是否是数组
if(Array.isArray(item)){
arrEvent(item)
}else{
initArr.push(item)
}
}
return initArr}
2.使用reduce的方法
//3.使用reduce （reduce的知识点）
//注：reduce：数组的方法，有两个参数，第一个参数是一个操作的函数方法fun，第二个参数是fun中的初始值
//函数fun中又有4个参数，
//第一个参数是初始值或者fun返回的结果，
//第二个参数是当前处理的数组
//第三个参数是处理的索引
//第四个参数是回调
const flatArr = (arr) =>{
return arr.reduce(function (pre,cur) {
return pre.concat(Array.isArray(cur)?flatArr(cur):cur)
},[])}
上面就是先将初始值设置为一个空数组,然后再去concat.其实我觉得这个方法,性能上和递归好一些,不过reduce 这个函数,确实还有很多其他应用场景. 以后会具体的写一篇关于reduce 的方法
3.使用正则 （正则的知识点）
const res3 = JSON.parse('[' + JSON.stringify(arr).replace(/\[|\]/g, '') + ']')
正则大多时候,我都是面向百度去查,因为大多数需要用到正则的地方,百度上都有 .所以之前一直觉得没有必要去学习.
但是后来,随着业务的复杂度不断的加深,发现正则不仅仅说是面试常问,更多的时候,有些特殊需要处理,且并不常见的正则判断,百度上根本没有.
所以正则这玩意,可以不用,但还是得会
4.使用Flat
[1,[3,[3]]].flat(n)
其实flat的参数是一个数字或者Infinity
你想给数组进行降几维的处理,参数n你就可以传数字几,但是如果说,你想彻底扁平化,直接可以传Infinity .
我觉得flat 的方法,是最灵活的 .
