Posted 2021-04-09 58鎴夸骇FE

鍑芥暟寮忕紪绋嬫€濇兂鍦ㄦ渶杩戝嚑骞村彉寰楀紓甯告祦琛岋紝璁╂垜浠姏寮€璇█鏈韩锛屼竴璧锋潵鐪嬩笅浠€涔堟槸鍑芥暟寮忕紪绋嬶紝浠ュ強濡備綍搴旂敤浜巎s鐨勪唬鐮佽璁°€?/span>

澹版槑寮忕紪绋?/span>

缂栫▼璇█鍒嗕负锛氬懡浠ゅ紡鍜屽０鏄庡紡銆傚嚱鏁板紡缂栫▼灏卞睘浜庡０鏄庡紡缂栫▼锛岀壒寰佸涓嬶細

鍛戒护寮忕紪绋嬫槸琛屽姩瀵煎悜锛屽洜鑰岀畻娉曟槸鏄炬€ц€岀洰鏍囨槸闅愬舰鐨勶紱

澹版槑寮忕紪绋嬫槸鐩爣椹卞姩锛屽洜鑰岀洰鏍囨槸鏄炬€ц€岀畻娉曟槸闅愬舰鐨勶紱

涓句釜馃尠锛?/span>

// 鍛戒护寮?/span>let leaders = []for(let i = 0; i < teams.length; i++) {  leader.push(team[i].leader)}// 澹版槑寮?/span>let leaders = teams.map(item => item.leader)

閫氳繃涓婇潰鐨勪緥瀛愬ぇ瀹跺簲璇ュ緢鏄庢樉鐨勬劅瑙夊埌澹版槑寮忓拰鍛戒护寮忕殑鍖哄埆浜嗗惂锛屾湰鏂囪鐨勬槸灞炰簬澹版槑寮忕殑鍑芥暟寮忕紪绋嬶紝濡傛灉瀵瑰懡浠ゅ紡缂栫▼鎰熷叴瓒ｇ殑璇濇帹鑽愮湅鐪嬫眹缂栵紝姣曠珶璁＄畻鏈哄簳灞傚氨鏄懡浠ゅ紡缂栫▼鏉ュ畬鎴愮殑鑰屾眹缂栨渶涓烘帴杩戙€?/span>

浠€涔堟槸鍑芥暟寮忕紪绋?/span>

鍑芥暟寮忕紪绋嬶紝鍙堢О娉涘嚱缂栫▼锛屾槸涓€绉嶇紪绋嬭寖寮忥紝瀹冨皢鐢佃剳杩愮畻瑙嗕负鏁板涓婄殑鍑芥暟璁＄畻锛屽苟涓旈伩鍏嶄娇鐢ㄧ▼搴忕姸鎬佷互鍙婃槗鍙樺璞°€?/span>

缁村熀鐧剧

鈥滆寖鈥濆嵆鍏歌寖銆佹ā鑼冦€傗€滆寖寮忊€濆嵆妯″紡鏂规硶锛?span class="mq-31">鈥滃嚱鏁板紡缂栫▼鈥濆氨鏄娇鐢ㄥ嚱鏁版潵缂栫▼鐨勪竴绉嶇紪绋嬫ā寮?/span>銆?/span>

甯歌鐨勭紪绋嬭寖寮忔湁锛氬嚱鏁板紡缂栫▼銆侀潰鍚戝璞＄紪绋嬨€侀潰鍚戣繃绋嬬紪绋嬬瓑绛夛紱瀵规垜浠墠绔皬浼欎即鏉ヨ鏈€鐔熸倝鐨刯s灏辨槸闈㈠悜瀵硅薄缂栫▼鎬濇兂锛屽畠鍜屽嚱鏁板紡缂栫▼鎬濇兂鐨勫尯鍒涓嬶細

闈㈠悜瀵硅薄 (OOP)锛氬彲鐞嗚В涓哄鏁版嵁灏佽銆傞€氳繃杩欑灏佽浣夸唬鐮佹洿鏄撲簬鐞嗚В锛?/span>

鍑芥暟寮忕紪绋?nbsp;(FP)锛氭槸涓€绉嶆娊璞¤繃绋嬬殑鎬濈淮锛屽嵆瀵瑰姩浣滆繘琛屾娊璞★紝閫氳繃鏈€灏戠殑鏀瑰彉浣垮緱浠ｇ爜鏇存槗浜庣悊瑙ｇ淮鎶わ紱

绠€鍗曟潵璇村尯鍒氨鏄?span>闈㈠悜瀵硅薄鍏虫敞鏁版嵁锛岃€屽嚱鏁板紡缂栫▼鍒欏叧娉ㄨ繃绋嬪嵆鍔ㄤ綔銆?/span>

鍑芥暟寮忕紪绋嬬壒鐐?/span>

• 涓€绾у叕姘戝嚱鏁帮細璧嬩簣鍑芥暟浣滀负鏁版嵁鍊肩殑鑳藉姏锛屽嵆鏅€氬彉閲忚兘鍋氫粈涔堝嚱鏁板氨鍙互鍋氫粈涔堬紝渚嬪鍑芥暟浣滀负鍏ュ弬杩斿洖鍊肩瓑锛?/span>

• 楂橀樁鍖垮悕鍑芥暟锛氬嚱鏁板拰lambda 璇硶鐨勫簲鐢ㄤ娇楂橀樁鍑芥暟鍙樺緱鏄撲簬瀹炵幇锛?/span>

• 闂寘锛氫笉璧樿堪锛?/span>

• 绾补鎬?/strong>锛氫笉鍏佽浠讳綍鍓綔鐢紝濡傛敼鍙樺閮ㄥ彉閲忕瓑锛?/span>

• 涓嶅彲鍙樻€?/strong>锛氫笉鍏佽鐢ㄨ〃杈惧紡鏉ヤ骇鐢熸柊鐨勬暟鎹粨鏋勬潵浠ｆ浛涓€涓凡瀛樺湪鐨勬暟鎹粨鏋勶紱

• 閫掑綊锛氫笉璧樿堪锛?/span>

浠ヤ笂鏄嚱鏁板紡缂栫▼鐨勭壒鐐广€傚浜庡墠绔繀鐢ㄧ殑Javascript璇█鏉ヨ闄や簡绾补鎬у拰涓嶅彲鍙樻€т互澶栫殑鐗规€ч兘鏄敮鎸佺殑銆?/span>

瀵逛簬涓嶅彲鍙樻€?/span>鏉ヨ锛宩s鏄釜寮辩被鍨嬭瑷€闇€瑕侀澶栫殑鏀寔锛岀幇鍦ㄦ湁涓€浜涗笁鏂瑰簱濡侷mmutable.js绛夊彲浠ユ彁渚涙敮鎸侊紱

瀵逛簬绾补鎬?/strong>鏉ヨ锛屾垜浠渶瑕佸埗瀹氫竴浜涜鑼冭繘琛屾敮鎸侊紱

浠€涔堟槸绾嚱鏁?/span>

鍑芥暟寮忕紪绋嬫槸灏嗙數鑴戣繍绠楄涓烘暟瀛︿笂鐨勫嚱鏁拌绠?鏁板涓婄殑鍑芥暟灏辨槸绾嚱鏁帮紝灏辨槸鍑芥暟寮忕紪绋嬬殑鍩虹 銆備笅鍥惧氨鏄竴涓暟瀛︿笂鐨勫嚱鏁帮細

鍑芥暟鏄笉鍚屾暟鍊间箣闂寸殑鐗规畩鍏崇郴锛氭瘡涓€涓緭鍏ュ€艰繑鍥炰笖鍙繑鍥炰竴涓緭鍑哄€煎嵆涓€涓垨澶氫釜x鍙搴斾竴涓獃锛?/span>

鑰屼笅鍥捐繖绉嶄竴涓緭鍏ワ紙x锛夊搴斿涓緭鍑猴紙y锛夌殑鍏崇郴灏变笉鏄嚱鏁帮細

绾嚱鏁扮壒鐐?/span>

• 鐩稿悓杈撳叆蹇呭畾杩斿洖鐩稿悓杈撳嚭锛?/span>

• 涓嶄細淇敼浠ュ弬鏁板舰寮忎紶閫掕繃鏉ョ殑瀵硅薄锛?/span>

• 瀹冧笉渚濊禆浜庡嚱鏁板閮ㄤ换浣曠姸鎬佹垨鏁版嵁鐨勫彉鍖栵紝蹇呴』鍙緷璧栦簬鍏惰緭鍏ュ弬鏁帮紱

• 涓嶄細浜х敓浠讳綍鍙瀵熺殑鍓綔鐢紝渚嬬綉缁滆姹傦紝IO璇诲啓鎴杁om鎿嶄綔鏌ヨ銆佸啓鏃ュ織銆佸湪灞忓箷杈撳嚭銆佸啓鏂囦欢銆佽Е鍙戜换浣曞閮ㄨ繘绋嬨€佽皟鐢ㄥ彟涓€涓湁鍓綔鐢ㄧ殑鍑芥暟绛夈€?/span>

  
  

鑺变竴鍒嗛挓鍐嶈涓€閬嶇函鍑芥暟鐨勭壒鐐癸紱

鎴戜滑鏉ユ祴璇曚竴涓嬶紝浠ヤ笅鍥涗釜鍑芥暟鍝簺鏄函鍑芥暟锛?/span>

// 鍑芥暟涓€function add (x, y) {  return x + y}// 鍑芥暟浜?/span>let count = 0;function addCount () { count ++;}// 鍑芥暟涓?/span>function random (min, max) {return Math.floor(Math.random() + (max - min)) + min;}// 鍑芥暟鍥?/span>function setColor (el, color) {  el.style.color = color;}

鎯冲ソ浜嗕箞锛熺瓟妗堝涓嬶細

1銆佹槸绾嚱鏁般€佹棤鍓綔鐢紱

2銆佷笉鏄函鍑芥暟銆佽緭鍑轰笉纭畾銆佹湁鍓綔鐢紙淇敼浜嗗閮ㄧ殑鍙橀噺锛夛紱

3銆佷笉鏄函鍑芥暟锛岃緭鍑轰笉纭畾锛屾棤鍓綔鐢紱 

4銆佷笉鏄函鍑芥暟锛屼慨鏀逛簡dom锛屽澶栨湁鍓綔鐢紙鏀瑰彉浜哾om鐨勯鑹诧級锛?/span>

鎴戜滑鍐嶆潵涓€涓煂帮紝涓嬮潰change鍑芥暟鏄函鍑芥暟涔堬紵

function setColor (el, color) { el.style.color = color;}function change (fn, els, color) {  els.map(item => (fn(item, color)))}// els涓篸om闆嗗悎change(setColor, els, 'blue')

绛旀锛?/span>

涓嶆槸锛岃櫧鐒禼hange鍑芥暟鏈韩娌℃湁淇敼dom锛屼絾鏄紝鎴戜滑寮鸿皟涓€鐐癸紝绾嚱鏁扮殑渚濊禆蹇呴』鏄棤褰卞搷鐨勶紝涔熷氨鏄鍦ㄥ唴閮ㄤ换浣曟搷浣滈兘涓嶈兘瀵瑰閫犳垚褰卞搷锛屼絾鏄痵etColor鍑芥暟鏀瑰彉浜哾om鐨勬牱寮忥紝鎵€浠ュ畠涓嶆槸绾嚱鏁般€傞偅涔堝浣曞皢鍏惰浆鍖栨垚涓€涓函鍑芥暟鍛紝鎴戜滑鏉ョ湅涓嬩竴涓蹇碉細鏌噷鍖?/span>

鏌噷鍖?/span>

閮ㄥ垎搴旂敤鍜屽鍚堟槸鍑芥暟寮忕紪绋嬬殑閲嶈鐗瑰緛銆傚湪閲囩敤鍛戒护寮忕紪绋嬬殑鏃跺€欙紝姣忓綋鎴戜滑闇€瑕佹娊璞″嚭涓€涓柊鍔熻兘鐨勬椂鍊欙紝灏辩浉搴旂殑瀹氫箟涓€涓嚱鏁版潵瀹炵幇銆備絾鏄湪鍑芥暟寮忕紪绋嬩腑锛屾垜浠氨鍙互閫氳繃閮ㄥ垎搴旂敤鍜屽鍚堟潵浣跨敤鐜版湁鍑芥暟鎷兼帴鎴愭柊鐨勫嚱鏁帮紝绫讳技浜庢惌绉湪銆傛煰閲屽寲灏辨槸閮ㄥ垎搴旂敤鐨勪緥瀛愩€?/span>

鏌噷鍖栵紙currying锛夋槸鎶婃帴鍙楀涓弬鏁扮殑鍑芥暟杞崲鎴愭帴鍙椾竴涓崟涓€鍙傛暟锛堝嚱鏁扮殑绗竴涓弬鏁帮級鐨勫嚱鏁帮紝骞朵笖杩斿洖鎺ュ彈浣欎笅鍙傛暟骞朵笖杩斿洖缁撴灉鐨勬柊鍑芥暟锛岀畝瑷€涔嬪氨鏄妸涓€涓鍙傛暟鍑芥暟杞寲鎴愬崟鍙傛暟鍑芥暟銆傚惉璧锋潵寰堜贡鍚э紝鎴戜滑鐪嬩釜馃尠锛?/span>

// 鏌噷鍖栧墠function add (x, y) {  return x + y;}add(1, 2)
// 鏌噷鍖栧悗function addX (y) {  return function (x) {   return x + y  }}add(2)(1)

閫氳繃缁欏嚱鏁癮ddX浼犻€掑弬鏁皔鐢熸垚浜嗕竴涓彲浠ュ仛鍔犳硶杩愮畻骞惰繑鍥炵粨鏋滅殑鏂板嚱鏁般€備腑閫旇繑鍥炵敓鎴愮殑鍑芥暟 鏄竴绉嶅鍙傛暟鐨勨€滅紦瀛樷€濄€?/span>

鎴戜滑鏉ョ湅鐪嬩箣鍓嶄笉绾痗hange鍑芥暟濡備綍鎻愮函銆?/span>

function setColor (el, color) { el.style.color = color;}function change (fn, els, color) { els.map(item => (fn(item, color)))}// els涓篸om闆嗗悎change(setColor, els, 'blue')

姣忔璋冪敤change鍑芥暟鐨勬椂鍊欐垜浠兘甯屾湜鍙傛暟 fn 鐨勫€約etColor锛屽洜涓烘垜鎯虫妸涓嶅悓鐨勮壊缁欏埌涓嶅悓鐨刣om涓娿€傛敼鍐欏悗濡備笅锛?/span>

function change(fn) {  return fucntion (els, color) {   Array.from(els).map(item => fn(item.color))  }}let newSetColor = change(setColor)newSetColor(els, 'blue')

鏀瑰啓鍚庢棤璁篺n鏄粈涔堬紝return鍑虹殑閮芥槸鍞竴纭畾鐨勫嚱鏁帮紝鍦╟hange涓彧鏄墽琛?/span>return璇彞锛宻etColor寰堢啛骞舵湭鍦╟hange涓婃墽琛岋紝鎵€浠hange瀵瑰骞舵病鏈変骇鐢?/span>褰卞搷銆傝繖鏄痗hange灏辨槸涓€涓函鍑芥暟鍟

涔嬪墠璇磋繃閮ㄥ垎搴旂敤鍜屽鍚堟槸鍑芥暟寮忕紪绋嬬殑閲嶈鐗瑰緛锛岄儴鍒嗗簲鐢ㄨ瀹屼簡锛岃鎴戜滑鐪嬬湅鍑芥暟鐨勫鍚堛€?/span>

鍑芥暟澶嶅悎

濡傛灉涓€涓彉閲廰=1锛屾垜浠笇鏈涘厛鎵ц+3锛團鍑芥暟锛夛紝鐒跺悗鍐?5锛圙鍑芥暟锛夛紝鏈€鍚庡緱鍒扮粨鏋滄槸20锛涢偅涔堝彲浠ュ厛灏咶銆丟鍚堝苟鎴怟鎿嶄綔锛屼箣鍚巃鐩存帴鎵цK灏卞彲浠ュ緱鍒癮=20锛屼細鍐欎负G(F(1))锛?/span>

function F (x) { return x + 3}function G (x) { return x * 5}// 杈撳嚭20G(F(1));

鐜板湪锛屽鏋滄垜浠鍋氫竴绯诲垪鎿嶄綔锛?/span>鍏?1鍐?2鍐?3鍐?4鍐?5鍐?4鍐?6.銆傘€傝鍐欐垚A(B(C(D(E(F(...))))))涔堬紵

锛坋mmmmmm锛燂級

姝ｅ父鎯呭喌涓嬫槸涓嶄細鍑虹幇杩欑"绁炰粰浠ｇ爜"鐨勶紝閫氳繃浠ｇ爜澶嶅悎鎴戜滑鍙互寰堣交鏄撹В鍐斥€滄磱钁变唬鐮佲€濈殑闂锛岀幇鍦ㄦ潵瀹炵幇涓€涓猚ompose鏂规硶鏉ヨ繘琛屽鍚?

redux涓篃鏈夌粍鍚堝嚱鏁扮殑瀹炵幇锛岀簿鍗庡湪鏈€鍚庝竴鍙ャ€?/span>