今天小編我給大家整理了一份20個必備的javascript小技巧，看懂是入門，全會寫就是大神，你能知道幾個呢？

前端有什麼不懂的，或者不知道怎麼學習的可以來我的前端群：589651705，不管你是小白還是大牛，小編都歡迎，不定期分享乾貨，歡迎初學和進階中的小夥伴。

1、變量轉換

看起來很簡單，但據我所看到的，使用構造函數，像Array()或者Number()來進行變量轉換是常用的做法。始終使用原始數據類型（有時也稱為字面量）來轉換變量，這種沒有任何額外的影響的做法反而效率更高。

轉換日期(new Date(myVar))和正則表達式(new RegExp(myVar))必須使用構造函數，而且創建正則表達式的時候要使用/pattern/flags的形式。

2、玩轉數字

3、判斷屬性是否存在

這個問題包含兩個方面，既有檢查屬性時候存在，還要獲取屬性的類型。但我們總是忽略了這些小事情:

但是，有的情況下，我們有更深的結構和需要更合適的檢查的時候，可以這樣：

4、對數組排序進行“洗牌”隨機排序

這段代碼在這裡使用Fisher Yates洗牌算法給一個指定的數組進行洗牌(隨機排序)。

5、返回對象的函數能夠用於鏈式操作

當創建面向對象的JavaScript對象的function時，函數返回一個對象將能夠讓函數可鏈式的寫在一起來執行。

6、為replace()方法傳遞一個函數

有的時候你想替換字符串的某個部分為其它的值，最好的方法就是給String.replace()傳遞一個獨立的函數。下面是一個簡單例子：

7、十進制轉換為十六進制或者八進制，或者反過來

你是不是寫個單獨的函數來轉換十六進制（或者八進制）呢？馬上停下吧！有更容易的現成的函數可以用：

8、更快的四捨五入

今天的技巧是關於性能。見到過雙波浪線"~~"操作符嗎？它有時也被稱為double NOT運算符。你可以更快的使用它來作為Math.floor()替代品。為什麼呢？

單位移~將32位轉換輸入-(輸入+1)，因此雙位移將輸入轉換為-(-(輸入+1))，這是個趨於0的偉大的工具。對於輸入的數字，它將模仿Math.ceil()取負值和Math.floor()取正值。如果執行失敗，則返回0，這可能在用來代替Math.floor()失敗時返回一個NaN的時候發揮作用。

雖然~~可能有更好的表現，為了可讀性，請使用Math.floor()。

前端有什麼不懂的，或者不知道怎麼學習的可以來我的前端群：589651705，不管你是小白還是大牛，小編都歡迎，不定期分享乾貨，歡迎初學和進階中的小夥伴。

9、模板字符串

截至ES6，JS已經有模板字符串作為替代經典的結束引用的字符串。

10、處理一個數組或單個元素作為參數的方法

相比於寫個單獨的方法去分別操作一個數組和一個元素作為參數的函數，更好的是寫一個通用的函數，這樣就都可以操作。這類似於一些jQuery的方法(css匹配將修改所有的選擇器)。

你僅需要先將一切放進數組，Array.concat會接收數組或單一的對象：

printUpperCase現在可以接收無論單一的元素作為參數還是一個數組：

11、Javascript版本檢測

你知道你的瀏覽器支持哪一個版本的Javascript嗎？如果不知道的話，去維基百科查一下Javascript版本表吧。出於某種原因，Javascript 1.7版本的某些特性是沒有得到廣泛的支持。不過大部分瀏覽器都支持了1.8版和1.8.1版的特性。（注：所有的IE瀏覽器（IE8或者更老的版本）只支持1.5版的Javascript）這裡有一個腳本，既能通過檢測特徵來檢測JavaScript版本，它還能檢查特定的Javascript版本所支持的特性。

12、循環中標籤的使用

有的時候，循環中又嵌套了循環，你可能想在循環中退出，則可以用標籤：

13、提升

理解提升將幫助你組織你的function。只需要記住，變量聲明和定義函數會被提升到頂部。變量的定義是不會的，即使你在同一行中聲明和定義一個變量。此外，變量聲明讓系統知道變量存在，而定義是將其賦值給它。

為了使事情更容易閱讀，在函數作用域內提升變量的聲明將會讓你明確該變量的聲明是來自哪個作用域。在你需要使用變量之前定義它們。在作用域底部定義函數，確保代碼清晰規範。

14、為replace()方法傳遞一個函數

有的時候你想替換字符串的某個部分為其它的值，最好的方法就是給String.replace()傳遞一個獨立的函數。下面是一個簡單例子：

15、使用document.createDocumentFragment()

您可能需要動態地追加多個元素到文檔中。然而，直接將它們插入到文檔中會導致這個文檔每次都需要重新佈局一個，相反的，你應該使用文檔碎片，建成後只追加一次：

這篇文章到這裡就分享結束了，我整理了一些（小案例帶源碼和騰訊內部代碼規範）想要練手的小夥伴進我的群自助領取，已經上傳到群文件裡了：589651705，歡迎學習交流的小夥伴。

如果想看更加系統的文章和學習方法可以關注我的微信公眾號：‘web前端課程’關注後回覆‘給我資料’可以領取一套完整的學習視頻