【前端面试:手写js系列】flat---数组扁平化

JavaScript014

【前端面试:手写js系列】flat---数组扁平化,第1张

数组扁平化定义:在前端项目开发过程中,偶尔会出现层叠数据结构的数组,需要把多层数组转换为一级数组(即提取嵌套数组元素最终合并为一个数组),使其内容合并并且展开。

遍历数组的方案:

for循环

for...of

for...in

forEach()

entries()

keys()

values()

reduce()

map()

判断元素是否是数组的方案:

instanceof

constructor

object.prototype.toString.call

isArray

将数组元素进行展开一层的方案:

扩展运算法 + concat(concat() 方法用于合并两个或多个数组,在拼接的过程中加上扩展运算符会展开一层数组)

concat + apply(主要是利用 apply 在绑定作用域时,传入的第二个参数是一个数组或者类数组对象,其中的数组元素将作为单独的参数传给 func 函数。也就是在调用 apply 函数的过程中,会将传入的数组一个一个的传入到要执行的函数中,也就是相当对数组进行了一层的展开。)

toString + split(不推荐使用 toString + split 方法,因为操作字符串是很危险的事情,如果数组中的元素所有都是数字的话,toString + split 是可行的,并且是一步搞定。)

最终手写的flat()方法为:

参考博客如下,注明一下出处,感谢大神们,希望自己可以多多练习,多多回顾:

三元博客

JS数组reduce()方法详解及高级技巧

数组flat方法实现

所谓数组扁平就是将多维数组拍扁,变成一维数组,在面试中也是常常问到的问题,方法如下:

我们首先使用一个二维数组进行举例,更多维的操作一致

const array = [[1,2,3],4,[5,6]]

1.调用flat专门方法

array.flat(Infinity)//[1,2,3,4,5,6]

2.Array.from配合toString、split方法

const arr =  Array.from(new Set(array.toString().split(','))).sort((a,b)=>a-b)//[‘1’,'2','3','4','5','6']

3.利用map实现处理

const arr = array.join(',').split(',').map((item)=>{return parseInt(item)})//[1,2,3,4,5,6]

4.既然map可以,我reduce也可以

使用reduce+concat

const arr = array.reduce((pre,cur)=>{return pre.concat(cur)})//[1,2,3,4,5,6]

5.ES6扩展运算符

俗话说,扩展在手,数组不愁

const arr = [].concat(...array)//[1,2,3,4,5,6]

当然实际应用中多半会封装函数,因为直接应用只能降一维,但原理是一样的。目前想到的就这么多,有问题大家可以提出互相交流o( ̄ヘ ̄o#)

3.11添加一个对象扁平化方法

数组都写了,最近学了对象扁平化,看看面试用不用的上......

const obj={

  a:13,

  b:565,

  c:{d:'yo',e:3},

  f:[{g:true,h:5}],

  i:'911'

}

好像不能有空对象值,可以用Object.prototype.toString.call(null)来判断,空对象还是麻烦o(╯□╰)o

1、扁平化方法一(toString)

注意:如果arr数组中有空数组,不使用此方法,用下面的方法;同时得到数组的值是字符串,不是数字。

2、扁平化方法二(正则表达式)

3、扁平化方法三(遍历数组)

2、利用indexOf去重

3、利用includes

4、利用filter

1、 排序方法一:(sort方法)

2、排序方法二:(冒泡排序)

参考文件: https://blog.csdn.net/qq_42957741/article/details/103859601

参考文件: https://blog.csdn.net/qq_27626333/article/details/77966760