渲染评论

淡淡的烟草味﹌ 2021-07-24 12:27 426阅读 0赞

1、数据改造  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]根据评论的父评论id,将其放在父评论的child属性内

方案一(for循环):

//放未回复别人的一级评论的数组
    let arr1=[];
    
    for(var i=0;i<arr.length;i++)
    {
        if(arr[i].parent_id==null)
        {
            arr1.push(arr[i]);
        }
        
        //给每个评论创建child属性的数组
        arr[i].child=[];
    
        //根据comment_id和parent_id匹配,相同则放进comment_id的child属性里
        //此时已经完成数据的改造,每个评论都有自己的子评论,而该条评论又可能是其他评论的子评论
        for(var j=0;j<arr.length;j++)
        {
            if(arr[i].comment_id==arr[j].parent_id)
            {
                // console.log( arr[i].child)
                arr[i].child.push(arr[j]);
            }
        }
    }
    
    console.log(arr);

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 1]

方式二(递归):

先找到未有parent_id的一级评论,然后根据这些评论的comment_id来遍历所有元素的
    parent_id,找到这些评论的子评论,再根据子评论的comment_id来遍历所有元素的
    parent_id从而找到子评论的子评论,这种方式能找到所有一级评论的子评论及其子评论的子评论
    
    function fn(temp)
    {   let arr1=[];
    	
        for(var i=0;i<arr.length;i++)
        { 
            if(arr[i].parent_id==temp)
            {
                arr1.push(arr[i]);
                arr[i].child=fn(arr[i].comment_id);  
            }
        }
    
        return arr1;
    }
    const res=fn(null);
    
    如何找到二级评论以后的评论中赞数最多的,并根据赞数排序;
    	从改造后的数据中去到对应的二级评论,递归所有二级评论之后的评论,
    	全部放进一个数组,然后排序数组
    
    
    总结:
    	第一种方式,所有评论都附加了child,循环结束后,还需要将为null的一级评论拿出来才是最终结果
    	第二种方式,只会有为null的评论及其子评论有child(对象的引用),返回值直接拿出来即可

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/b7dc3efb25fd41b7bf200ec0977efb57.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 1]: /images/20210724/be34689db463481ea297f7ce5255c97d.png