日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

日常开发之重构

發布時間:2023/12/2 编程问答 34 豆豆
生活随笔 收集整理的這篇文章主要介紹了 日常开发之重构 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

作為開發人員,應該讓重構貫穿于你的開發日常的每一刻。

為什么這么說?

重構是為了改善軟件的設計、結構和實現,同時保留其現有的功能。 重構的潛在優勢包括提高代碼的可讀性和降低復雜度。 這些都可以提高源代碼的可維護性,并創建一個更簡單、更干凈或更有表現力的內部架構或對象模型,從而提高程序的可擴展性。

原因我覺得有兩方便,一個是客觀的因素,隨著技術的不斷更新迭代,語言的特性也在更新(朝著更高效便捷的方向)。另一個則是人為因素,不同的人由于開發水平的不同寫出來的代碼也各盡不同。

在一個團隊中你除了要寫自己的代碼,而且還要接手別人的代碼,作為一個leader更要去給別人做code review。

所以,重構是如此的必要,而且悄無聲息。

舉個例子,最近在看到一段代碼后,立刻讓我產生重構的沖動。

舊代碼如下:

首先定義兩個常量,對象和數組

const data = {Angular: 3,React: 1,Vue: 2,Next: 1,HTML: 2,Other: 3 }; const colors = ['#d17a29','#da9554','#e3af7f','#edcaa9','#f6e4d4','#204e77' ];

利用for操作,取出以上對象的key和value和數組元素組成新的數組

let sortable = []; let index = 0;for (let temp in data) {sortable.push([temp, data[temp], colors[index] ? colors[index] : '#D3D3D3']);index++; }sortable.sort(function(a, b) {return b[1] - a[1]; });

最終輸出結果:

[['Angular', 3, '#d17a29'],['Other', 3, '#204e77'],['Vue', 2, '#e3af7f'],['HTML', 2, '#f6e4d4'],['React', 1, '#da9554'],['Next', 1, '#edcaa9'] ]

從邏輯實現上沒有任何問題。但總感覺哪里不對,是不是有更高效的實現方式呢?

重構后的代碼

也許是寫代碼的慣性使然,立馬想到使用Map方法可以將數據返回你想要的格式。

但是對象數據格式好像不支持Map方法。

所以我們得先將對象轉化成數組

const newOutput = Object.entries(data);

我們將得到以下格式的數組

[['Angular', 3],['React', 1],['Vue', 2],['Next', 1],['HTML', 2],['Other', 3] ]

是不是和最終想要的結果有點類似了,數組的元素中還差了一個color的值,以及最終需要將它們排序。

接著我們根據索引將color的值添加到以上輸出結果中

const newOutput = Object.entries(data) .map(([title, amount], index) => [title,amount,colors[index] || "#fff"] );

這里或者使用數組解構更容易理解一點

const newOutput = Object.entries(data).map((item, index) => [...item,colors[index] || '#fff']).sort((a, b) => b[1] - a[1]);

在取不到值的時候我們給添加了一個默認的顏色值

[['Angular', 3, '#d17a29'],['React', 1, '#da9554'],['Vue', 2, '#e3af7f'],['Next', 1, '#edcaa9'],['HTML', 2, '#f6e4d4'],['Other', 3, '#204e77'] ]

最后只剩下一步,我們需要按第二項給數組排序,很容易就想到用sort方法

const newOutput = Object.entries(data).map(([title, amount], index) => [title,amount,colors[index] || "#fff"]).sort((a, b) => b[1] - a[1])

以上代碼輸出:

[['Angular', 3, '#d17a29'],['Other', 3, '#204e77'],['Vue', 2, '#e3af7f'],['HTML', 2, '#f6e4d4'],['React', 1, '#da9554'],['Next', 1, '#edcaa9'] ]

沒有問題,兩種不同的代碼都得到了最終的結果。但是重構后的代碼量明顯比之前的少了很多,而且結構更嚴謹。

寫代碼的過程中要學會舉一反三,及時擁抱語言的新特性能給我們帶來更好的編程體驗。

另:以上代碼在
【利好工具】JavaScript及時運行調試工具中運行更佳

總結

以上是生活随笔為你收集整理的日常开发之重构的全部內容,希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。