竹笋

首页 » 问答 » 问答 » web前端培训数组扁平化实现方式
TUhjnbcbe - 2022/12/17 10:05:00

以下文章来源于前端界,作者芝士

面试常考的一道数组相关问题。

面试官:给你一个多层级的数组[1,[2,34,[12,4]],23],实现数组拍平都有哪些方法,可以把能想到的都说一下。

你:这个ES6不是提供了函数嘛,flatten,直接用它进行拍平就可以了

面试官:嗯嗯,除了这种还有其他的方式吗?或者让你自己实现

你:没有了,我都是直接这么用的

面试官:心理活动,你以为我不知道这个函数吗?难道我就想问你这个函数吗?基本第一道面试题的天已经聊死了。

其实面试官的目的不是难为你,而是想通过这样一道JavaScript面试题,考察你的JavaScript基础,如果你看完这篇文章,并把这6种拍平的函数理清楚,并把大致思路说出来,相信对于JavaScript基础这部分,面试官应该还是挺满意的。

接下来开始我们的学习

方式1:使用最基础的递归遍历方式

使用基础遍历的方式,然后遍历的item项是否为数组,如果是数组递归执行扁平化函数,并把执行的结果与之前contact,如果item项非数组,则直接将值push到最初定义的数组中

letarray=[1,[2,34,[12,4]],23];

functionflatten(array){

letresult=[]

for(constitemofarray){

if(Array.isArray(item)){

result=result.concat(flatten(item))

}else{

result.push(item)

}

}

returnresult

}

console.log(flatten(array))

方式2:使用reduce函数进行递归操作

functionflatten(array){

returnarray.reduce((pre,current,currentIndex,array)={

if(Array.isArray(current)){

returnpre.concat(flatten(current))

}else{

returnpre.concat(current)

}

},[])

}

方式3:while循环结合findIndex与扩展运算符

实现思路:使用while循环,循环判断条件,concat以后的数组中是否包含数组类型,如果包含然后使用...扩展运算符进行展开并合并

letarray=[1,[2,34,[12,4]],23]

functionflatten(array){

while(array.findIndex((item)=Array.isArray(item)0)){

array=[].concat(...array)

}

returnarray

}

console.log(flatten(array))

方式4:数组强制类型转换

实现思路:将数组进行强制类型转换,然后使用split分隔为数组,最后注意不要忘记转换为Number类型

functionflatten(array){

returnarray.toString().split(,).map(item=Number(item))//array.toString()转换后的结果1,2,34,12,4,23

}

console.log(flatten(array))

方式5:使用JSON的函数和正则表达式

实现思路:先使用JSON.stringify将数组进行转换,然后使用正则匹配去掉[],在最外层增加[],最后使用JSON.parse转换

letarray=[1,[2,34,[12,4]],23];

functionflatten(array){

letresult=JSON.stringify(array);//JSON.stringify转换后的结果[1,[2,34,[12,4]],23]

result=result.replace(/(\[

\])/g,);

result=[+result+];

returnJSON.parse(result)

}

console.log(flatten(array));

方式6:使用栈和扩展运算符的方式实现扁平化

实现思路:创建一个栈的结构,一个空数组,然后遍历栈结构,判断如果是数组,使用扩展运算符展开再次扔入栈中,如果不是就往新创建的数组头部增加

functionflatten(arr){

letres=[];

conststack=[].concat(arr);

console.log(哈哈哈,stack)

while(stack.length0){

console.log(stack.length,stack)

constitem=stack.pop();

if(Array.isArray(item)){

//用扩展运算符展开一层

stack.push(...item);

}else{

item!==undefinedres.unshift(item);

}

}

returnres;

}

console.log(flatten(array))

方式7:使用ES6中的flatten函数

实现思路:直接使用ES6提供的flatten函数实现扁平化flatten的语法是arr.flatten([depth])depth可以传递数组的展开深度,(默认不填时,数值是1),即展开一层数组。Infinity代表不论多少层都展开,同时也可以设置其他的整数,展开固定的层数

letarray=[1,[2,34,[12,4]],23]

functionflatten(array){

returnarray.flat(Infinity)

}

console.log(flatten(array))

讲完这几种方式,你会发现ES6提供的函数优雅啊,还提供了扁平化层数的参数,

1
查看完整版本: web前端培训数组扁平化实现方式