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