造輪子

? ? ? ? 工作中碰到需要自己匹配數(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


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)系我

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末施逾,一起剝皮案震驚了整個濱河市敷矫,隨后出現(xiàn)的幾起案子例获,更是在濱河造成了極大的恐慌,老刑警劉巖曹仗,帶你破解...
    沈念sama閱讀 211,265評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件榨汤,死亡現(xiàn)場離奇詭異,居然都是意外死亡怎茫,警方通過查閱死者的電腦和手機收壕,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,078評論 2 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來轨蛤,“玉大人蜜宪,你說我怎么就攤上這事∠樯剑” “怎么了圃验?”我有些...
    開封第一講書人閱讀 156,852評論 0 347
  • 文/不壞的土叔 我叫張陵,是天一觀的道長缝呕。 經(jīng)常有香客問我澳窑,道長,這世上最難降的妖魔是什么供常? 我笑而不...
    開封第一講書人閱讀 56,408評論 1 283
  • 正文 為了忘掉前任摊聋,我火速辦了婚禮,結(jié)果婚禮上话侧,老公的妹妹穿的比我還像新娘栗精。我一直安慰自己,他們只是感情好瞻鹏,可當我...
    茶點故事閱讀 65,445評論 5 384
  • 文/花漫 我一把揭開白布悲立。 她就那樣靜靜地躺著,像睡著了一般新博。 火紅的嫁衣襯著肌膚如雪薪夕。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,772評論 1 290
  • 那天赫悄,我揣著相機與錄音原献,去河邊找鬼。 笑死埂淮,一個胖子當著我的面吹牛姑隅,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播倔撞,決...
    沈念sama閱讀 38,921評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼讲仰,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了痪蝇?” 一聲冷哼從身側(cè)響起鄙陡,我...
    開封第一講書人閱讀 37,688評論 0 266
  • 序言:老撾萬榮一對情侶失蹤冕房,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后趁矾,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體耙册,經(jīng)...
    沈念sama閱讀 44,130評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,467評論 2 325
  • 正文 我和宋清朗相戀三年毫捣,在試婚紗的時候發(fā)現(xiàn)自己被綠了详拙。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,617評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡培漏,死狀恐怖溪厘,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情牌柄,我是刑警寧澤畸悬,帶...
    沈念sama閱讀 34,276評論 4 329
  • 正文 年R本政府宣布,位于F島的核電站珊佣,受9級特大地震影響蹋宦,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜咒锻,卻給世界環(huán)境...
    茶點故事閱讀 39,882評論 3 312
  • 文/蒙蒙 一冷冗、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧惑艇,春花似錦蒿辙、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,740評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至恭取,卻和暖如春泰偿,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背蜈垮。 一陣腳步聲響...
    開封第一講書人閱讀 31,967評論 1 265
  • 我被黑心中介騙來泰國打工耗跛, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人攒发。 一個月前我還...
    沈念sama閱讀 46,315評論 2 360
  • 正文 我出身青樓调塌,卻偏偏與公主長得像,于是被迫代替她去往敵國和親惠猿。 傳聞我的和親對象是個殘疾皇子羔砾,可洞房花燭夜當晚...
    茶點故事閱讀 43,486評論 2 348

推薦閱讀更多精彩內(nèi)容