2021SC@SDUSC amis代码分析(7)

最新推荐文章于 2024-07-18 14:45:27 发布

ZCY2576

最新推荐文章于 2024-07-18 14:45:27 发布

阅读量308

点赞数

分类专栏： amis 文章标签： reactjs

本文链接：https://blog.csdn.net/ZCY2576/article/details/121866170

版权

本文介绍2021SC@SDUSC的学习内容，专注于对JSON树形结构的操作，包括mapTree、eachTree、everyTree、someTree、findTree、findTreeIndex和getTree等函数。这些函数提供了类似数组操作的功能，如节点遍历、查找和条件判断，提高了处理树形数据的效率。

摘要由CSDN通过智能技术生成

2021SC@SDUSC

文章目录

- - 概述
  - 操作
  - - mapTree
    - eachTree
    - everyTree
    - someTree
    - findTree
    - findTreeIndex
    - getTree
  - 总结

概述

本周学习 amis 对JSON数据结构的处理函数集，形如树形结构：

 [
     {
   
         children: []
     },
     // 其他成员
 ]

所使用的数据结构：

export interface TreeItem {
   
  children?: TreeArray; // 每个节点可包含多个其他子节点
  [propName: string]: any;
}
export interface TreeArray extends Array<TreeItem> {
   }

这是 amis 最关键的一部分，amis就是使用json格式的配置数据形成静态页面。

操作

mapTree

类似于 arr.map 方法，对树的每个节点处理

/**
 * @param {Tree} tree 树形数据
 * @param {Function} iterator 处理函数，返回的数据会被替换成新的。
 * @return {Tree} 返回处理过的 tree
 */
export function mapTree<T extends TreeItem>(
  tree: Array<T>,
  iterator: (item: T, key: number, level: number, paths: Array<T>) => T,
  level: number = 1, // 用于标识此刻运行时处于树的深度位置
  depthFirst: boolean = false, // 用于标识是否深度优先处理
  paths: Array<T> = [] // 用于存储从根节点到该节点的路径中所经过的各节点
) {
   
  return tree.map((item: any, index) => {
    // 循环遍历 tree 节点的子结点
    if (depthFirst) {
    // 如果深度优先处理的话
      let children: TreeArray | undefined = item.children // 判断是否该子结点还存在下级子结点
        ? mapTree(
            item.children,
            iterator, // 用相同的 iterator 函数先处理该节点的下一级 item.children
            level + 1, // 深度加1
            depthFirst, // 同样的处理方式
            paths.concat(item) // 路径经过 item 这个节点
          ) // 返回处理后该节点新的子节点
        : undefined;
      // 若存在，将原来的 item 解析后赋给新的 item, 并用新的 children 属性覆盖
      children && (item = {
   ...item, children: children});
      // 对本节点的处理
      item = iterator(item, index, level, paths) || {
   ...(item as object)}