在实际的工作和业务需求中，我们经常会碰到树形数据结构，比如公司组织架构、组织层级、省市县或者事物的分类等等数据。那么在JavaScript中如何将数组转为树形结构和树形结构转为数组，本文就详细的来探究一下。
先来看看给出了一组怎样的数据，转换为怎样的树形结构。
后台接口返回或者面试官给你的数据：
期望的处理后的数据：
如果后台给了一个这样的数据说让前端自己去转换为树形结构或者面试官给你一组这样的数据让你手写一个转换方法，你会怎么处理？
1、递归实现
2、Map对象实现
3、filter实现
这种方法很有意思，可能大多数人想不到，也是从大佬处学到的(读书人的是怎么能叫抄呢，应该叫“窃”）。
1、reduce取树行数据的所有子集
2、递归实现
3、广度优先遍历法
// 将树数据转换一维数组
treeDataToCompressed(source) { // source树形数据
for (const i in source) {
this.res.push(source[i])
source[i].children && source[i].children.length > 0
? this.treeDataToCompressed(source[i].children)
: "" // 子级递归
}
return this.res
},
// 树形数据获取一维数组的ID集合
flatten(array = []) {
// console.log(array)
return [].concat(
...array.map(item =>
[].concat(item.id, this.flatten(item.children || []))
)
)
},
/**
* 将base64的数据转换成一个Blob对象
* @param {Object} b64Data base64数据
* @param {Object} contentType 数据类型
* @param {Object} sliceSize 分片大小
*/
function b64toBlob(b64Data, contentType, sliceSize) {
let b = b64Data.toString()
b64Data = b.split(',')[1]
var byteCharacters =atob(b64Data)
var byteArrays = []
for (let offset =0offset <byteCharacters.lengthoffset += sliceSize) {
var slice = byteCharacters.slice(offset, offset + sliceSize)
var byteNumbers =new Array(slice.length)
for (let i =0i <slice.lengthi++) {
byteNumbers[i] = slice.charCodeAt(i)
}
var byteArray =new Uint8Array(byteNumbers)
byteArrays.push(byteArray)
}
var blob =new Blob(byteArrays, {type: contentType})
return blob
}
/**
* 将Blob对象转换为file对象
* @param {Object} theBlob blob对象
* @param {Object} fileName 文件名称
*/
function blobToFile(theBlob,fileName) {
theBlob.lastModifiedDate =new Date()
theBlob.name = fileName
return theBlob
}
// 创建一个reader
let reader =new FileReader()
// 将图片转成 base64 格式
reader.readAsDataURL(file)
/**
* 将base64转换为文件
* @param dataurl base64格式数据
* @param filename 文件名
* @param filetype 文件类型
* @returns {File} 二进制流文件
*/
function dataURLtoFile(dataurl,filename,filetype) {
var arr = dataurl.split(","),
bstr =atob(arr[1]),
n = bstr.length,
u8arr =new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new File([u8arr], filename, {
type: filetype
})
}
