数据扁平化与反扁平化

个人理解

数据扁平化：将嵌套多层的数据转换成嵌套一层的数据；
数据反扁平化：将一层的数据转换成类似树结构的数据；

话不多说，直接上代码：

数据扁平化

方法一： 利用原型的isPrototypeOf()方法，用来检测一个对象是否存在于另一个对象的原型链中，如果存在就返回 true，否则就返回false；

let arr = [1,2,[3,4,5,[6,7,8,9]]]
let newArr = []
function fn(arr) {
	arr.forEach(item => {
		Array.prototype.isPrototypeOf(item) ? fn(item) : newArr.push(item)
	})
	return newArr
}
console.log(fn(arr))
// 运行结果： [1,2,3,4,5,6,7,8,9]

方法二： 使用Array.prototype.flat()方法，该方法创建一个新的数组，其中所有子数组元素以递归方式连接到指定的深度；

语法： arr.flat(depth)
arr：需要展平的数组
depth：可选参数，指定嵌套数组结构展平的深度级别，默认为1

let arr = [1,2,[3,4,5,[6,7,8,9]]]
console.log(arr.flat()) // [ 1, 2, 3, 4, 5, [ 6, 7, 8, 9 ] ]
console.log(arr.flat(1)) // [ 1, 2, 3, 4, 5, [ 6, 7, 8, 9 ] ] # 可以看出默认深度为1
console.log(arr.flat(2)) // [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(arr.flat(4)) // 当参数深度大于数组嵌套的层数，
// 默认也是将数组展平  [1, 2, 3, 4, 5, 6, 7, 8, 9]

方法三： 使用reduce处理

let arr = [ [0, 1], [2, 3], [4, [5, 6, 7]]]
function fn(arr) {
	return arr.reduce((pre,cur) => {
		return pre.concat(Array.isArray(cur) ? fn(cur) : cur)
	},[])
}
console.log(fn(arr)) // [0,1,2,3,4,5,6,7]

方法四： 运用toString()、split() 及toString()三个语法来进行扁平化数据。（缺陷：string类型的数字被转换成number类型了）

let arr = [[0,1], [2, 3], [4, 5, 'q', 'w', 'e', 'r'] ]
let newArr = []
newArr = arr.toString().split(',').map(item => {
	if(Number(item).toString() === 'NaN') return item
	return Number(item)
})
console.log(newArr)

常见的树形结构数据案例：

	let tree = [
        {
            id: 1,
            name: "1",
            pid: 0,
            children: [
                {
                    id: 2,
                    name: "2",
                    pid: 1,
                    children: []
                },
                {
                    id: 3,
                    name: "3",
                    pid: 1,
                    children: [
                        {
                            id: 4,
                            name: "4",
                            pid: 3,
                            children: []
                        }
                    ]
                }
            ]
        }
    ]
    function treeToArray(tree) {
        return tree.reduce((res, item) => {
            const { children, ...i } = item
            return res.concat(i, children && children.length ? treeToArray(children) : [])
        }, [])
	}
	console.log(treeToArray(tree))
	// [
	//     {id: 1, name: '1', pid: 0},
	//     {id: 2, name: '2', pid: 1},
	//     {id: 3, name: '3', pid: 1},
	//     {id: 4, name: '4', pid: 3}
	// ]

反扁平化

	let tree = [
	    {id: 1, name: '1', pid: 0},
	    {id: 2, name: '2', pid: 1},
	    {id: 3, name: '3', pid: 1},
	    {id: 4, name: '4', pid: 3}
	]
    function fn(tree) {
        let tree1 = {}
        let flatArr = tree.map(item => {
            item.children = tree.filter(val => val.pid == item.id)
            if(item.pid == 0) return item
            else return
        })
        return flatArr.filter(item => item != undefined)
    }
    console.log(fn(tree))
    //  [
    //     {
    //         id: 1,
    //         name: "1",
    //         pid: 0,
    //         children: [
    //             {
    //                 id: 2,
    //                 name: "2",
    //                 pid: 1,
    //                 children: []
    //             },
    //             {
    //                 id: 3,
    //                 name: "3",
    //                 pid: 1,
    //                 children: [
    //                     {
    //                         id: 4,
    //                         name: "4",
    //                         pid: 3,
    //                         children: []
    //                     }
    //                 ]
    //             }
    //         ]
    //     }
    // ]

以上只是个人平时学习时记录的方法，如果大家有更好的方法，记得分享给我哈，谢谢！