摘要:更多信息嵌套三元運算符之前改造后我承認,一開始,使用嵌套三元運算符的想法的確令人倒胃口。當然使用三元運算符具有兩面性,但就我個人而言,嵌套三元運算符真的越來越吸引我了。
在這篇文章中,我介紹了一些編程時嘗試使用的模式。這些模式是多年來我自己在工作中實踐的結果,也有是從同事那里偷偷學到的。
這些模式沒有特定的順序,只是一個簡單的集合。
提前退出(early exits)function transformData(rawData) { // check if no data if (!rawData) { return []; } // check for specific case if (rawData.length == 0) { return []; } // actual function code goes here return rawData.map((item) => item); }
我將這種模式稱為“提前退出(early exits)”,但有些人也將此稱為“保鏢模式(the Bouncer Pattern)”或“保護條款("guard clauses)”。撇開命名不談,該模式采用的方法是首先檢查無效的情況,然后從該函數返回,否則它將繼續使用該函數的預期情況并執行。
對我來說,這種方法有一些我非常喜歡的優點:
有助于思考無效和邊界情況,以及在這種情況下該如何處理。
避免對意外情況進行意外和不必要的代碼處理
這樣使我更能清楚地處理每種情況
一旦使用這種方式,您就可以快速地瀏覽函數并理解流程和執行,這通常遵循自頂向下的方法,即從無效的情況—>小情況—>預期情況。
更多信息:保鏢模式(the Bouncer Pattern)
2. 用對象字面量替代 Switch// Switch let createType = null; switch (contentType) { case "post": createType = () => console.log("creating a post..."); break; case "video": createType = () => console.log("creating a video..."); break; default: createType = () => console.log("unrecognized content type"); } createType(); // Object literal const contentTypes = { post: () => console.log("creating a post..."), video: () => console.log("creatinga video..."), default: () => console.log("unrecognized content type") }; const createType = contentTypes[contentType] || contentTypes["default"]; createType();
接下來就是要移除 Switch。在寫 case 的時候我經常會犯錯誤,也會忘記寫 break,這會引起各種有趣的問題。當我編寫代碼時,switch語句并沒有體現太多的價值。
我更喜歡使用對象字面量,原因如下:
不用擔心 cace 或 break。
更容易閱讀并快速了解正在發生的事情
對象字面量很容易寫
代碼量少
3. 用一次循環處理兩個數組const exampleValues = [2, 15, 8, 23, 1, 32]; const [truthyValues, falseyValues] = exampleValues.reduce((arrays, exampleValue) => { if (exampleValue > 10) { arrays[0].push(exampleValue); return arrays; } arrays[1].push(exampleValue); return arrays; }, [[], []]);
這種模式沒什么特別的,我應該早點意識到,但我發現自己過濾一組元素,以獲得所有匹配特定條件的元素,然后在另一種情況下要再做一次。這意味著對一個數組進行兩次循環,但我可以只做一次。
原來它有一個名字(bifurcate),我從 30secondsofcode.org借鑒過來的。如果你從未去過那個網站,我建議你去那里。有很多有用的信息和代碼。
我知道 reduce 可能會讓人望而生畏,也不太清楚會發生什么,但如果你能適應它,在遍歷集合時,您可以真正利用它來構建所需的任何數據結構。他們應該叫它 builder 而不是 reduce。
4. 不要用 foo 做變量// bad const foo = y && z; // good const isPostEnabled = isPost && postDateValid;
這看起來很明顯,但我相信我們都見過這樣做的代碼。花點時間,盡你最大的努力取個合適的名字。
這對于在職的專業人士或處于教育他人位置的人來說尤其重要。應該使用變量命名來幫助解釋,在代碼的上下文中發生了什么事情。
別人能夠在閱讀您的代碼時,并大致可以理解要解決的問題。
更多信息:The art of naming variables
5. 嵌套三元運算符// 之前 let result = null; if (conditionA) { if (conditionB) { result = "A & B"; } else { result = "A"; } } else { result = "Not A"; } // 改造后 const result = !conditionA ? "Not A" : conditionB ? "A & B" : "A";
我承認,一開始,使用嵌套三元運算符的想法的確令人倒胃口。它看起來是一種編寫條件的巧妙方式。
然后我開始編寫業務邏輯,發現自己使用了嵌套的 if else 語句和一些非常可疑的條件邏輯。
我認為使用 if 和 else更容易閱讀,因為它們是實際的單詞,有語義化,但當它們嵌套后,我開始很難理解發生了什么,并在心里默默跟蹤所有情況。
我認為這種模式取決于你、你的團隊的偏好。我在代碼庫中也很好的使用這種方式。當然使用三元運算符具有兩面性,但就我個人而言,嵌套三元運算符真的越來越吸引我了。
更多信息:Nested Ternaries are Great by Eric Elliot
如果對你有幫助,請關注【前端技能解鎖】:
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/105780.html
摘要:負責部門大大小小的事務,大到方案制定與落實,小到吃飯喝酒大保健。這都是我喜歡的表現行動。想做就馬上做,喜歡就堅持做希望年后的你們不會后悔你現在的決定有點胡說八道了,大家多多體諒本文參與了我的編程之路計劃,歡迎正在閱讀的你也加入,一起分享。 爆照 showImg(https://segmentfault.com/img/bVtmco); 有女朋友,但是不能爆照。哈哈哈哈...... 目前...
摘要:作為函數式編程語言,帶來了很多語言上的有趣特性,比如柯里化和反柯里化。在一些函數式編程語言中,會定義一個特殊的占位變量。個人理解不知道對不對延遲執行柯里化的另一個應用場景是延遲執行。不斷的柯里化,累積傳入的參數,最后執行。作為函數式編程語言,JS帶來了很多語言上的有趣特性,比如柯里化和反柯里化。 這里可以對照另外一篇介紹 JS 反柯里化 的文章一起看~ 1. 簡介 柯里化(Currying)...
摘要:可能是世界上最受歡迎的編碼挑戰網站,自十多年前首次推出以來它一直都是幾十萬用戶的家。在線評測是成千上萬的編碼挑戰的寶庫,這讓你忙上幾個星期。允許用戶添加自己的挑戰,組織編程競賽,并爭取最高的排名。 原文地址:https://www.evget.com/article...每個人都知道編程正在成為幾乎每個行業的重要組成部分,它對組織的幫助和對大型系統的維護是獨一無二的,因此越來越多的人開...
摘要:六個月前,我辭掉了初級開發者的工作,并去東南亞旅行了五個月。我的目標了解更多資料我原本計劃去東南亞旅行個月,我也有信心在旅行回來后能夠找到一份更好的工作。申請工作我下一站旅行地是老撾境內一個偏遠的攀爬區。 金三銀四,謹以此文獻給所有正在準備跳槽的你。 showImg(https://segmentfault.com/img/bVbhXVQ?w=640&h=640);六個月前,我辭掉了初...
閱讀 916·2021-09-09 09:32
閱讀 2873·2021-09-02 10:20
閱讀 2704·2021-07-23 11:24
閱讀 833·2019-08-30 15:54
閱讀 3636·2019-08-30 15:54
閱讀 1350·2019-08-30 11:02
閱讀 2849·2019-08-26 17:40
閱讀 1130·2019-08-26 13:55