js 数组属性相同的分成树结构

在JavaScript中，可以使用一些方法来将具有相同属性的数组元素分成树形结构。

一种常用的方法是使用reduce()函数和递归。我们可以遍历数组，根据数组元素的某个属性来创建树形结构。首先，我们需要创建一个空对象作为树的根节点，然后使用reduce()函数来迭代数组元素。

在reduce()的回调函数中，我们可以判断当前元素的属性是否已经在树中存在。如果不存在，我们就创建一个新的子节点，并将当前元素添加到子节点的数组属性中。如果已经存在，我们就直接将当前元素添加到对应的子节点的数组属性中。

在对数组元素进行处理之后，我们可以通过递归调用自身来处理子节点的数组属性。这样，我们就可以将具有相同属性的数组元素分成树形结构。

以下是一个简单的示例代码：

function createTree(array, property) {
  return array.reduce((tree, element) => {
    const value = element[property];
    const existingNode = tree.find(node => node[property] === value);
    
    if (existingNode) {
      existingNode.children.push(element);
    } else {
      tree.push({ [property]: value, children: [element] });
    }
    
    return tree;
  }, []);
}

// 示例用法
const fruits = [
  { name: 'apple', color: 'red' },
  { name: 'banana', color: 'yellow' },
  { name: 'cherry', color: 'red' },
  { name: 'pear', color: 'green' },
  { name: 'mango', color: 'yellow' },
];

const tree = createTree(fruits, 'color');
console.log(tree);

以上示例根据水果数组的颜色属性将其分成了树形结构。输出结果如下：

[
  { color: 'red', children: [{ name: 'apple', color: 'red' }, { name: 'cherry', color: 'red' }] },
  { color: 'yellow', children: [{ name: 'banana', color: 'yellow' }, { name: 'mango', color: 'yellow' }] },
  { color: 'green', children: [{ name: 'pear', color: 'green' }] }
]

这样我们就成功将具有相同颜色的水果分成了树形结构，方便进行进一步处理。