ES6 实现数据树索引设置函数：setIndex()

这是一个使用 ES6 实现的 setIndex 函数，用于为数据树中的每个元素设置自定义索引、当前索引和路径属性。此外，该函数还会根据元素是否具有子元素来设置数据类型属性。函数利用广度优先搜索算法遍历数据树，确保每个元素都能被访问并正确设置索引。

函数实现：

function setIndex(data) {
    let queue = [...data];
    let loop = 0;
    while (queue.length > 0) {
        loop++;
        [...queue].forEach((child, i) => {
            queue.shift();
            if (loop === 1) {
                child.customIndex = i + 1 + '';
                child.currentIndex = i;
                child.path = i;
            }
            if (child.children && child.children.length > 0) {
                child.dataType = 1;
                for (let ci = 0; ci < child.children.length; ci++) {
                    child.children[ci].currentIndex = ci;
                    child.children[ci].customIndex = child.customIndex + '.' + (ci + 1);
                    child.children[ci].path = child.path + '.children.' + ci;
                }
                queue.push(...child.children);
            } else {
                child.dataType = 2;
            }
        });
    }
}

使用方法：

准备数据：

let data = [
    {
        name: 'A',
        children: [
            {
                name: 'A1'
            },
            {
                name: 'A2',
                children: [
                    {
                        name: 'A21'
                    },
                    {
                        name: 'A22'
                    }
                ]
            },
            {
                name: 'A3'
            }
        ]
    },
    {
        name: 'B',
        children: [
            {
                name: 'B1'
            },
            {
                name: 'B2'
            }
        ]
    }
];

调用 setIndex 函数：

setIndex(data);

查看结果：

console.log(data);

输出结果：

[
    {
        "name": "A",
        "children": [
            {
                "name": "A1",
                "customIndex": "1",
                "currentIndex": 0,
                "path": "0.children.0",
                "dataType": 2
            },
            {
                "name": "A2",
                "children": [
                    {
                        "name": "A21",
                        "customIndex": "2.1",
                        "currentIndex": 0,
                        "path": "0.children.1.children.0",
                        "dataType": 2
                    },
                    {
                        "name": "A22",
                        "customIndex": "2.2",
                        "currentIndex": 1,
                        "path": "0.children.1.children.1",
                        "dataType": 2
                    }
                ],
                "customIndex": "2",
                "currentIndex": 1,
                "path": "0.children.1",
                "dataType": 1
            },
            {
                "name": "A3",
                "customIndex": "3",
                "currentIndex": 2,
                "path": "0.children.2",
                "dataType": 2
            }
        ],
        "customIndex": "1",
        "currentIndex": 0,
        "path": "0",
        "dataType": 1
    },
    {
        "name": "B",
        "children": [
            {
                "name": "B1",
                "customIndex": "2.1",
                "currentIndex": 0,
                "path": "1.children.0",
                "dataType": 2
            },
            {
                "name": "B2",
                "customIndex": "2.2",
                "currentIndex": 1,
                "path": "1.children.1",
                "dataType": 2
            }
        ],
        "customIndex": "2",
        "currentIndex": 1,
        "path": "1",
        "dataType": 1
    }
]

总结：

setIndex 函数利用 ES6 特性，例如解构赋值、展开运算符和箭头函数，实现了简洁高效的数据树索引设置。该函数采用广度优先搜索算法，确保每个元素都能被访问并设置索引。该函数为开发者提供了方便快捷的数据树索引管理方案，提高了代码可读性和维护性。