概述
数字扁平化可能在日常的工作中会用到,下面有几种扁平化的方式,收集起来,方便之后使用
<script>
/**
方式一:使用原型的isPrototypeOf()方法,结合递归实现
isPrototypeOf() 用来检测一个对象是否存在于另一个对象的原型链中,如果存在就返回 true,否则就返回 false
如果存在于另一个对象的原型链中就继续调用方法 fn,如果不存在就直接push到用来存放的数组里面
***/
let arr = [1, 2, [3, ["小王", "小张"], 5, [6, 7, 8, 9]]]
function flattening(arr) {
let newArr = []
let fn = function (arrData) {
arrData.forEach(item => {
Array.prototype.isPrototypeOf(item) ? fn(item) : newArr.push(item)
})
}
fn(arr);
fn = null;
return newArr
}
console.log(flattening(arr))
/**
方式二:flat()
该方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
使用 Array.flat(depth)可以实现数组的扁平化
flat()的默认深度为1
**/
let arrTwo = [1, 2, [3, 4, 5, [6, 7, 8, 9, ["A", "B", "C", ["小王", "小张"]]]]]
console.log(arrTwo.flat()) // [ 1, 2, 3, 4, 5, [ 6, 7, 8, 9 ] ]
console.log(arrTwo.flat(1)) // [ 1, 2, 3, 4, 5, [ 6, 7, 8, 9 ] ]
//所以 可以看出 当flat() 未传递指定深度时,默认深度为 1
console.log(arrTwo.flat(2)) // 结果[1, 2, 3, 4, 5,6, 7, 8, 9]
//也可以直接传递 Infinity(无穷大) 实现数组的多层嵌套的扁平化
console.log(arrTwo.flat(Infinity));
/***
* 方式三:使用数组的reduce方法
*/
let arrThree = [
[0, 1],
[2, 3],
[4, 5]
]
let arrFour = [1, 2, [3, 4, 5, [6, 7, 8, 9, ["A", "B", "C", ["小王", "小张"]]]]]
//reduce实现二维数组扁平化
let newArrOne = arrThree.reduce((prev, cur) => {
return prev.concat(cur)
//数组 concat() 可以将两个数据合并到一个数组中,也可以将一个字符串合并到数组中去
}, [])
console.log(newArrOne);
//reduce结合递归 实现二维数组扁平化
function fn(arr) {
return arr.reduce((acc, cur) => {
return acc.concat(Array.isArray(cur) ? fn(cur) : cur)
}, [])
}
console.log(fn(arrFour));
/**
*
方式四:Es6的扩展运算符
**/
let arrFive = [
[0, 1],
[2, 3],
[4, 5]
]
let newArrOne = []
newArrOne = arrFive.concat(...arrFive)
//扩展运算符 会去掉第一层的 []
得到 [0, 1]、[2, 3]、[4, 5]
console.log(newArrOne) // [ 0, 1, 2, 3, 4, 5 ]
// 多维数组转化为一维数组:
let newArrSex = [[0, 1],[2, 3],[4, [5, 6, 7]], 8, [9] ,"A",["B","小王"]]
let newArrTwo = []
newArrSex.forEach(item => {
if (Array.isArray(item)) {
newArrTwo = newArrTwo.concat(...item)
} else {
newArrTwo.push(item)
}
})
console.log(newArrTwo) // 结果
</script>
最后
以上就是哭泣电灯胆为你收集整理的几种数组扁平化方式的全部内容,希望文章能够帮你解决几种数组扁平化方式所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复