js樹形結(jié)構(gòu)數(shù)組扁平化 1. 樹形結(jié)構(gòu) ---- > 扁平化數(shù)據(jù)

一、樹形結(jié)構(gòu) ---- > 扁平化數(shù)據(jù) （數(shù)據(jù)）

const newData: any = [
		{
			"id": "1",
			"pId": null,
			"title": "長(zhǎng)期",
			"ywid": true,
			"children": [
				{
					"id": "3",
					"pId": "2",
					"title": "短期",
					"children": [],
					"origin": null,
					"parentId": "2",
					"projectId": "1BD75301A441F0419098AEFA0129A9B4",
					"state": "0",
					"name": "長(zhǎng)貸",
					"financeType": null,
					"shareholderName": "魅力公司",
					"shareholderType": "0",
					"ownershipRatio": null,
					"expectedTotalAmount": 1000,
					"planTotalAmount": 900,
					"remark": "備注",
					"isAllowDel": "0",
					"orderNo": "1.1",
					"value": "3",
					"key": "3",
					"pid": "2",
					"isLeaf": false
				},
				{
					"id": "4",
					"pId": "2",
					"title": "短期",
					"children": [],
					"origin": null,
					"parentId": "2",
					"projectId": "1BD75301A441F0419098AEFA0129A9B4",
					"state": "0",
					"name": "短期",
					"financeType": null,
					"shareholderName": "魅力公司",
					"shareholderType": "0",
					"ownershipRatio": null,
					"expectedTotalAmount": 1000,
					"planTotalAmount": 900,
					"remark": "備注",
					"isAllowDel": "0",
					"orderNo": "1.2",
					"value": "4",
					"key": "4",
					"pid": "2",
					"isLeaf": false
				}
			],
			"origin": null,
			"parentId": null,
			"projectId": "1BD75301A441F0419098AEFA0129A9B4",
			"state": "0",
			"name": "金期",
			"financeType": null,
			"shareholderName": "魅力公司",
			"shareholderType": "0",
			"ownershipRatio": null,
			"expectedTotalAmount": 1000,
			"planTotalAmount": 900,
			"remark": "備注",
			"isAllowDel": "0",
			"orderNo": "1",
			"value": "1",
			"key": "1",
			"pid": null,
			"isLeaf": true,

		},
		{
			"id": "2",
			"pId": null,
			"title": "國(guó)金",
			"ywid": true,
			"children": [
				{
					"id": "3",
					"pId": "2",
					"title": "長(zhǎng)期",
					"children": [],
					"origin": null,
					"parentId": "2",
					"projectId": "1BD75301A441F0419098AEFA0129A9B4",
					"state": "0",
					"name": "長(zhǎng)期",
					"financeType": null,
					"shareholderName": "魅力公司",
					"shareholderType": "0",
					"ownershipRatio": null,
					"expectedTotalAmount": 1000,
					"planTotalAmount": 900,
					"remark": "備注",
					"isAllowDel": "0",
					"orderNo": "2.1",
					"value": "3",
					"key": "3",
					"pid": "2",
					"isLeaf": false
				},
				{
					"id": "4",
					"pId": "2",
					"title": "短期",
					"children": [],
					"origin": null,
					"parentId": "2",
					"projectId": "1BD75301A441F0419098AEFA0129A9B4",
					"state": "0",
					"name": "短期",
					"financeType": null,
					"shareholderName": "魅力公司",
					"shareholderType": "0",
					"ownershipRatio": null,
					"expectedTotalAmount": 1000,
					"planTotalAmount": 900,
					"remark": "備注",
					"isAllowDel": "0",
					"orderNo": "2.2",
					"value": "4",
					"key": "4",
					"pid": "2",
					"isLeaf": false
				}
			],
			"origin": null,
			"parentId": null,
			"projectId": "1BD75301A441F0419098AEFA0129A9B4",
			"state": "0",
			"name": "國(guó)金",
			"financeType": null,
			"shareholderName": "魅力公司",
			"shareholderType": "0",
			"ownershipRatio": null,
			"expectedTotalAmount": 1000,
			"planTotalAmount": 900,
			"remark": "備注",
			"isAllowDel": "0",
			"orderNo": "2",
			"value": "2",
			"key": "2",
			"pid": null,
			"isLeaf": false
		},
		{
			"id": "5",
			"pId": null,
			"title": "利用金",
			"ywid": true,
			"children": [
				{
					"id": "3",
					"pId": "2",
					"title": "長(zhǎng)期",
					"children": [],
					"origin": null,
					"parentId": "2",
					"projectId": "1BD75301A441F0419098AEFA0129A9B4",
					"state": "0",
					"name": "長(zhǎng)期",
					"financeType": null,
					"shareholderName": "魅力公司",
					"shareholderType": "0",
					"ownershipRatio": null,
					"expectedTotalAmount": 1000,
					"planTotalAmount": 900,
					"remark": "備注",
					"isAllowDel": "0",
					"orderNo": "2.1",
					"value": "3",
					"key": "3",
					"pid": "2",
					"isLeaf": false
				}
			],
			"origin": null,
			"parentId": null,
			"projectId": "1BD75301A441F0419098AEFA0129A9B4",
			"state": "0",
			"name": "利用金",
			"financeType": null,
			"shareholderName": "魅力公司",
			"shareholderType": "0",
			"ownershipRatio": null,
			"expectedTotalAmount": 1000,
			"planTotalAmount": 900,
			"remark": "備注",
			"isAllowDel": "0",
			"orderNo": "3",
			"value": "5",
			"key": "5",
			"pid": null,
			"isLeaf": true
		},
		{
			"id": "6",
			"pId": null,
			"title": "其他金",
			"ywid": true,
			"children": [],
			"origin": null,
			"parentId": null,
			"projectId": "1BD75301A441F0419098AEFA0129A9B4",
			"state": "0",
			"name": "其他金",
			"financeType": null,
			"shareholderName": "魅力公司",
			"shareholderType": "0",
			"ownershipRatio": null,
			"expectedTotalAmount": 1000,
			"planTotalAmount": 900,
			"remark": "備注",
			"isAllowDel": "0",
			"orderNo": "4",
			"value": "6",
			"key": "6",
			"pid": null,
			"isLeaf": true
		}
	]

二、代碼如下

1.引入庫(kù)

1.代碼如下（數(shù)據(jù)扁平化1示例）：

/**
 * 獲取當(dāng)前節(jié)點(diǎn)的所有父節(jié)點(diǎn)
 * @param list 
 * @param current 
 * @returns 
 */

const findParentId = (list, current) => {
    const res:string[] = [];
    function find(list, id) {
        list.forEach(item => {
            if (item.key === id) {
                res.unshift(id)
                if (item.parentId) {
                    find(list, item.parentId)
                }
            }
        });
    }
    find(list, current)
    return res
}

	/**
 * 數(shù)據(jù)扁平化
 * @param list 
 * @returns 
 */
	const flatTreeData = (list) => {
		const res: any = []
		function getData(list) {
			list.forEach(item => {
				res.push(item);
				if (item.children) {
					getData(item.children)
				}
			})
		}
		getData(list)
		return res
	}

	const a = flatTreeData(newData)
	console.log(a,"數(shù)據(jù)扁平化1")
/**
 * 將選中節(jié)點(diǎn)的父節(jié)點(diǎn)合并到選中節(jié)點(diǎn)中去
 * @param list 
 * @param selected 
 * @returns 
 */
const handleSelectedData = (list, selected)=>{
    const res:any[] = []
    const data= flatTreeData(list)
    selected.forEach(id=>{
        const items = findParentId(data,id)
       
        res.push(...items)
    })
    return Array.from(new Set(res))
}

2.代碼如下（數(shù)據(jù)扁平化2示例）：

	/**
 * 數(shù)據(jù)扁平化
 * @param source 
 * @returns 
 */
	const fn = (source)=>{
		let res:any = []
		source.forEach(el=>{
			res.push(el)
			el.children && res.push(...fn(el.children))
		})
		return res
	}
	console.log(fn(newData),"數(shù)據(jù)扁平化2")

3.代碼如下（數(shù)據(jù)扁平化3示例）：

	/**
 * 數(shù)據(jù)扁平化
 * @param arr 
 * @returns 
 */
//用棧實(shí)現(xiàn)(非遞歸)
	function flapvalue(arr) {
		let stack: any = []
		let newArr: any = []   // 扁平結(jié)構(gòu)的數(shù)組
		for (let i = arr.length - 1; i >= 0; i--) {  // 倒序遍歷數(shù)組，push到棧中
			stack.push(arr[i])
		}
		while (stack.length) {
			let item = stack.pop()
			newArr.push(item)
			if (item.children) {
				let children = item.children
				for (let i = children.length - 1; i >= 0; i--) {
					stack.push(children[i])
				}
			}
		}
		return newArr
	}
	console.log(flapvalue(newData),'數(shù)據(jù)扁平化3')

4.代碼如下（數(shù)據(jù)扁平化4示例）：文章來源地址http://www.zghlxwxcb.cn/news/detail-515504.html

	/**
 * 數(shù)據(jù)扁平化
 * @param tree
 * @returns 
 */
	function treeToArray(tree) {
		var res:any = []
		for (const item of tree) {
		  const { children, ...i } = item
		  if (children && children.length) {
			res = res.concat(treeToArray(children))
		  }
		  res.push(i)
		}
		return res
	  }
	  console.log(treeToArray(newData),'數(shù)據(jù)扁平化4')

到了這里，關(guān)于js樹形結(jié)構(gòu)數(shù)組扁平化的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！