JS 数组对象合并去重，该怎么写。求大师指导。

这是我现在的数据格式。

[
{key：'流行元素'，val:'夜光'}，
{key：'流行元素'，val:'荧光'}，
{key:'材质', val:'涤纶'}，
{key:'材质', val:'真皮'}，
]

            我想处理成下面的数据格式，该怎么写。求大神指导。非常感谢。

            [
                    {
                        key:'流行元素'，
                        val:['夜光'，'荧光']
                    }，
                    {
                        key:'材质'，
                        val:['涤纶','真皮']
                    }
                ]

https://blog.csdn.net/weixin_44526618/article/details/92802192

let temp = {}
for(let i=0; i<list.length; i++) {
    let obj = temp[list[i].key]
    if(obj) {
        obj.val.push(list[i].val)
    } else {
        temp[list[i].key] = {
            key: list[i].key,
            val: [list[i].val]
        }
    }
}

let newList = []
Object.keys(temp).forEach(e => {
    newList.add(temp[e])
})

代码手撸的 可能有错，写法就这样

var str = '[{key:"流行元素",val:"夜光"},{key:"流行元素",val:"荧光"},    {key:"材质", val:"涤纶"},   {key:"材质", val:"真皮"}]';
var obj =  eval('(' + str + ')');

var newResult = new Array();
for(var prop in obj){
    var tmpI = -1;
    newResult.forEach((item,index,array)=>{     
        if(item["key"] == obj[prop]["key"]){
            tmpI = index;
            return;
        }
    })
    if(tmpI== -1){
        newResult.push(obj[prop]);
    }else{
     if(typeof(newResult[tmpI]["val"])!="object")   
        newResult[tmpI]["val"] = new Array(newResult[tmpI]["val"]);
        newResult[tmpI]["val"].push(obj[prop]["val"]);      
    }
}

console.log(newResult);

输出结果：

手写的，有点复杂

 var arr = [{key:'流行元素',val:'荧光'},{key:'流行元素',val:'夜光'},{key:'材质',val:'涤纶'},{key:'材质',val:'真皮'}];
    console.log(arr)
    var arr1 = []
   let obj = {}
   let arr2 =[]
   let arr3=[]
   let arr4 = []
    for (let i = 0; i < arr.length; i++) {

            let object ={}
            object.key= arr[i].key
            arr1.push(object)
            if(arr[i].key == arr[0].key){
        arr3.push(arr[i].val)
    }else{
        arr4.push(arr[i].val)
    }    

    }
    console.log(arr1,"arr1")
    console.log(arr3,arr4,"1","2")
    arr2 = arr1.reduce((cur,next) => {
    obj[next.key] ? "" : obj[next.key] = true && cur.push(next);
    if(next.key == arr[0].key){
        next.val = arr3
    }else{
        next.val = arr3
    }

    return cur;
},[]) 

console.log(arr2,"arr2");//arr2就是最后的结果

我想说这些数据是后台返回的吗？如果是，为什么不直接在数据库中查出来的时候就去重呢，那样岂不是更方便！