JavaScript 使用 reduce 实现树形结构数据转换

在 JavaScript 开发中，我们经常需要处理树形结构数据，例如：组织架构、目录结构、菜单列表等等。通常情况下，这些数据会以扁平数组的形式存储，需要我们将其转换为树形结构才能方便地进行操作和展示。

本文将介绍如何使用 JavaScript 中的 reduce 方法将扁平的数组数据转换为树形结构数据。

示例代码

const arrayData = [
  { id: 2, title: '中国', parentid: 0 },
  { id: 3, title: '广东省', parentid: 2 },
  { id: 4, title: '广州市', parentid: 3 },
  { id: 5, title: '天河区', parentid: 4 },
  { id: 6, title: '湖南省', parentid: 2 },
  { id: 1, title: '俄罗斯', parentid: 0 }
];

function treelist(arr, pid = 0) {
  return arr.reduce((acc, item) => {
    if (item.parentid === pid) {
      const obj = {
        id: item.id,
        title: item.title,
        children: treelist(arr, item.id)
      };
      acc.push(obj);
    }
    return acc;
  }, []);
}

console.log(treelist(arrayData));

代码解释

arrayData 数组代表一个包含地区信息的扁平数据结构，其中 parentid 属性用于标识父节点的 ID。
treelist 函数使用 reduce 方法遍历 arrayData 数组，并根据 parentid 属性将数据转换为树形结构。
reduce 方法接收两个参数：
- 累加器 acc: 用于保存转换后的树形结构数据，初始值为一个空数组 []。
- 当前元素 item: 数组中正在被处理的元素。
在 reduce 方法的回调函数中，首先判断当前元素的 parentid 是否等于指定的 pid，如果等于，则将当前元素转换为一个包含 id、title 和 children 属性的对象，并将该对象添加到累加器 acc 中。
children 属性使用递归调用 treelist 函数，以获取当前节点的子节点。
最后，reduce 方法返回累加器 acc，即转换后的树形结构数据。

总结

通过使用 reduce 方法和递归，我们可以轻松地将扁平的数组数据转换为树形结构数据。这种方法简洁高效，易于理解和维护，适用于各种树形结构数据的处理。

希望本文能帮助您更好地理解 JavaScript 中 reduce 方法的应用，并为您处理树形结构数据提供参考。