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