PHP 7数组循环：仅输出值变化的结构化层级内容

这种扁平数组转层级结构的需求我之前也碰到过，直接循环时对比前一个元素的做法确实容易出问题——比如数据顺序变动、新增数据时逻辑很容易混乱。最稳妥的思路是先把扁平数组转换成树形层级结构，再进行渲染，这样既能彻底避免重复标题，还能轻松适配滚动加载的场景。

方法一：PHP后端处理（推荐，减轻前端压力） #

先把原数组转换为按regulations_label→groups_label→filters_label嵌套的结构，再渲染输出：

// 原数组（不可修改）
$data = [
    // ... 你的原数据
];

// 第一步：转换为层级结构
$hierarchy = [];
foreach ($data as $item) {
    $reg = $item['regulations_label'];
    $group = $item['groups_label'];
    $filter = $item['filters_label'];
    
    // 初始化法规层级
    if (!isset($hierarchy[$reg])) {
        $hierarchy[$reg] = [];
    }
    // 初始化分组层级
    if (!isset($hierarchy[$reg][$group])) {
        $hierarchy[$reg][$group] = [];
    }
    // 添加过滤器到对应分组
    $hierarchy[$reg][$group][] = $filter;
}

// 第二步：渲染为你需要的层级结构（示例为HTML，也可以输出JSON给前端）
foreach ($hierarchy as $regulation => $groups) {
    echo "<h2>$regulation</h2>";
    echo "<ul class='group-list'>";
    foreach ($groups as $group => $filters) {
        echo "<li class='group-item'>$group";
        echo "<ul class='filter-list'>";
        foreach ($filters as $filter) {
            echo "<li class='filter-item'>$filter</li>";
        }
        echo "</ul></li>";
    }
    echo "</ul>";
}

适配滚动加载 #

当需要加载更多数据时，只需要把新获取到的扁平数据，用同样的逻辑合并到已有的$hierarchy数组中，再返回更新后的结构（或者直接返回新增的层级片段），前端直接追加到页面即可，不需要重新处理全部数据。

方法二：前端JavaScript处理 #

如果需要前端直接处理后端返回的扁平JSON数据，也可以用同样的分组逻辑：

// 假设从后端获取到的扁平数据
const data = [
    // ... 你的原数据
];

// 转换为层级结构
let hierarchy = {};
data.forEach(item => {
    const reg = item.regulations_label;
    const group = item.groups_label;
    const filter = item.filters_label;
    
    if (!hierarchy[reg]) hierarchy[reg] = {};
    if (!hierarchy[reg][group]) hierarchy[reg][group] = [];
    hierarchy[reg][group].push(filter);
});

// 渲染到页面
const container = document.getElementById('content-container');
for (const reg in hierarchy) {
    // 创建法规标题
    const regTitle = document.createElement('h2');
    regTitle.textContent = reg;
    container.appendChild(regTitle);
    
    // 创建分组列表
    const groupUl = document.createElement('ul');
    groupUl.className = 'group-list';
    for (const group in hierarchy[reg]) {
        const groupLi = document.createElement('li');
        groupLi.className = 'group-item';
        groupLi.textContent = group;
        
        // 创建过滤器列表
        const filterUl = document.createElement('ul');
        filterUl.className = 'filter-list';
        hierarchy[reg][group].forEach(filter => {
            const filterLi = document.createElement('li');
            filterLi.className = 'filter-item';
            filterLi.textContent = filter;
            filterUl.appendChild(filterLi);
        });
        
        groupLi.appendChild(filterUl);
        groupUl.appendChild(groupLi);
    }
    container.appendChild(groupUl);
}

适配滚动加载 #

滚动加载新数据时，把新获取的扁平数组循环合并到已有的hierarchy对象中，然后只渲染新增的层级部分（或者重新渲染，但合并后渲染更高效），避免重复渲染已有内容。

这种分组转换的思路比循环时对比前项要稳定得多，不管原数组的顺序如何，都能正确生成层级结构，而且逻辑清晰，后期维护也方便。

内容的提问来源于stack exchange，提问作者Andy