本篇文章你将学习到。
- 什么是树形结构
- 一维树形结构 与 多维树形结构 的相互转化。
- findTreeData，filterTreeData ，mapTreeData 等函数方法 帮助我们更简单的处理
多维树形结构
基础介绍
有很多小白开发可能不知道什么树形结构。这里先简单介绍一下。直接上代码一看就懂
一维树形结构
[
{ id: 1, name: `Node 1`, pId: 0 },
{ id: 2, name: `Node 1.1`, pId: 1 },
{ id: 4, name: `Node 1.1.1`, pId: 2 },
{ id: 5, name: `Node 1.1.2`, pId: 2 },
{ id: 3, name: `Node 1.2`, pId: 1 },
{ id: 6, name: `Node 1.2.1`, pId: 3 },
{ id: 7, name: `Node 1.2.2`, pId: 3 },
{ id: 8, name: `Node 2`, pId: 0 },
{ id: 9, name: `Node 2.1`, pId: 8 },
{ id: 10, name: `Node 2.2`, pId: 8 },
]
多维树形结构
[
{
id: 1,
name: `Node 1`,
children: [
{
id: 2,
name: `Node 1.1`,
children: [
{ id: 4, name: `Node 1.1.1`, children: [] },
{ id: 5, name: `Node 1.1.2`, children: [] },
],
},
{
id: 3,
name: `Node 1.2`,
children: [
{ id: 6, name: `Node 1.2.1`, children: [] },
{ id: 7, name: `Node 1.2.2`, children: [] },
],
},
],
},
{
id: 8,
name: `Node 2`,
children: [
{ id: 9, name: `Node 2.1`, children: [] },
{ id: 10, name: `Node 2.2`, children: [] },
],
},
]
咋一看一维树形结构可能会有点蒙，但是看一下多维树形结构想必各位小伙伴就一目了然了吧。这时候再回头去看一维树形结构想必就很清晰了。一维树形结构就是用pId做关联 来将多维树形结构给平铺了开来。
多维树形结构也是我们前端在渲染页面时经常用到的一种数据结构。但是后台一般给我们的是一维树形结构，而且一维树形结构 也非常有助于我们对数据进行增删改查。所以我们就要掌握一维树形结构和多维树形结构的相互转化。
前置规划
再我们进入一段功能开发之前，我们肯定是要设计规划一下，我们的功能架构。
配置项的添加
动态参数名
让我们看一下上面那个数组 很明显有三个属性 是至关重要的。id pId 和 children。可以说没有这些属性就不是树形结构了。但是后台给你的树形结构相关参数不叫这个名字怎么办？所以我们后续的函数方法就要添加一些配置项来动态的配置的属性名。例如这样
type TreeDataConfig = {
key?: string
parentKey?: string
childrenName?: string
isTileArray?: boolean
isSetPrivateKey?: boolean
}
const flattenTreeData = (treeData:any,config?: TreeDataConfig): T[] => {
}
key，parentKey，childrenName解决了我们上述的问题。想必你也发现了 除了这些 还有一些其他的配置项。
其他配置项
isTileArray：这个是设置后续的一些操作方法返回值是否为一维树形结构
isSetPrivateKey：这个就是我们下面要说的内容了，是否在节点中添加私有属性。
私有属性的添加
这里先插播一条小知识。可能有的小伙伴会在别人的代码中看到这样一种命名方式 _变量名下划线加变量名，这样就代表了这是一个私有变量。那什么是私有变量呢？请看代码
const name = '张三'
const fun = (_name) =>{
console.log(_name)
}
fun(name)
上述代码中函数的参数名我们就把他用_name 用来表示。_name就表示了 这个name属性是fun函数的私有变量。用于与外侧的name进行区分。下面我们要添加的私有属性亦是同理 用于与treeNode节点的其他属性进行区分。
请继续观察上面的两个树形结构数组。我们会发现多维树形结构的节点中并没有pId属性。这对我们的一些业务场景来说是很麻烦的。因此我们就内置了一个函数 来专门添加这些有可能非常有用的属性。 来更好的描述 我们当前节点在这个树形结构中的位置。
/**
* 添加私有属性。
* _pId 父级id
* _pathArr 记录了从一级到当前节点的id集合。
* _pathArr 的length可以记录当前是多少层
* @param treeNode
* @param parentTreeNode
* @param treeDataConfig
*/
const setPrivateKey = (treeNode,parentTreeNode, config) => {
const { key = `id` } = config || {}
item._pId = parentInfo?.[key]
item._pathArr = parentInfo?._pathArr ? [...parentInfo._pathArr, item[key]] : [item[key]]
}
一维树形结构 与 多维树形结构 的相互转化
一维树形结构转多维树形结构
const getTreeData = (tileArray = [], config) => {
const {
key = `id`,
childrenName = `children`,
parentKey = `pId`,
isSetPrivateKey = false,
} = config || {}
const fun = (parentTreeNode) => {
const parentId = parentTreeNode[key]
const childrenNodeList = []
copyTileArray = copyTileArray.filter(item => {
if (item[parentKey] === parentId) {
childrenNodeList.push({ ...item })
return false
}
else {
return true
}
})
parentTreeNode[childrenName] = childrenNodeList
childrenNodeList.forEach(item => {
isSetPrivateKey && setPrivateKey(item, parentTreeNode, config)
fun(item)
})
}
const rootNodeList = tileArray.filter(item => !tileArray.some(i => i[key] === item[parentKey]))
const resultArr = []
let copyTileArray = [...tileArray]
rootNodeList.forEach(item => {
const index = copyTileArray.findIndex(i => i[key] === item[key])
if (index > -1) {
copyTileArray.splice(index, 1)
const obj = { ...item }
resultArr.push(obj)
isSetPrivateKey && setPrivateKey(obj, undefined, config)
fun(obj)
}
})
return resultArr
};
多维树形结构转一维树形结构
const flattenTreeData = (treeData = [], config) => {
const { childrenName = `children`, isSetPrivateKey = false } = config || {};
const result = [];
const fun = (_treeData, parentTreeNode) => {
_treeData.forEach((treeNode) => {
isSetPrivateKey && setPrivateKey(treeNode, parentTreeNode, config);
result.push(treeNode);
if (treeNode[childrenName]) {
fun(treeNode[childrenName], treeNode);
}
});
};
fun(treeData);
return result;
};
处理多维树形结构的函数方法
在开始的基础介绍中我们有提到过一维树形结构 有助于我们对数据进行增删改查。因为一维的树形结构可以很容易的使用的我们数组内置的一些 find filter map 等方法。这几个方法不知道小伙伴赶紧去补一补这些知识吧 看完了再回到这里。传送门
下面我们会介绍 findTreeData，filterTreeData ，mapTreeData 这三个方法。使用方式基本和find filter map原始数组方法一样。也有些许不一样的地方：
- 因为我们不是直接把方法绑定在原型上面的 所以不能直接
arr.findTreeData 这样使用。需要findTreeData (arr) 把多维树形结构数组当参数传进来。 - callBack函数参数返回有些许不同 。前两个参数一样 第三个参数为父级的详情 没有父级的返回undefined。
- filterTreeData ，mapTreeData方法我们可以通过配置项中的isTileArray属性来设置返回的是
一维树形结构还是多维树形结构
findTreeData
const findTreeData = (treeData = [], callBack, config, parentTreeNode) => {
const { childrenName = `children`, isSetPrivateKey = false } = config || {};
for (const treeNode of treeData) {
if (isSetPrivateKey) {
setPrivateKey(treeNode, parentTreeNode, config);
}
if (callBack?.(treeNode, treeData.indexOf(treeNode), parentTreeNode)) {
return treeNode;
}
if (treeNode[childrenName]) {
const dataInfo = findTreeData(treeNode[childrenName], callBack, config, treeNode);
if (dataInfo) {
return dataInfo;
}
}
}
};
filterTreeData
const filterTreeData = (treeData = [], callBack, config) => {
const { childrenName = `children`, isTileArray = false, isSetPrivateKey = false } = config || {};
const resultTileArr = [];
const fun = (_treeData, parentTreeNode) => {
return _treeData.filter((treeNode, index) => {
if (isSetPrivateKey) {
setPrivateKey(treeNode, parentTreeNode, config);
}
const bool = callBack?.(treeNode, index, parentTreeNode)
if (treeNode[childrenName]) {
treeNode[childrenName] = fun(treeNode[childrenName], treeNode);
}
if (bool) {
resultTileArr.push(treeNode);
return true;
} else {
return treeNode[childrenName] && treeNode[childrenName].length;
}
});
};
const resultArr = fun(treeData);
return isTileArray ? resultTileArr : resultArr;
};
mapTreeData
const mapTreeData = (treeData = [], callBack, config) => {
const { childrenName = `children`, isTileArray = false, isSetPrivateKey = false } = config || {}
const resultTileArr = []
const fun = (_treeData, oldParentTreeNode, newParentTreeNode) => {
return _treeData.map((treeNode, index) => {
isSetPrivateKey && setPrivateKey(treeNode, oldParentTreeNode, config)
const callBackInfo = callBack?.(treeNode, index, oldParentTreeNode, newParentTreeNode)
if (isTileArray) {
resultTileArr.push(callBackInfo)
}
const mappedTreeNode = {
...treeNode,
...callBackInfo,
}
if (treeNode?.[childrenName]) {
mappedTreeNode[childrenName] = fun(treeNode[childrenName], treeNode, mappedTreeNode)
}
return mappedTreeNode
})
}
const resultArr = fun(treeData)
return isTileArray ? resultTileArr : resultArr
};
ts版本代码
type TreeDataConfig = {
key?: string
parentKey?: string
childrenName?: string
isTileArray?: boolean
isSetPrivateKey?: boolean
}
type TreeNode = {
_pId?: string | number
_pathArr?: Array
}
const setPrivateKey = (
treeNode: T & TreeNode,
parentTreeNode: (T & TreeNode) | undefined,
config?: TreeDataConfig
) => {
const { key = `id` } = config || {}
treeNode._pId = parentTreeNode?.[key]
treeNode._pathArr = parentTreeNode?._pathArr
? [...parentTreeNode._pathArr, treeNode[key]]
: [treeNode[key]]
}
type FindTreeData = (
treeData?: readonly T[],
callBack?: (treeNode: T, index: number, parentTreeNode?: T) => boolean,
config?: TreeDataConfig,
parentTreeNode?: T
) => (T & TreeNode) | undefined
export const findTreeData: FindTreeData = (treeData = [], callBack, config, parentTreeNode) => {
const { childrenName = `children`, isSetPrivateKey = false } = config || {}
for (const treeNode of treeData) {
isSetPrivateKey && setPrivateKey(treeNode, parentTreeNode, config)
if (callBack?.(treeNode, treeData.indexOf(treeNode), parentTreeNode)) {
return treeNode
}
if (treeNode[childrenName]) {
const dataInfo = findTreeData(treeNode[childrenName], callBack, config, treeNode)
if (dataInfo) {
return dataInfo
}
}
}
}
export const filterTreeData = (
treeData: readonly T[] = [],
callBack?: (treeNode: T, index: number, parentTreeNode?: T) => boolean,
config?: TreeDataConfig
): (T & TreeNode)[] => {
const { childrenName = `children`, isTileArray = false, isSetPrivateKey = false } = config || {}
const resultTileArr: T[] = []
const fun = (_treeData: readonly T[], parentTreeNode?: T): T[] => {
return _treeData.filter((treeNode, index) => {
isSetPrivateKey && setPrivateKey(treeNode, parentTreeNode, config)
const bool = callBack?.(treeNode, index, parentTreeNode)
if (treeNode[childrenName]) {
;(treeNode[childrenName] as T[]) = fun(treeNode[childrenName], treeNode)
}
if (bool) {
resultTileArr.push(treeNode)
return true
} else {
return treeNode[childrenName] && treeNode[childrenName].length
}
})
}
const resultArr = fun(treeData)
return isTileArray ? resultTileArr : resultArr
}
export const mapTreeData = (
treeData: readonly T[] = [],
callBack?: (
treeNode: T,
index: number,
oldParentTreeNode?: T,
newParentTreeNode?: T
) => { [x: string]: any } | any,
config?: TreeDataConfig
): Array => {
const { childrenName = `children`, isTileArray = false, isSetPrivateKey = false } = config || {}
const resultTileArr: Array = []
const fun = (_treeData: readonly T[], oldParentTreeNode?: T, newParentTreeNode?: T) => {
return _treeData.map((treeNode, index) => {
isSetPrivateKey && setPrivateKey(treeNode, oldParentTreeNode, config)
const callBackInfo = callBack?.(treeNode, index, oldParentTreeNode, newParentTreeNode)
if (isTileArray) {
resultTileArr.push(callBackInfo)
return
}
const mappedTreeNode = {
...treeNode,
...callBackInfo,
}
if (treeNode?.[childrenName]) {
mappedTreeNode[childrenName] = fun(treeNode[childrenName], treeNode, mappedTreeNode)
}
return mappedTreeNode
})
}
const resultArr = fun(treeData)
return isTileArray ? resultTileArr : resultArr
}
export const getTreeData = (
tileArray: readonly T[] = [],
config?: TreeDataConfig
): (T & TreeNode)[] => {
const {
key = `id`,
childrenName = `children`,
parentKey = `pId`,
isSetPrivateKey = false,
} = config || {}
const fun = (parentTreeNode: { [x: string]: any }) => {
const parentId = parentTreeNode[key]
const childrenNodeList: T[] = []
copyTileArray = copyTileArray.filter(item => {
if (item[parentKey] === parentId) {
childrenNodeList.push({ ...item })
return false
} else {
return true
}
})
parentTreeNode[childrenName] = childrenNodeList
childrenNodeList.forEach(item => {
isSetPrivateKey && setPrivateKey(item, parentTreeNode, config)
fun(item)
})
}
const rootNodeList = tileArray.filter(item => !tileArray.some(i => i[key] === item[parentKey]))
const resultArr: (T & TreeNode)[] = []
let copyTileArray = [...tileArray]
rootNodeList.forEach(item => {
const index = copyTileArray.findIndex(i => i[key] === item[key])
if (index > -1) {
copyTileArray.splice(index, 1)
const obj = { ...item }
resultArr.push(obj)
isSetPrivateKey && setPrivateKey(obj, undefined, config)
fun(obj)
}
})
return resultArr
}
export const flattenTreeData = (
treeData: readonly T[] = [],
config?: TreeDataConfig
): (T & TreeNode)[] => {
const { childrenName = `children`, isSetPrivateKey = false } = config || {}
const result: T[] = []
const fun = (_treeData: readonly T[], parentTreeNode?: T) => {
_treeData.forEach(treeNode => {
isSetPrivateKey && setPrivateKey(treeNode, parentTreeNode, config)
result.push(treeNode)
if (treeNode[childrenName]) {
fun(treeNode[childrenName], treeNode)
}
})
}
fun(treeData)
return result
}
作者：热心市民王某
来源：juejin.cn/post/7213642622074765369
前端开发的最终目标是为用户提供良好的使用体验，并支持实现业务目标。然而，在不同的项目和公司中，业务目标可能存在差异。有些项目注重界面的美观和交互性，有些项目追求高性能和响应速度。因此，作为前端开发者，我们需要了解业务的具体需求，并确保我们的工作能够满足这些目标。
为了应对前端开发中的挑战，协助技术团队需要制定相应的策略。这些策略可以包括技术选型、代码规范、测试流程等方面。通过制定清晰的策略，团队成员可以更好地协作，并在面对困难时有一个明确的方向。
作为前端开发者，在业务中发挥着重要的作用，并能为团队和产品创造价值。前端的价值主要体现在以下几个方面：
作为前端开发者，我们经常面临各种挑战，如业务目标的实现、技术团队策略的制定等。通过不断学习和提升，我们可以解决前端开发中的各种困难，并为业务目标做出贡献。同时，我们的工作还能够直接影响用户体验，提高产品的竞争。
、
