? ? ? ? 工作中碰到需要自己匹配數(shù)據(jù)的需求,后端給我兩個對象數(shù)組白翻,我需要自己把兩個對象數(shù)組中相同id屬性的數(shù)據(jù)匹配出來乍炉,并且返回對比后的對象然后做一些操作。
呃~~~~~
其實剛開始我是拒絕的滤馍,這個難道不是后端查表跟方便一些岛琼?,這個操作類似一個數(shù)據(jù)庫的Join啊
不過想想也蠻有意思的巢株。
一開始是需求是匹配兩個對象數(shù)組的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,? // 初始字段 對象數(shù)組
????mateData? // 對比數(shù)據(jù) 對象數(shù)組
)=>data.map(item=>{
????let mateRes= mateData.filter(mateItem=>item.id===mateItem.id)[0]? ? ? ? ? ??
????item.name=mateRes.name
????return item
})
到這是不是寫完啦? 0.0 是的勉強達到要求阁苞,但是為了更好的支持擴展困檩。為了不支持自定義參數(shù)對比,以及自定義屬性的賦值那槽。我開始改進啦....
因此我加入了兩個參數(shù)悼沿,param-比對的屬性,mateParam-匹配后需要的屬性
let param='id'
let mateParam='name'
let translate=(
? ? param, //初始字段
? ? mateParam, //匹配字段
? ? data, // 初始字段 對象數(shù)組
? ? mateData // 對比數(shù)據(jù) 對象數(shù)組
)=>data.map(item=>{
? ? ? let mateRes= mateData.filter(mateItem=>item[param]===mateItem[param])[0]
? ? ? ? item[mateParam]=mateRes[mateParam]
? ? ? ? return?item
? ? })
至此這個方法就寫完啦骚灸?真的么糟趾。。甚牲。
試著打印一下這個data
有沒有發(fā)現(xiàn)不同义郑??
原數(shù)據(jù)被改了丈钙? what非驮??
map不是會生成一個新數(shù)組的么
思考:map確實是個新數(shù)組雏赦,原數(shù)組的長度并沒改變呀院尔,至于這個數(shù)組內(nèi)的對象嘛,這個就涉及到淺拷貝和深拷貝啦
于是我又做了以下改進:
let translate=({
? ? param, //初始字段
? ? mateParam, //匹配字段
? ? data, // 初始字段 對象數(shù)組
? ? mateData // 對比數(shù)據(jù) 對象數(shù)組
})=>data.map(item=>{
? ? ? let mateRes= mateData.filter(mateItem=>item[param]===mateItem[param])[0]
? ? ? ? console.log('mateRes',mateRes,item)
? ? ? ? let itemObj = {
? ? ? ? ? ? ...item // 解構(gòu)對象喉誊,js中對象是引用類型,直接操作item會改變原數(shù)組中的對象
? ? ? ? }
? ? ? ? itemObj[ mateParam ]=mateRes[mateParam]
? ? ? ? return itemObj
? ? })
多加了一個解構(gòu)操作纵顾,將對象深拷貝過來伍茄,媽媽再也不用擔心會改變原數(shù)據(jù)啦
深拷貝淺拷貝可以參考這篇:深拷貝與淺拷貝 - 簡書
如有錯誤和改進,請聯(lián)系我