js中实现数组扁平化的6种方案
前言
日常开发过程中，可能后端接口返回的数据结构不符合我们的预期结构，这个时候我们就要自己处理数据结构实现扁平化，而且扁平化数组也是面试中的常考考题，话不多说，让我们看看数组扁平化的方案。
什么是扁平化
数组的扁平化其实就是将一个嵌套多层的数组 Array（嵌套可以是任何层数）转换为只有一层的数组。
举个栗子：一个数组为：[1,[2,3],[4,[5,[6，7]]]]，扁平化后会得到[1,2,3,4,5,6,7]这样的数组
扁平化的6种方案
1.普通递归实现
const arrNum = [1, [2, 3], [4, [5, 6, 7]]]
//第一种递归实现
function flattenLoop(arr) {
let result = []
for (var i = 0; i < arr.length; i++) {
if (Array.isArray(arr[i])) {
result = result.concat(flattenLoop(arr[i]))
} else {
result.push(arr[i])
}
}
return result
}
console.log(flattenLoop(arrNum)) // [1, 2, 3, 4，5, 6, 7]
2.reduce迭代实现
-
reduce() 方法对数组中的每个元素按序执行一个reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。 -
第一次执行回调函数时，不存在“上一次的计算结果”。如果需要回调函数从数组索引为 0 的元素开始执行，则需要传递初始值。否则，数组索引为 0 的元素将被作为初始值 initialValue，迭代器将从第二个元素开始执行（索引为 1 而不是 0）。
const arrNum = [1, [2, 3], [4, [5, 6, 7]]]
function flattenReduce(arr) {
return arr.reduce((prev, current) => {
return prev.concat(
Array.isArray(current) ? flattenReduce(current) : current
)
},[])
}
console.log(flattenReduce(arrNum)) // [1, 2, 3, 4，5, 6, 7]
3.扩展运算符实现
const arrNum = [1, [2, 3], [4, [5, 6, 7]]]
function flatten(arr) {
// while (arr.some((item) => Array.isArray(item))) {
// arr = [].concat(...arr)
// }
for (let index = 0; index < arr.length; index++) {
const element = arr[index]
if (Array.isArray(element)) {
arr = [].concat(...arr)
}
}
return arr
}
console.log(flatten(arrNum)) // [1, 2, 3, 4，5, 6, 7]
4.split 和 toString 共同处理
const arrNum = [1, [2, 3], [4, [5, 6, 7]]]
function flattenByString(arr) {
return arr.toString().split(',').map(item => Number(item))
}
console.log(flattenByString(arrNum)) // [1, 2, 3, 4，5, 6, 7]
5.flat方法
-
flat() 方法是ES10提供的会按照一个可指定的深度(默认为1)递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。 -
参数使用 Infinity（Infinity 是一个数值，表示无穷大），可展开任意深度的嵌套数组
const arrNum = [1, [2, 3], [4, [5, 6, 7]]]
function flatten(arr) {
return arr.flat(Infinity)
}
console.log(flatten(arrNum)) // [1, 2, 3, 4，5, 6, 7]
6.正则和 JSON 方法共同处理
const arrNum = [1, [2, 3], [4, [5, 6, 7]]]
function flatten(arr) {
let str = JSON.stringify(arr);
str=str.replace(/([|])/g,'')
str='[' + str + ']'
return JSON.parse(str)
}
console.log(flatten(arrNum)) // [1, 2, 3, 4，5, 6, 7]
总结
-
第1-3种方案实质上通过不同的循环遍历的方式，通过对数组的元素判断属性是否是数组，来确定是否要进行递归处理，最后把是数组类型的元素展开，最终拼接为一个数组进行返回
-
第4种方案的toString()可把数组转换为字符串，并返回结果，然后使用字符串的split方法进行分割成为数组
-
第5种的flat()方法是ES10提供的，也是目前项目中常见的最简单的拍平数组的方式
-
第6种方案先将 数组转换为JSON字符串，对字符串中的中括号（[]）进行替换，最后再将JSON字符串转换JSON对象
文章出自：https://juejin.cn/post/7131927601592926239
作者：Trap_
原文始发于微信公众号（前端24）：js中实现数组扁平化的6种方案
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/216826.html
