JavaScript如何合并复杂JSON对象生成Cytoscape JS样式表

场景说明 #

使用Cytoscape JS开发网络查看器时，需要通过JSON对象传入样式配置，目标是实现类热力图效果：将分值划分为255个类别，每个类别匹配专属颜色。手动编写255条样式条目工作量过大，因此计划通过循环自动生成配置，但在合并JSON配置对象时出现异常，无法定位错误点。

初始未完成的代码如下：

var create_stylesheet = function(){
        var to_return =[
            {
                'selector': 'node', 'style': {'content': 'data(label)', 'background-color': 'BlueViolet'}
            },
            {
                'selector': 'edge', 'style': {'label': 'data(score)'}
            }]; // 基础节点、边配置，需放在数组最前端
     
        // 渐变逻辑：RGB红色值随分值升高，蓝色值随分值降低，实现冷色到暖色的过渡，暖色对应高分值
        for(i = 0; i <= 255; i++){
            var cat = `.cat_${i}`;
            var colour = `rgb(${i}, 0, ${255-i})`;
            var to_append =
               {
                   'selector': cat, 'style': {'line-color': colour}
               };

              // 此处需要将to_append追加到to_return数组中
        }
        

        return to_return; // 返回最终样式表
    }

错误原因 #

之前的问题是混用了多种数组合并的实现方式，循环内仅生成了单条分类样式对象，没有执行实际的数组追加操作，导致所有分类样式都没有被加入最终返回的样式表。

可运行代码 #

重新梳理逻辑后，通过数组push()方法按顺序追加基础配置、循环生成的分类样式、元素选中状态配置即可正常运行，代码如下：

var create_stylesheet = function(){
        let to_return = [];
        let first_line =
            {
                'selector': 'node', 'style': {'content': 'data(label)', 'background-color': 'BlueViolet'}
            };
        let second_line =
            {
                'selector': 'edge', 'style': {'label': 'data(score)'}
            };
        let last_line = {
            'selector': ':selected',
            'style': {
                'background-color': 'SteelBlue', 'line-color': 'black', 'target-arrow-color': 'black', 'source-arrow-color': 'black'}
        };
        // 推入基础节点、边配置
        to_return.push(first_line);
        to_return.push(second_line);
        // 循环生成每个分类对应的边颜色样式
        for(let i = 0; i <= 255; i++){
            var cat = `.cat_${i}`;
            var colour = `rgb(${i}, 0, ${255-i})`;
            var to_append =
               {
                   'selector': cat, 'style': {'line-color': colour}
               };
            to_return.push(to_append); // 逐条追加生成的样式配置
        }

        to_return.push(last_line); // 追加元素选中状态的样式
        return to_return;
    }

该写法虽然不算最精简优雅，但逻辑清晰，可直接运行满足热力图渐变样式的生成需求。

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