造轮子

        工作中碰到需要自己匹配数据的需求，后端给我两个对象数组，我需要自己把两个对象数组中相同id属性的数据匹配出来，并且返回对比后的对象然后做一些操作。

呃~~~~~

其实刚开始我是拒绝的，这个难道不是后端查表跟方便一些？，这个操作类似一个数据库的Join啊

不过想想也蛮有意思的。

一开始是需求是匹配两个对象数组的id，然后将后一个的name属性赋给前一个

let data = [

    { id:1, desc:"101", code:"121" },

    { id:2, desc:"202", code:"232" },

    { id:3, desc:"303", code:"343" }

] 

let mateData = [

    { id:1, name:'asdas', str:"shhh" },

    { id:2, name:'asdas2', str:"shhh2" },

    { id:3, name:'asdas3', str:"shhh3" }

] 

let translate=(

    data,  // 初始字段 对象数组

    mateData  // 对比数据 对象数组

)=>data.map(item=>{

    let mateRes= mateData.filter(mateItem=>item.id===mateItem.id)[0]            

    item.name=mateRes.name

    return item

})

到这是不是写完啦？ 0.0 是的勉强达到要求，但是为了更好的支持扩展。为了不支持自定义参数对比，以及自定义属性的赋值。我开始改进啦....

因此我加入了两个参数，param-比对的属性，mateParam-匹配后需要的属性

let param='id'

let mateParam='name'

let translate=(

    param, //初始字段

    mateParam, //匹配字段

    data, // 初始字段 对象数组

    mateData // 对比数据 对象数组

)=>data.map(item=>{

      let mateRes= mateData.filter(mateItem=>item[param]===mateItem[param])[0]

        item[mateParam]=mateRes[mateParam]

        return item

    })

至此这个方法就写完啦？真的么。。。

试着打印一下这个data

data

有没有发现不同？？

原数据被改了？ what？？

map不是会生成一个新数组的么

思考：map确实是个新数组，原数组的长度并没改变呀，至于这个数组内的对象嘛，这个就涉及到浅拷贝和深拷贝啦

于是我又做了以下改进：

let translate=({

    param, //初始字段

    mateParam, //匹配字段

    data, // 初始字段 对象数组

    mateData // 对比数据 对象数组

})=>data.map(item=>{

      let mateRes= mateData.filter(mateItem=>item[param]===mateItem[param])[0]

        console.log('mateRes',mateRes,item)

        let itemObj = {

            ...item // 解构对象，js中对象是引用类型，直接操作item会改变原数组中的对象

        }

        itemObj[ mateParam ]=mateRes[mateParam]

        return itemObj

    })

多加了一个解构操作，将对象深拷贝过来，妈妈再也不用担心会改变原数据啦

深拷贝浅拷贝可以参考这篇：深拷贝与浅拷贝 - 简书

如有错误和改进，请联系我