整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
常工作中，我確實經常去幫大家review代碼，長期以來，我發現有些個功能函數，JS其實可以稍微調整一下，或者換個方式來處理，代碼就會看起來更清晰，更簡潔，甚至效率更高，主要是還更好理解。
下面我列舉5個案例，我們一起來看一下
先來看一段同時使用filter和map方法遍歷數組的代碼。我相信這種場景大家一定碰到過。為了說明問題，這里我用簡單的數字內容來舉個例子。
上面代碼這樣寫，沒什么問題，而且方法的連用也是比較推薦的處理方式， 但是，還是請多想想，其實我們有更好的方式來處理這一類問題。
現在我們看使用FlatMap如何實現的
使用FlatMap的好處是
只要遍歷一遍，而且不產生中間多余數組
日常工作中寫的比較多的數組方法有filter()，find()，map()，reduce()，在必要的場景下，我們也建議將這些個方法連起來一起調用。但是，一定要注意調用順序，否則也會影響效率問題。
比如下面這樣：
仔細看上面這段代碼，你就會發現
如果我們首先使用過濾器，然后排序，這樣執行就能提高效率
你寫的代碼一定要讓大家看的懂，代碼要簡潔，然而，有些方法它就出于這個目的創造的，如果你又不用，那就太可惜了，比如reduce方法。
舉個例子，我們先從接口中拉出一段數據，然后對數據內容進行分類處理，像下面代碼這樣
我看到大多數前端開發人員都會使用forEach方法或者錯誤的使用map方法去處理，相比之下，實際上這里特別適合使用reduce方法
看起來會更清晰而且更容易理解
上面這張很清晰明了的拆解了URL的每一部分
關于頁面的URL我們可以組裝也可以拆卸，這里說一下URL各部分的組裝問題，你現在或者曾經肯定處理過URL拼接的問題，代碼可能是這么寫的
這樣寫雖然能夠實現，但是代碼看起來很混亂，很可能會被破壞，并且每次都需要你在最后添加一些規則，添加一些其他參數。
比如，你可能忘記添加/或者&符號就會導致錯誤，下面看看原生類怎么實現的，可以對比一下兩者區別
這樣看來，在處理URL組裝問題上是不是可以考慮使用原生類了？
提到生成器，大家可能只是聽過，或者知道怎么使用，而實際項目中很少去用。實際上它有很多使用場景。
使用生成器能夠節省很多代碼，代碼也非常清晰。如，進行異步操作或者按需循環或者按需加載時。
看這段代碼：
上面代碼中main函數，可以根據用戶交互或者其它技巧來調用。因為這里不希望無限加載。
好了，就說這幾點，日常工作中，希望大家都寫出高質量的代碼。
數的編寫與使用
在程序設計語言中函數是一段具有特殊功能的代碼，同時也是一組可以重復使用的代碼。通過函數這一對象的使用，進一步提高了程序開發的模塊化與高度多的代碼復用性。各種程序設計語言都對函數的定義及使用有著嚴格的語法規則。本文主要介紹如何在JavaScript中定義函數、使用函數，并對遞歸函數這一特殊類型函數進行說明。
JavaScript中所定義的函數主要由函數定義關鍵字、函數名稱、函數參數、執行代碼段與函數返回值5部分所組成。同時要求函數在使用過程中需要先定義函數，再調用函數。JavaScript函數定義基本語法描述如下：
JavaScript函數定義基本語法
JavaScript函數定義基本語法描述如上圖，說明如下：
函數定義語法說明
函數定義完成之后，就可以通過調用該函數完成特定的功能。函數調用方式較為簡單，只需要給出函數名稱與所傳遞參數，如果參數為空，只需要給出名稱后面的括號即可。關于參數部分需要注意形參與實參概念的區分。其中在函數定義中用于解釋說明語言的參數為形參。在函數調用過程中替代形參參與實際運算的參數為實參。示例說明如下：
形參與實參示例說明
匿名函數（Anonymous function），顧名思義是指沒有名字的函數，即在上面給出的基本語法中functionName部分可以省略的函數。在JavaScript中提供兩類基本匿名函數定義方式，一種是將匿名函數封裝為表達式，一種是將匿名函數賦值給變量形式。兩類匿名函數基本語法描述如下：
匿名函數的定義形式
匿名函數定義形式描述如上圖所示，上文中計算解決值函數我們可以使用兩種方法改寫為匿名函數，實現描述如下：
匿名函數使用實例
遞歸函數是一類特殊的函數類型，簡單理解即為在一個函數的內部調用了該函數自身。在使用遞歸函數是需要注意產生遞歸的條件與遞歸終止的條件。如同循環控制語句一樣，沒有遞歸終止的條件，程序將會一直占用資源，無法結束釋放資源。遞歸函數的說明可以從階乘的計算這一案例展開說明。階乘計算過程描述如下：
階乘計算原理
階乘計算過程描述如上圖所示，我們可知階乘問題的解決主要在于遞推關系的挖掘與終止條件的確定。本例中遞推關系為N!=N*(N-1)！，終止條件為1！=1；在明確這兩點之后我們可以編寫遞歸函數實現問題求解。遞歸函數描述如下圖：
階乘問題的遞歸求解編程實現
爬樓梯問題是使用遞歸算法進行問題求解的經典案例之一，爬樓梯問題主要只是假設有N階樓梯，需要從最底層爬到最高層，在上樓過程中每步只允許上1層或者2層，計算爬到N層總共方法有多少種？
爬樓梯方法問題
爬樓梯方法問題采用遞歸思想還是比較簡單的，我們可以從小人最后一步考慮。小人上到最高層N層時只能有兩種方法：
①從N-2層跨越2層到達N層；
②從N-1層跨越1層到達N層；
則計算到達N層的方法f(n)就等于到達N-1層方法f(n-1)與達N-2層方法f(n-2)之和。這就找到了我們進行遞推的關系式，終止條件即為f(1)=1和f(2)=2;
因此我們可以編程實現計算，實現代碼如下：
爬樓梯遞歸求解代碼
本頭條號長期關注編程資訊分享；編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見，可以聯系作者，共同探討。更多程序設計相關教程及實例分享，期待大家關注與閱讀！JavaScript基礎教程系列教程鏈接如下：
JavaScript基礎教程（六）流程控制之循環語句
JavaScript基礎教程（五）流程控制之條件語句
重點 前端19 個 JavaScript 簡寫方法！新手們趕緊學起來！
1.三元操作符
當想寫 if...else 語句時，使用三元操作符來代替。
簡寫：
也可以嵌套
2.短路求值簡寫方式
當給一個變量分配另一個值時，想確定源始值不是null，undefined或空值。可以寫撰寫一個多重條件的if語句。
或者可以使用短路求值方法：
3.聲明變量簡寫方法
簡寫方法：
4.if存在條件簡寫方法
簡寫：
只有likeJavaScript是真值時，二者語句才相等。
我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。
如果判斷值不是真值，則可以這樣：
簡寫：
5.JavaScript循環簡寫方法
簡寫：for(letindexinallImgs)也可以使用Array.forEach：
6.短路評價
給一個變量分配的值是通過判斷其值是否為null或undefined，則可以：
簡寫：
7.十進制指數
當需要寫數字帶有很多零時（如10000000），可以采用指數（1e7）來代替這個數字：for(leti=0;i<10000;i++){}簡寫：
8.對象屬性簡寫
如果屬性名與key名相同，則可以采用ES6的方法：
簡寫：
9.箭頭函數簡寫
傳統函數編寫方法很容易讓人理解和編寫，但是當嵌套在另一個函數中，則這些優勢就蕩然無存。
簡寫：
10.隱式返回值簡寫
經常使用return語句來返回函數最終結果，一個單獨語句的箭頭函數能隱式返回其值（函數必須省略{}為了省略return關鍵字）
為返回多行語句（例如對象字面表達式），則需要使用()包圍函數體。
簡寫：
11.默認參數值
為了給函數中參數傳遞默認值，通常使用if語句來編寫，但是使用ES6定義默認值，則會很簡潔：
簡寫：
12.模板字符串
傳統的JavaScript語言，輸出模板通常是這樣寫的。
ES6可以使用反引號和${}簡寫：
13.解構賦值簡寫方法
在web框架中，經常需要從組件和API之間來回傳遞數組或對象字面形式的數據，然后需要解構它。
簡寫：
也可以分配變量名：
14.多行字符串簡寫
需要輸出多行字符串，需要使用+來拼接：
使用反引號，則可以達到簡寫作用：
15.擴展運算符簡寫
擴展運算符有幾種用例讓JavaScript代碼更加有效使用，可以用來代替某個數組函數。
簡寫：
不像concat()函數，可以使用擴展運算符來在一個數組中任意處插入另一個數組。
也可以使用擴展運算符解構：
16.強制參數簡寫
JavaScript中如果沒有向函數參數傳遞值，則參數為undefined。為了增強參數賦值，可以使用if語句來拋出異常，或使用強制參數簡寫方法。
簡寫：
17.Array.find簡寫
想從數組中查找某個值，則需要循環。在ES6中，find()函數能實現同樣效果。
簡寫：
18.Object[key]簡寫
考慮一個驗證函數：
假設當需要不同域和規則來驗證，能否編寫一個通用函數在運行時確認？
現在可以有適用于各種情況的驗證函數，不需要為了每個而編寫自定義驗證函數了
19.雙重非位運算簡寫
有一個有效用例用于雙重非運算操作符。可以用來代替Math.floor()，其優勢在于運行更快，可以閱讀此文章了解更多位運算。
簡寫：
* 作者：SangSir
* https://segmentfault.com/a/1190000012673854
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
