資訊專欄INFORMATION COLUMN
簡介
可讀性、性能、Spread、Reduce
在 優雅三連擊 中有同學提到了 可讀性 這個關鍵詞，就小二個人的觀點 在某個范圍內使用比較常用到的小技巧，可以提升一定的可讀性，文中提到的短路運算在初始化變量是提升可讀性的，并且在很多提倡優化if 語句的時候，短路運算符也可以起到對簡單條件語句的優雅。
// 優雅前
if (name == "") {
name = "anonymous"
}
// 優雅后
name = name || "anonymous"
畢竟可讀性能使得代碼方便理解，甚至做到不需要注釋，也包括讓人能閱讀愉快。但不能濫用這些方法來把代碼全都揉成一團，這個度怎么把握就是一門學問，很多時候與個人習慣和經驗都有一定的關系。
優雅不是一蹴而就，而是在丑化的代碼中慢慢優雅。-- 魯迅Spread
ES6的新語法糖 spread 甜得不得了，但是你知道它并不比Object.assign() 快嗎？
const user = { name: "xiaoer", height: "183" };
// ES6 - spread
const useSpread = { age: 18, ...params };
// Object.assign()
const useAssign = Object.assign({}, { age: 18 }, params);
這兩種方法 spread 語法顯然更優雅，但是在 性能基準測試 中 Object.assign() 肉眼可見的快了50%-60%。
ReduceArray.reduce() 可以和大程度上提升代碼的可讀性，但是你知道 loop 其實更快嘛？
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// Array.reduce
numbers.reduce((count, i) => count + i, 0);
// loop
function sum(arr) {
let count = 0;
for (let i = 0; i < arr.length; i++) {
count += arr[i]
}
return count;
}
sum(numbers);
很顯然 Array.reduce() 的寫法更優雅，但是在 性能基準測試 中 for 循環 肉眼可見的快了90%。
怎么辦上面兩個關于優雅的例子性能對比之下，不知道該不該繼續使用優雅方法？是不是自己之前寫的代碼都糟糕極了？
其實不必于太過糾結該不該，新的 ES6 語法糖很大程度上是為了提升開發體驗和功能， 并且一些小技巧可以提升可讀性和愉悅感，當遇到海量數據需要考慮優化時選擇 性能，當其他較為繁瑣的代碼選擇可讀性，如果你真的很在意這個可以看看這幾個建議：
什么時候可讀性優先其實現在的硬件性能已經非常快了，處理數據不多很多時候犧牲一點性能換取可讀性是應該的，畢竟開發和維護在很多時候并不是一個人的事情，而是一整個團隊幾百號人。
有的時候項目開發中上級給你分配了好幾個新人，出于開發進度和新人的不熟練，可以選擇可讀性優先，并在后期維護時對性能分析并選取優化性能。
編寫實例代碼或者教程、類庫時，考慮到讀者的水平不一定都一樣時，也可以優先可讀性在后續文章或者迭代中補充說明。小二在寫文章的時候，就是這樣把很多概念拆開來，使得閱讀時只需要聚焦一個知識點，并通過不斷更新來完善其他知識。
個人項目那肯定是怎么舒服怎么來，畢竟是要愉悅自己。
什么時候性能優先其實性能優先和可讀性優先都是相對的。
當項目在運行時發現了特別明顯的卡頓等性能問題時，就需要優先考慮性能了。
在處理大量數據時就需要考慮性能了。有的同學會說項目哪里有這么多數據，還真別說小二做過一個非常蛋疼的項目，后端直接返回幾萬條數據讓前端來處理。別說話吻我，我不想回憶這段過去了。
更多的取舍應該要出于項目實際情況進行選擇，有些性能問題是可以提前預知的，一定程度的分析需求可以節省很多代碼時間。
其他關于 基準測試 更多操作可以查看 誰敢與我一戰 。
關于 spread 更多操作可以查看 函數參數騷操作。
關于基準測試中快速初始化測試數組可以查看 優雅初始化數組。
關于大量數據優化可以查看 海量數據切割。
一起成長在困惑的城市里總少不了并肩同行的 伙伴 讓我們一起成長。
如果您想讓更多人看到文章可以點個 點贊。
如果您想激勵小二可以到 Github 給個 小星星。
如果您想與小二更多交流添加微信 m353839115。
本文原稿來自 PushMeTop
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109319.html
showImg(https://segmentfault.com/img/remote/1460000018760855?w=900&h=500); 簡介 SEO、Meta、搜索引擎優化、簡單教程 細心的同學可能發現了開頭出現了關鍵字，這是為什么呢？閱讀完本文后大家就會明白了。 同學們有沒有想過互聯網上用戶、網站 有多少呢？這里提供一個網站 internet live stats 里面實時的給出了...
showImg(https://segmentfault.com/img/remote/1460000018760855?w=900&h=500); 簡介 SEO、Meta、搜索引擎優化、簡單教程 細心的同學可能發現了開頭出現了關鍵字，這是為什么呢？閱讀完本文后大家就會明白了。 同學們有沒有想過互聯網上用戶、網站 有多少呢？這里提供一個網站 internet live stats 里面實時的給出了...
showImg(https://segmentfault.com/img/remote/1460000018709740?w=900&h=500); 簡介 數組、初始化、快速生成數組、內存泄露 有時候會需要對數組進行一些初始化，最常用到的便是 for 循環： let num = []; for (let i = 0; i < 10; i++) { // 做一些其他操作 // 或者返...
showImg(https://raw.githubusercontent.com/pushmetop/resource/master/30-seconds-for-everyday/insert-item-inside-an-array/poster.png); 簡介
showImg(https://segmentfault.com/img/remote/1460000018709378?w=900&h=500); 簡介 短路運算、逗號運算、簡化條件語句、初始化小技巧 昨天一個同學在 URL 大爆炸 問了我一個問題：這是什么寫法 (data[key] = value, data) 。平時在寫文章的時候會把這些技巧稍微提示一下，認為大家都知道這些技巧，引起了小二的...
閱讀 561·2023-04-26 02:58
閱讀 2301·2021-09-27 14:01
閱讀 3604·2021-09-22 15:57
閱讀 1168·2019-08-30 15:56
閱讀 1042·2019-08-30 15:53
閱讀 786·2019-08-30 15:52
閱讀 643·2019-08-26 14:01
閱讀 2157·2019-08-26 13:41
