流行的高级前端不会树形转扁平化，你真的会手写吗

鍓嶈█澶у濂斤紝鎴戞槸姊佹湪鏈夈€傜浉淇″ぇ瀹跺湪鎴戜滑鐨勫疄闄呴」鐩腑浼氱粡甯搁亣鍒?Tree*鏍戝舰鎺т欢锛屽绾х粨鏋勫垪琛ㄣ€傚ぇ澶氭暟浼佷笟灏嗕娇鐢ㄥ彲鎼滅储鏍戣繘琛屾ā绯婃悳绱€傛湁娌℃湁鎯宠繃锛屽綋鏁版嵁閲忔瘮杈冨ぇ锛屽彲浠ュ鏍戣繘琛屽鍒犳敼鏌ユ椂锛屼細鍑虹幇浠€涔堟牱鐨勬晥鏋滐紵antdtree鏍戞帶浠剁殑鍥句緥搴旇鎬庝箞浼樺寲鍛紵涓嬪浘1鏄痑ntd瀹樼綉鐨勪緥瀛愶紝鍥?鏄悳绱㈠悗鐨勬爲鐘剁粨鏋溿€傛牴鎹笂鍥撅紝鎴戜滑浼氳寰楀緢濂斤紝鏁堟灉涓嶅ソ锛屽鏋滄湁闂锛岄┈涓婂鍒剁矘璐村埌鑷繁鐨勫伐绋嬩腑銆傪煒勷煒勷煒勬垜澶紭绉€浜嗭紝寰堝埄绱㈢殑瀹屾垚浜嗕竴涓姹傘€傛槸杩欐牱鍚楋紵鍡紝鏄殑锛屾病閿欍€傜‘瀹炲彲浠ユ弧瓒虫病鏈夌壒娈婃暟鎹噺鐨勯渶姹傘€傚鏋滆瀹炵幇鏇村鏉傜殑鍔熻兘锛屾瘮濡傚鏍戠殑澧炲垹鏀规煡锛屼笅闈㈣璇翠細鍑虹幇浠€涔堥棶棰樸€傚疄鐜板悜鏍戜腑娣诲姞鑺傜偣銆佷粠鏍戜腑淇敼鑺傜偣銆佷粠鏍戜腑鍒犻櫎鑺傜偣鐨勫姛鑳姐€傚浜庝互涓婁笁涓姛鑳斤紝涓婇潰鐨刟ntd渚嬪瓙杩樻弧鎰忓悧锛熺瓟妗堣偗瀹氫笉鏄紝閭ｆ垜浠氨闇€瑕佸湪瀹冪殑鍩虹涓婅繘琛屼簩娆″紑鍙戯紝鎴栬€呰嚜宸变粠澶村紑鍙戙€傚浜庡姛鑳戒紭鍖栵紝棣栧厛闇€瑕佹€濊€冮噸鐐规槸浠€涔堛€備笉鐢ㄨ浜嗭紝褰撶劧鏄弧瓒宠姹備簡锛屼綔涓烘垜浠紑鍙戣€呮潵璇达紝灏辫繖涔堢畝鍗曘€傝繖鏃跺€欎骇鍝佸張鏉ヤ簡锛岃鎴戜滑杩欐５鏍戞暟鎹噺姣旇緝澶э紝瑕佽€冭檻鐢ㄦ埛浣撻獙銆備緥濡傦紝鍦ㄧ敤鎴锋悳绱腑锛屾垜浠殑鏍戠粨鏋滄樉绀洪渶瑕侀潪甯稿揩閫熷湴鏇存柊銆傛垜浠笉甯屾湜鐢ㄦ埛鍦ㄥ姞杞芥椂鍙戝憜銆傛垜浠笇鏈涗粬浠湪鍊熸鏈轰細鍠濇澂鍜栧暋鐨勫悓鏃朵笓娉ㄤ簬浣跨敤鎴戜滑鐨勭郴缁熴€傛悳绱㈠悗锛岃妭鐐圭殑鏄剧ず鍜屽睍寮€搴旇鏄竴鐩簡鐒剁殑銆傛棤鍏宠妭鐐瑰強鍏跺搴旂殑鐖惰妭鐐逛笉闇€瑕佸湪椤甸潰涓婃樉绀烘垨鏄剧ず锛岀敤鎴风殑澧炲垹鏀规煡涔熼渶瑕佹棤鐥曟洿鏂般€傝繖鏃跺€欙紝鎴戜笉灞戰煒掟煒掟煒掔殑鐪肩銆備紭鍖栨柟娉曢鍏堬紝鎴戜滑瑕佺煡閬撳浣曢伩鍏嶄笂杩颁綋楠屼笉浣崇殑鎯呭喌銆傛垜浠兘鐭ラ亾鏍戝舰鏁版嵁鏄祵濂楀瓙鏁版嵁鐨勩€傞偅涔堝綋鎴戜滑闇€瑕佸鏌愪釜鑺傜偣杩涜鎿嶄綔鏃讹紝灏遍渶瑕侀€掑綊锛岀洿鍒板緱鍒板搴旂殑鑺傜偣銆傞偅涔堟垜浠彧闇€瑕侀伩鍏嶈繖绉嶉€掑綊鎿嶄綔鍗冲彲銆傚浣曢伩鍏嶅憿锛屾垜浠彲浠ュ皢鏍戝瀷鏁版嵁杞寲涓哄钩闈㈡暟鎹紝鍙瀵规爲杩涜浠讳綍鎿嶄綔锛屾垜浠兘浼氬湪骞抽潰鏁版嵁涓鐞嗗悇绉嶆搷浣滐紝鐒跺悗灏嗗钩闈㈡暟鎹浆鍖栦负鏍戝瀷鏁版嵁锛岄€氳繃鎿嶄綔鎵佸钩鍖栫殑鏁版嵁锛屾垜璁や负澶ч儴鍒嗙殑缁忛獙闂閮藉彲浠ヨВ鍐炽€傜劧鍚庣湅浠ｇ爜鏄浣曞疄鐜版牸寮忓寲鏍戞暟鎹粨鏋勪负鎵佸钩鏁版嵁缁撴瀯/***@description鏍煎紡鍖栨爲鏁版嵁缁撴瀯涓烘墎骞虫暟鎹粨鏋?@paramdata浼犲叆鍒濆鏁版嵁*@paramtreeDatareturn杩斿洖缁撴灉*@param_params鏇挎崲鍒濆鏁版嵁涓殑key銆乼itle銆乧hildren瀛楁涓巘ree缁勪欢涓殑瀵瑰簲瀛楁*@param_level灞傜骇*@paramparentIds鐖惰妭鐐筰d闆嗗悎锛岀敤浜庤缃畃id*@param_params.other鑷畾涔夊瓧娈甸渶瑕佽繑鍥?/exportfunctionformatFlatTree(data,_params:any={},_level=1,parentIds:string[]=[],treeData:TreeDataState[]=[]){if(!data.length){杩斿洖鏍戞暟鎹紱}甯搁噺鍒楄〃锛歍reeDataState[]=[];const鍙傛暟={id:_params.id||'閿?锛屾爣棰橈細_params.title||'鏍囬'锛屽瀛愶細_params.children||'瀛╁瓙'锛屽叾浠栵細_params.other||[],};constpIds:string[]=[];甯搁噺瀵硅薄={};for(leti=0;i{obj[element]=node[element];});}鏍戣揪ta.push({key:key,title:node[param.title],pid:parentIds[i]||'0',level:_level,...obj,});list.push(...瀛╁瓙);pIds.push(...newArray(child.length).fill(key));}returnformatFlatTree(list,param,_level+1,pIds,treeData);}灏嗗钩闈㈡暟鎹浆鎹负鏍戝舰鏁版嵁/**灏嗗钩闈㈡暟鎹粨鏋勬牸寮忓寲涓烘爲褰㈡暟鎹粨鏋?/exportfunctionformatTree(list){constdata=JSON.parse(JSON.stringify(list));constobj={},鏍?ftDataState[]=[];data.forEach((item)=>{obj[item.key]=item;});data.forEach((item)=>{constparent=obj[item.pid];if(parent)(parent.children||(parent.children=[])).push(item);elsetrees.push(鐗╁搧锛?}锛?杩斿洖鏍戯紱}