一个递归需求，没有思路，求帮忙

Question

data:[{
        has:1,
        top:1,
        left:2,
        subviews:[2]
      },{
        has:2,
        top:2,
        left:2,
        subviews:[3,4,5]
      },{
        has:3,
        top:3,
        left:3,
        subviews:[6]
      },{
        has:4,
        top:4,
        left:4,
        subviews:[]
      },{
        has:5,
        top:5,
        left:5,
        subviews:[]
      },,{
        has:6,
        top:6,
        left:6,
        subviews:[]
      }],

第一个是根节点，每个节点的vtop都是需要本身的top值，加上父节点的top值，subviews包含对象has值的就是父节点，怎么拿到所有节点的vtop？
数据格式是这样的，has为6的top值等于subviews包含6的has为3的top 加上 subviews包含3的has为‘2’的top 加上subviews包含2的has为‘1’的top 也就是
data[5].vtop = data[5].top + data[2].top + data[1].top+ data[0].top
请问这种改怎么写

Answer 1

    function getVTop(arr, target, vtops = []) {
        const filteredArr = arr.filter(item => item.subviews.includes(target.top))
        if (!filteredArr.length) {
          return vtops
        }
        filteredArr.forEach(item => {
          vtops.push(item.top)
          getVTop(arr, item, vtops)
        })
        return vtops
      }
      data[5].vtop = getVTop(data, data[5], []).reduce((a, b) => a + b, 0)

Answer 2

const data = [
        {
          has: 1,
          top: 1,
          left: 2,
          subviews: [2],
        },
        {
          has: 2,
          top: 2,
          left: 2,
          subviews: [3, 4, 5],
        },
        {
          has: 3,
          top: 3,
          left: 3,
          subviews: [6],
        },
        {
          has: 4,
          top: 4,
          left: 4,
          subviews: [],
        },
        {
          has: 5,
          top: 5,
          left: 5,
          subviews: [],
        },
        ,
        {
          has: 6,
          top: 6,
          left: 6,
          subviews: [],
        },
      ];

      const convert = data => {
        let cache = {};
        let root;

        const format = data => {
          cache = {};
          data.forEach(node => {
            cache[node.has] = node;
          });
        };
        const walker = (nodeKey, vtop = 0) => {
          const node = cache[nodeKey];
          if (!node) {
             return ; 
          }
          const parentVtop = node.top + vtop;
          node.vtop = parentVtop;

          if (Array.isArray(node.subviews)) {
            node.subviews.forEach(child => {
              walker(child, parentVtop);
            });
          }
        };

        const exec = data => {
          format(data);
          root = data[0];
          walker(root.has);
        };

        exec(data);

        return {
          getVtop(has) {
            if (cache[has]) {
              return cache[has];
            }

            return null;
          },

          update(data) {
            exec(data);
          },

          getCache() {
            return cache;
          },
        };
      };

      const obj = convert(data);
      console.log(obj.getCache())

Answer 3

function transformItems ( items = [] ) {
  for ( const item of items ) {
    Reflect.defineProperty( item, `vtop`, {
      get () {
        const { has } = this;
        return items.reduce(
          ( sum, item ) =>
            sum += item.subviews.includes( has ) ? item.vtop : 0,
          0,
        ) +
          ( this.top || 0 );
      }
    } );
  }
}

transformItems( data );

console.log( data[ 5 ].vtop );

data[ 0 ].top = 3;
data[ 0 ].subviews.push( 3 );

console.log( data[ 5 ].vtop );