数组扁平化技巧-JavaScript (数组扁平化技术是什么)
注释
在Script的日经常常使用中,处置多层嵌套数组是一项经常出现义务。浏览下文,探求几种将多维数组转换为一维数组的方法,每种方法都有其共同之处。
方法一:forEach和push
数组扁平化的基本思绪是将多维数组开展为一维数组。第一种方法驳回经典的递归思维:遍历数组中的每个元素,判别能否为数组。假设不是数组,则将元素push到结果数组中;假设是数组,则对该数组元素启动递归处置。代码示例如下:
function_flat(targetArray,contner=[]){if(!Array.isArray(targetArray))returncontainer;targetArray.forEach(item=>{if(!Array.isArray(item)){container.push(item);}else{_flat(item,container);}});returncontainer;}constrst=_flat([[[[[[1],2],3],4],5,6],7]);console.log('rst:',rst);
![javascript](https://tyye.cn/zb_users/theme/tpure/style/images/lazyload.png)
方法二:Array.prototype.flat
近年来,ES6新增了Array.prototype.flat方法,旨在简化扁平化操作。关于该方法,了解其上班原理意义严重。它自动只会拆解一层嵌套数组。经过循环调用直到无法开展为止,咱们可以获取齐全扁平化的数组。
function_flat2(targetArray){if(!Array.isArray(targetArray))return[];let_loop=targetArray;while(true){constbeforeFlat=_loop.length;const_Arr=_loop.flat();constafterFlat=_Arr.length;if(beforeFlat===afterFlat)return_Arr;_loop=_Arr;}}constrst2=_flat2([[[[[[1],2],3],4],5,6],7]);console.log('rst2:',rst2);
方法三:findIndex和splice
第三种方法应用了Array.prototype.findIndex以及Array.prototype.splice。首先找到数组中第一个还未开展的数组元素,而后经常使用splice将其开展。这种方法会更改原数组。
function_flat3(targetArray){if(!Array.isArray(targetArray))return[];while(true){constarrItemIndex=targetArray.findIndex(item=>Array.isArray(item));if(arrItemIndex===-1)returntargetArray;targetArray.splice(arrItemIndex,1,...targetArray[arrItemIndex]);}}constrst3=_flat3([[[[[[1],2],3],4],5,6],7]);console.log('rst3:',rst3);
方法四:stack
经常使用栈的数据结构可以好像环节中的遍历。详细操作是:将源数组全体入栈,而后逐个出栈,审核能否为数组。若是数组则开展后继续入栈;若不是则入另一个栈存储结果。这种方法实质上与递归相反,但经常使用栈可以降落操作复杂度。
function_flat4(targetArray){if(!Array.isArray(targetArray))return[];consta=[...targetArray];constb=[];while(a.length){const_tmp=a.pop();if(Array.isArray(_tmp)){a.push(..._tmp);}else{b.push(_tmp);}}returnb;}constrst4=_flat4([[[[[[1],2],3],4],5,6],7]);console.log('rst4:',rst4);
方法五:toString和split
这种思绪应用了数组的toString方法,该方法会将数组转换为由逗号分隔的字符串,而后经常使用split方法获取结果数组。
constarr=[1,[2,3],4,[[5]]];constrst=arr.toString().split(',').map(item=>+item);
toString()方法的一个幽默个性是,它可以将多层嵌套的数组转换成一个由逗号分隔的扁平化字符串。在字符串外形下,数组中各元素之间的嵌套结构消息失落,仅保管了元素值。例如,一个像[1,[2,[3,[4]]]]的数组,经过toString()方法处置后,就会变成"1,2,3,4"。这正是咱们希冀的一维外形,只不过是以字符串的方式存在。
但这还不是完整的处置方法。字符串虽然扁平化了,但数组还未构成。这时split(',')方法派上了用场。它依据逗号分隔符将字符串再次转换为数组,由于原始的嵌套结构曾经被toString()方法抹除,结果数组就是一个齐全扁平的数组。最后,为了确保数组中的元素类型正确(由于split()会将每个元素当作字符串),可以经常使用map()方法将每个字符串元素转换成其原始类型。
constarr=[1,[2,3],4,[[5]]];constrst=arr.toString().split(',').map(item=>+item);
在下面的代码中,+item是一个极速的技巧,用于将字符串转换为数字。
方法六:JSON.stringify
JSON.stringify和JSON.parse是一对弱小的方法,可以用来序列化和解析数据。在JavaScript中,这对方法经常被用来启动深拷贝操作,但它们雷同可以用来启动数组的扁平化。
其外围现实是:首先经常使用JSON.stringify将多维数组转换为字符串方式,同时坚持了数组元素之间的逗号分隔。这时,嵌套数组被转换成了括号和逗号的组合。接上去,经过正则表白式.replace(/$|$/g,"")移除字符串中一切的中括号[],剩下的就只要逗号以及数字。最后,经过JSON.parse将处置后的字符串从新构形成JavaScript数组。
constarr=[1,[2,3],4,[[5]]];constres=JSON.stringify(arr).replace(/$|$/g,"");const_a=JSON.parse("["+res+"]");
这种方法的妙处在于经常使用了JSON对象的序列化和解析才干,从而简化了扁平化操作。须要留意的是,由于JSON.stringify会将数组中的一切内容(包含数字、字符串、布尔值及null)序列化为字符串,所以在经常使用这种方法时,应保障数组外部不含有除上述类型之外的元素(比如函数或循环援用),由于这些无法经过JSON.stringify正确序列化。
在把握了这些方法后,便可以依据详细状况选用适合的扁平化方法。每种方法都有其实用场景和性能考量。把握这些技巧,你就可以愈加自若地处置JavaScript中的数组扁平化疑问。
免责声明:本文转载或采集自网络,版权归原作者所有。本网站刊发此文旨在传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及版权、内容等问题,请联系本网,我们将在第一时间删除。同时,本网站不对所刊发内容的准确性、真实性、完整性、及时性、原创性等进行保证,请读者仅作参考,并请自行核实相关内容。对于因使用或依赖本文内容所产生的任何直接或间接损失,本网站不承担任何责任。