【问题标题】:Deep Flatten JavaScript Object Recursively递归地深度展平 JavaScript 对象
【发布时间】:2016-08-16 15:05:32
【问题描述】:

数据

var data = [
    {
      "id": 1,
      "level": "1",
      "text": "Sammy",
      "type": "Item",
      "items": [
        {
          "id": 11,
          "level": "2",
          "text": "Table",
          "type": "Item",
          "items": [
            {
              "id": 111,
              "level": "3",
              "text": "Dog",
              "type": "Item",
              "items": null
            },
            {
              "id": 112,
              "level": "3",
              "text": "Cat",
              "type": "Item",
              "items": null
            }
          ]
        },
        {
          "id": 12,
          "level": "2",
          "text": "Chair",
          "type": "Item",
          "items": [
            {
              "id": 121,
              "level": "3",
              "text": "Dog",
              "type": "Item",
              "items": null
            },
            {
              "id": 122,
              "level": "3",
              "text": "Cat",
              "type": "Item",
              "items": null
            }
          ]
        }
      ]
    },
    {
      "id": 2,
      "level": "1",
      "text": "Sundy",
      "type": "Item",
      "items": [
        {
          "id": 21,
          "level": "2",
          "text": "MTable",
          "type": "Item",
          "items": [
            {
              "id": 211,
              "level": "3",
              "text": "MTDog",
              "type": "Item",
              "items": null
            },
            {
              "id": 212,
              "level": "3",
              "text": "MTCat",
              "type": "Item",
              "items": null
            }
          ]
        },
        {
          "id": 22,
          "level": "2",
          "text": "MChair",
          "type": "Item",
          "items": [
            {
              "id": 221,
              "level": "3",
              "text": "MCDog",
              "type": "Item",
              "items": null
            },
            {
              "id": 222,
              "level": "3",
              "text": "MCCat",
              "type": "Item",
              "items": null
            }
          ]
        }
      ]
    },
    {
      "id": 3,
      "level": "1",
      "text": "Bruce",
      "type": "Folder",
      "items": [
        {
          "id": 31,
          "level": "2",
          "text": "BTable",
          "type": "Item",
          "items": [
            {
              "id": 311,
              "level": "3",
              "text": "BTDog",
              "type": "Item",
              "items": null
            },
            {
              "id": 312,
              "level": "3",
              "text": "BTCat",
              "type": "Item",
              "items": null
            }
          ]
        },
        {
          "id": 32,
          "level": "2",
          "text": "Chair",
          "type": "Item",
          "items": [
            {
              "id": 321,
              "level": "3",
              "text": "BCDog",
              "type": "Item",
              "items": null
            },
            {
              "id": 322,
              "level": "3",
              "text": "BCCat",
              "type": "Item",
              "items": null
            }
          ]
        }
      ]
    }
  ];

代码

var fdr = [];
var fd = function(n) {
  if (n.items) {
    _.forEach(n.items, function (value){
      fd(value);
    });
  }

  fdr.push(n);
};
_.forEach(data, fd);
console.log(fdr);

期望的输出

var data = [
    {
      "id": 1,
      "level": "1",
      "text": "Sammy",
      "type": "Item",
      "items": []
    },
    {
      "id": 11,
      "level": "2",
      "text": "Table",
      "type": "Item",
      "items": []
    },
    {
      "id": 111,
      "level": "3",
      "text": "Dog",
      "type": "Item",
      "items": null
    },
    {
      "id": 112,
      "level": "3",
      "text": "Cat",
      "type": "Item",
      "items": null
    },
    {
      "id": 12,
      "level": "2",
      "text": "Chair",
      "type": "Item",
      "items": []
    },
    {
      "id": 121,
      "level": "3",
      "text": "Dog",
      "type": "Item",
      "items": null
    },
    {
      "id": 122,
      "level": "3",
      "text": "Cat",
      "type": "Item",
      "items": null
    },
    {
      "id": 2,
      "level": "1",
      "text": "Sundy",
      "type": "Item",
      "items": []
    },
    {
      "id": 21,
      "level": "2",
      "text": "MTable",
      "type": "Item",
      "items": []
    },
    {
      "id": 211,
      "level": "3",
      "text": "MTDog",
      "type": "Item",
      "items": null
    },
    {
      "id": 212,
      "level": "3",
      "text": "MTCat",
      "type": "Item",
      "items": null
    },
    {
      "id": 22,
      "level": "2",
      "text": "MChair",
      "type": "Item",
      "items": []
    },
    {
      "id": 221,
      "level": "3",
      "text": "MCDog",
      "type": "Item",
      "items": null
    },
    {
      "id": 222,
      "level": "3",
      "text": "MCCat",
      "type": "Item",
      "items": null
    },
    {
      "id": 3,
      "level": "1",
      "text": "Bruce",
      "type": "Folder",
      "items": []
    },
    {
      "id": 31,
      "level": "2",
      "text": "BTable",
      "type": "Item",
      "items": []
    },
    {
      "id": 311,
      "level": "3",
      "text": "BTDog",
      "type": "Item",
      "items": null
    },
    {
      "id": 312,
      "level": "3",
      "text": "BTCat",
      "type": "Item",
      "items": null
    },
    {
      "id": 32,
      "level": "2",
      "text": "Chair",
      "type": "Item",
      "items": []
    },
    {
      "id": 321,
      "level": "3",
      "text": "BCDog",
      "type": "Item",
      "items": null
    },
    {
      "id": 322,
      "level": "3",
      "text": "BCCat",
      "type": "Item",
      "items": null
    }
  ];

条件

  • 对象具有未知级别。一些孩子item 可能会降低一级,而有些可能会降低至 5 级。

问题

代码中的fd函数是我想出来的。我相信有一种“更清洁”的方法可以做到这一点,只是想不出一些东西。另外,函数返回items对象,渲染成圆形对象。

JsBin: http://jsbin.com/debojiqove/2/edit?html,js,output

有没有办法用 lodash 或纯 JavaScript 递归地展平对象?

【问题讨论】:

  • 您要删除items 数组中的对象吗?我在您的示例代码中看到您有空数组,其中有对象。
  • 是的,差不多。虽然最好不要修改原始对象,但这不是必需的。
  • Lodash 有一个 _.flattenDeep(array) 方法 - 这就是你要找的吗?
  • @NickZuber 是的,但我似乎无法让它达到我想要的结果。

标签: javascript recursion javascript-objects lodash


【解决方案1】:

这是使用递归函数的解决方案,我称之为flattenNestedObjectsArray()(对于native JavaScript):

function flattenNestedObjectsArray(arr, part){
    var flattened = part || [], items;
    arr.forEach(function(v){
        if (Array.isArray(v.items) && v.items.length) {
            items = v.items;
            v.items = [];
            flattened.push(v);
            flattened.concat(flattened, flattenNestedObjectsArray(items, flattened));                
        } else {
            flattened.push(v);
        }        
    });
    return flattened;
}

var flattened = flattenNestedObjectsArray(data);
console.log(JSON.stringify(flattened, 0, 4));

console.log 输出:

[
    {
        "id": 1,
        "level": "1",
        "text": "Sammy",
        "type": "Item",
        "items": []
    },
    {
        "id": 11,
        "level": "2",
        "text": "Table",
        "type": "Item",
        "items": []
    },
    {
        "id": 111,
        "level": "3",
        "text": "Dog",
        "type": "Item",
        "items": null
    },
    {
        "id": 112,
        "level": "3",
        "text": "Cat",
        "type": "Item",
        "items": null
    },
    {
        "id": 12,
        "level": "2",
        "text": "Chair",
        "type": "Item",
        "items": []
    },
    {
        "id": 121,
        "level": "3",
        "text": "Dog",
        "type": "Item",
        "items": null
    },
    {
        "id": 122,
        "level": "3",
        "text": "Cat",
        "type": "Item",
        "items": null
    },
    {
        "id": 2,
        "level": "1",
        "text": "Sundy",
        "type": "Item",
        "items": []
    },
    {
        "id": 21,
        "level": "2",
        "text": "MTable",
        "type": "Item",
        "items": []
    },
    {
        "id": 211,
        "level": "3",
        "text": "MTDog",
        "type": "Item",
        "items": null
    },
    {
        "id": 212,
        "level": "3",
        "text": "MTCat",
        "type": "Item",
        "items": null
    },
    {
        "id": 22,
        "level": "2",
        "text": "MChair",
        "type": "Item",
        "items": []
    },
    {
        "id": 221,
        "level": "3",
        "text": "MCDog",
        "type": "Item",
        "items": null
    },
    {
        "id": 222,
        "level": "3",
        "text": "MCCat",
        "type": "Item",
        "items": null
    },
    {
        "id": 3,
        "level": "1",
        "text": "Bruce",
        "type": "Folder",
        "items": []
    },
    {
        "id": 31,
        "level": "2",
        "text": "BTable",
        "type": "Item",
        "items": []
    },
    {
        "id": 311,
        "level": "3",
        "text": "BTDog",
        "type": "Item",
        "items": null
    },
    {
        "id": 312,
        "level": "3",
        "text": "BTCat",
        "type": "Item",
        "items": null
    },
    {
        "id": 32,
        "level": "2",
        "text": "Chair",
        "type": "Item",
        "items": []
    },
    {
        "id": 321,
        "level": "3",
        "text": "BCDog",
        "type": "Item",
        "items": null
    },
    {
        "id": 322,
        "level": "3",
        "text": "BCCat",
        "type": "Item",
        "items": null
    }
]

【讨论】:

    【解决方案2】:

    关于项目的纯 Javascript 解决方案。它不会改变源数组。

    function flat(r, a) {
        var b = {};
        Object.keys(a).forEach(function (k) {
            if (k !== 'items') {
                b[k] = a[k];
            }
        });
        r.push(b);
        if (Array.isArray(a.items)) {
            b.items = a.items.map(function (a) { return a.id; });
            return a.items.reduce(flat, r);
        }
        return r;
    }
    
    var data = [{ "id": 1, "level": "1", "text": "Sammy", "type": "Item", "items": [{ "id": 11, "level": "2", "text": "Table", "type": "Item", "items": [{ "id": 111, "level": "3", "text": "Dog", "type": "Item", "items": null }, { "id": 112, "level": "3", "text": "Cat", "type": "Item", "items": null }] }, { "id": 12, "level": "2", "text": "Chair", "type": "Item", "items": [{ "id": 121, "level": "3", "text": "Dog", "type": "Item", "items": null }, { "id": 122, "level": "3", "text": "Cat", "type": "Item", "items": null }] }] }, { "id": 2, "level": "1", "text": "Sundy", "type": "Item", "items": [{ "id": 21, "level": "2", "text": "MTable", "type": "Item", "items": [{ "id": 211, "level": "3", "text": "MTDog", "type": "Item", "items": null }, { "id": 212, "level": "3", "text": "MTCat", "type": "Item", "items": null }] }, { "id": 22, "level": "2", "text": "MChair", "type": "Item", "items": [{ "id": 221, "level": "3", "text": "MCDog", "type": "Item", "items": null }, { "id": 222, "level": "3", "text": "MCCat", "type": "Item", "items": null }] }] }, { "id": 3, "level": "1", "text": "Bruce", "type": "Folder", "items": [{ "id": 31, "level": "2", "text": "BTable", "type": "Item", "items": [{ "id": 311, "level": "3", "text": "BTDog", "type": "Item", "items": null }, { "id": 312, "level": "3", "text": "BTCat", "type": "Item", "items": null }] }, { "id": 32, "level": "2", "text": "Chair", "type": "Item", "items": [{ "id": 321, "level": "3", "text": "BCDog", "type": "Item", "items": null }, { "id": 322, "level": "3", "text": "BCCat", "type": "Item", "items": null }] }] }];
    
    document.write('<pre>' + JSON.stringify(data.reduce(flat, []), 0, 4) + '</pre>');

    【讨论】:

    • 最好不要破坏Items 并将ItemId 留在集合中。干得好!
    【解决方案3】:

    这是我的递归 flattenItems 函数版本。 请注意,我在最终结果中删除了所有级别的 items 属性。

    function flattenItems(data) {
        // flat is the array that we will return by the end
        var flat = [];
        data.forEach(function(item) {
            // get child properties only
            var flatItem = {};
            Object.keys(item).forEach(function(key) {
                if(item[key] && item.hasOwnProperty(key) && !Array.isArray(item[key])) {
                    flatItem[key] = item[key];
                }
                // recursive flattern on subitems
                // add recursive call results to the 
                // current stack version of "flat", by merging arrays
                else if(Array.isArray(item[key])) {
                    Array.prototype.push.apply(flat, flattenItems(item[key]));
                }
            });
            flat.push(flatItem);
        });
        // sort by level before returning
        return flat.sort(function(i1, i2) {
            return parseInt(i1.level) - parseInt(i2.level);
        });
      }
    

    这是使用您的示例数据的fiddle,请检查控制台。

    【讨论】:

      【解决方案4】:

      纯 JavaScript

      var data = [{ "id": 1, "level": "1", "text": "Sammy", "type": "Item", "items": [{ "id": 11, "level": "2", "text": "Table", "type": "Item", "items": [{ "id": 111, "level": "3", "text": "Dog", "type": "Item", "items": null }, { "id": 112, "level": "3", "text": "Cat", "type": "Item", "items": null }] }, { "id": 12, "level": "2", "text": "Chair", "type": "Item", "items": [{ "id": 121, "level": "3", "text": "Dog", "type": "Item", "items": null }, { "id": 122, "level": "3", "text": "Cat", "type": "Item", "items": null }] }] }, { "id": 2, "level": "1", "text": "Sundy", "type": "Item", "items": [{ "id": 21, "level": "2", "text": "MTable", "type": "Item", "items": [{ "id": 211, "level": "3", "text": "MTDog", "type": "Item", "items": null }, { "id": 212, "level": "3", "text": "MTCat", "type": "Item", "items": null }] }, { "id": 22, "level": "2", "text": "MChair", "type": "Item", "items": [{ "id": 221, "level": "3", "text": "MCDog", "type": "Item", "items": null }, { "id": 222, "level": "3", "text": "MCCat", "type": "Item", "items": null }] }] }, { "id": 3, "level": "1", "text": "Bruce", "type": "Folder", "items": [{ "id": 31, "level": "2", "text": "BTable", "type": "Item", "items": [{ "id": 311, "level": "3", "text": "BTDog", "type": "Item", "items": null }, { "id": 312, "level": "3", "text": "BTCat", "type": "Item", "items": null }] }, { "id": 32, "level": "2", "text": "Chair", "type": "Item", "items": [{ "id": 321, "level": "3", "text": "BCDog", "type": "Item", "items": null }, { "id": 322, "level": "3", "text": "BCCat", "type": "Item", "items": null }] }] }];
      
      var r = [];
      
      function flatten(a) {
          if (a.length == 0) return;
          var o = {};
          o.id = a[0].id;
          o.level = a[0].level;
          o.text = a[0].text;
          o.type = a[0].type
          o.items = a[0].items == null ? null : []
          r.push(o);
          if (Array.isArray(a[0].items)) {
              flatten(a[0].items);
          }
          a.shift();
          flatten(a);
      }
      
      flatten(data);
      
      document.write('<pre>' + JSON.stringify(r, 0, 2) + '</pre>');

      【讨论】:

        【解决方案5】:

        有点 ES6 的味道

        function flatten(xs) {
          return xs.reduce((acc, x) => {
            acc = acc.concat(x);
            if (x.items) {
              acc = acc.concat(flatten(x.items));
              x.items = [];
            }
            return acc;
          }, []);
        }
        

        【讨论】:

        • 您可以在acc = acc.concat(x)语句之前添加x = Object.create(x),以避免改变源数组。
        • 避免突变是个好主意,但不应使用Object.create 来克隆对象。我建议改用x = Object.assign({}, x);
        • 发布了一个更可重用的变体stackoverflow.com/a/53519360/58553
        【解决方案6】:

        使用reducerecursion 的更短的解决方案

        function flatten(data){
          return data.reduce(function(result,next){
            result.push(next);
            if(next.items){
              result = result.concat(flatten(next.items));  
              next.items = [];
            }
            return result;
          },[]);
        }
        
        var data = [
            {
              "id": 1,
              "level": "1",
              "text": "Sammy",
              "type": "Item",
              "items": [
                {
                  "id": 11,
                  "level": "2",
                  "text": "Table",
                  "type": "Item",
                  "items": [
                    {
                      "id": 111,
                      "level": "3",
                      "text": "Dog",
                      "type": "Item",
                      "items": null
                    },
                    {
                      "id": 112,
                      "level": "3",
                      "text": "Cat",
                      "type": "Item",
                      "items": null
                    }
                  ]
                },
                {
                  "id": 12,
                  "level": "2",
                  "text": "Chair",
                  "type": "Item",
                  "items": [
                    {
                      "id": 121,
                      "level": "3",
                      "text": "Dog",
                      "type": "Item",
                      "items": null
                    },
                    {
                      "id": 122,
                      "level": "3",
                      "text": "Cat",
                      "type": "Item",
                      "items": null
                    }
                  ]
                }
              ]
            },
            {
              "id": 2,
              "level": "1",
              "text": "Sundy",
              "type": "Item",
              "items": [
                {
                  "id": 21,
                  "level": "2",
                  "text": "MTable",
                  "type": "Item",
                  "items": [
                    {
                      "id": 211,
                      "level": "3",
                      "text": "MTDog",
                      "type": "Item",
                      "items": null
                    },
                    {
                      "id": 212,
                      "level": "3",
                      "text": "MTCat",
                      "type": "Item",
                      "items": null
                    }
                  ]
                },
                {
                  "id": 22,
                  "level": "2",
                  "text": "MChair",
                  "type": "Item",
                  "items": [
                    {
                      "id": 221,
                      "level": "3",
                      "text": "MCDog",
                      "type": "Item",
                      "items": null
                    },
                    {
                      "id": 222,
                      "level": "3",
                      "text": "MCCat",
                      "type": "Item",
                      "items": null
                    }
                  ]
                }
              ]
            },
            {
              "id": 3,
              "level": "1",
              "text": "Bruce",
              "type": "Folder",
              "items": [
                {
                  "id": 31,
                  "level": "2",
                  "text": "BTable",
                  "type": "Item",
                  "items": [
                    {
                      "id": 311,
                      "level": "3",
                      "text": "BTDog",
                      "type": "Item",
                      "items": null
                    },
                    {
                      "id": 312,
                      "level": "3",
                      "text": "BTCat",
                      "type": "Item",
                      "items": null
                    }
                  ]
                },
                {
                  "id": 32,
                  "level": "2",
                  "text": "Chair",
                  "type": "Item",
                  "items": [
                    {
                      "id": 321,
                      "level": "3",
                      "text": "BCDog",
                      "type": "Item",
                      "items": null
                    },
                    {
                      "id": 322,
                      "level": "3",
                      "text": "BCCat",
                      "type": "Item",
                      "items": null
                    }
                  ]
                }
              ]
            }
          ];
        
        var result = flatten(data);
        
        document.write('<pre>' + JSON.stringify(result, 0, 4) + '</pre>');

        【讨论】:

          【解决方案7】:

          只有一个线性函数可以完成这项工作。

          var data = [{ "id": 1, "level": "1", "text": "Sammy", "type": "Item", "items": [{ "id": 11, "level": "2", "text": "Table", "type": "Item", "items": [{ "id": 111, "level": "3", "text": "Dog", "type": "Item", "items": null }, { "id": 112, "level": "3", "text": "Cat", "type": "Item", "items": null }] }, { "id": 12, "level": "2", "text": "Chair", "type": "Item", "items": [{ "id": 121, "level": "3", "text": "Dog", "type": "Item", "items": null }, { "id": 122, "level": "3", "text": "Cat", "type": "Item", "items": null }] }] }, { "id": 2, "level": "1", "text": "Sundy", "type": "Item", "items": [{ "id": 21, "level": "2", "text": "MTable", "type": "Item", "items": [{ "id": 211, "level": "3", "text": "MTDog", "type": "Item", "items": null }, { "id": 212, "level": "3", "text": "MTCat", "type": "Item", "items": null }] }, { "id": 22, "level": "2", "text": "MChair", "type": "Item", "items": [{ "id": 221, "level": "3", "text": "MCDog", "type": "Item", "items": null }, { "id": 222, "level": "3", "text": "MCCat", "type": "Item", "items": null }] }] }, { "id": 3, "level": "1", "text": "Bruce", "type": "Folder", "items": [{ "id": 31, "level": "2", "text": "BTable", "type": "Item", "items": [{ "id": 311, "level": "3", "text": "BTDog", "type": "Item", "items": null }, { "id": 312, "level": "3", "text": "BTCat", "type": "Item", "items": null }] }, { "id": 32, "level": "2", "text": "Chair", "type": "Item", "items": [{ "id": 321, "level": "3", "text": "BCDog", "type": "Item", "items": null }, { "id": 322, "level": "3", "text": "BCCat", "type": "Item", "items": null }] }] }],
          
          flatIron = (a,b) => a.reduce((p,c) => {!!c.items ? (p.push(c), flatIron(c.items,p), c.items = []) : p.push(c); return p},b),
           flatArr = flatIron(data,[]);
          
          document.write('<pre>' + JSON.stringify(flatArr, 0, 2) + '</pre>');

          【讨论】:

          • 请注意,这种方法需要 ES6。
          【解决方案8】:

          从 Lo-Dash 3.0.0 开始,_.flattenDeep(data) 将根据您的需要返回一个深度扁平化的数组。还有一个 _.flatten(data) 函数可以进行浅层展平。

          【讨论】:

          • 我试过了,但似乎无法达到我想要的结果。
          【解决方案9】:

          递归reducer函数的另一种方式

           _.reduce(data, function reducer(result, val) {
               var items = _.reduce(val.items, reducer, []);
               val.items = _.isArray(val.items) ? [] : val.items;
               return _.concat(result, val, items);
           }, []);
          

          【讨论】:

            【解决方案10】:

            我需要做同样的事情,在解决我的问题时使用 lodash 找到了你的解决方案:

            function kids(node) {
                return node.items
                    ? [{...node, items: []}, _.map(node.items, kids)]
                    : {...node, items: null};
            }
            
            _.flatMapDeep(data, kids);
            

            【讨论】:

            • 最佳答案,应该是顶!
            【解决方案11】:

            修改了 Роман Парадеев 答案,使其更具动态性。

            function flatten(xs, childSelector) {
              return xs.reduce((acc, x) => {
                acc = acc.concat(x);
                let children = childSelector(x);
                if (children) {
                  acc = acc.concat(flatten(children, childSelector));
                }
                return acc;
              }, []);
            }
            

            现在items 没有硬编码,你可以使用它flatten(data, x =&gt; x.items)

            【讨论】:

              【解决方案12】:

              使用_.flatMapDeep(Lodash 4.7 起可用):

              var flatten = function(item) {
                return [item, _.flatMapDeep(item.items, flatten)];
              }
              
              var result = _.flatMapDeep(data, flatten);
              

              【讨论】:

                【解决方案13】:

                此解决方案应该适用于 IE11;使用过滤器、映射和归约。

                var item = function(x) {
                    return {
                        "id": x.id,
                        "level": x.level,
                        "text": x.text,
                        "type": x.type,
                        "items": x.items ? [] : null
                    }
                }
                
                var flatten = function(a, b) {
                    return a.concat(b);
                };
                
                var onlyUnique = function(acc, curr) {
                    if (acc.length == 0) {
                        acc.push(curr);
                    } else {
                        var search = acc.filter(function(x){return x.id===curr.id;})
                        if (search.length == 0) {
                            acc.push(curr);
                        }
                    }
                    return acc;
                }
                
                var newData = data.map(function(x) {
                
                    return x.items.map(function(xx) {
                        return xx.items.map(function(xxx) {
                            return [item(x), item(xx), item(xxx)];
                        }).reduce(flatten, []);
                
                
                    }).reduce(flatten, [])
                
                
                
                }).reduce(flatten, []).reduce(onlyUnique, []);;
                
                console.log(JSON.stringify(newData, null, 2))
                

                【讨论】:

                  【解决方案14】:

                  由于这个较旧的问题已被重新提出,这里是一个现代版本。它不会改变(@Nina Scholz:或破坏!)原始数据,而是返回一个包含新对象的新数组。

                  const flattenItems = (xs) =>
                    xs. flatMap (({items, ... node}) => [node, ... flattenItems (items || [])])
                  
                  const data = [{id: 1, level: "1", text: "Sammy", type: "Item", items: [{id: 11, level: "2", text: "Table", type: "Item", items: [{id: 111, level: "3", text: "Dog", type: "Item", items: null}, {id: 112, level: "3", text: "Cat", type: "Item", items: null}]}, {id: 12, level: "2", text: "Chair", type: "Item", items: [{id: 121, level: "3", text: "Dog", type: "Item", items: null}, {id: 122, level: "3", text: "Cat", type: "Item", items: null}]}]}, {id: 2, level: "1", text: "Sundy", type: "Item", items: [{id: 21, level: "2", text: "MTable", type: "Item", items: [{id: 211, level: "3", text: "MTDog", type: "Item", items: null}, {id: 212, level: "3", text: "MTCat", type: "Item", items: null}]}, {id: 22, level: "2", text: "MChair", type: "Item", items: [{id: 221, level: "3", text: "MCDog", type: "Item", items: null}, {id: 222, level: "3", text: "MCCat", type: "Item", items: null}]}]}, {id: 3, level: "1", text: "Bruce", type: "Folder", items: [{id: 31, level: "2", text: "BTable", type: "Item", items: [{id: 311, level: "3", text: "BTDog", type: "Item", items: null}, {id: 312, level: "3", text: "BTCat", type: "Item", items: null}]}, {id: 32, level: "2", text: "Chair", type: "Item", items: [{id: 321, level: "3", text: "BCDog", type: "Item", items: null}, {id: 322, level: "3", text: "BCCat", type: "Item", items: null}]}]}]
                  
                  console .log (flattenItems (data))
                  .as-console-wrapper {max-height: 100% !important; top: 0}

                  这个版本不包括相当无用的items 属性。添加它很容易,如下所示:

                  const flattenItems = (xs) =>
                    xs. flatMap (({items, ... node}) => [
                      {... node, items: items == null ? null : []}, 
                      ... flattenItems (items || [])
                    ])
                  

                  【讨论】:

                    猜你喜欢
                    • 1970-01-01
                    • 2018-04-20
                    • 2019-03-16
                    • 2020-09-23
                    • 2021-08-10
                    • 1970-01-01
                    • 1970-01-01
                    • 2015-12-06
                    • 2016-05-18
                    相关资源
                    最近更新 更多