每一門語言都有一些奇技淫巧，JS也不例外，一直想總結這麼篇文章，我包括一些新手，都會有這麼一個疑問，每次面對一張空白的頁面，不知從何下手，沒有思路，高手有的是設計模式，但是在這裏講一些設計模式，我可能不夠格，這些書籍都有可以自己去翻閱，我能給的就是，總結我寫代碼的時候，會優化的一些技巧
實用篇
1.立即執行
我爲什麼把立即執行放在第一個，因爲一般做業務的時候都會有一個入口函數，比如一下這種格式
function init(){
//...
}
init()我一開始也跟上面這樣寫，但是後來看了《你所不知道的javaScript》，我是這麼寫的
(function init(){
//...
})()立即執行的好處：
作用域隔離,因爲init這個函數名是沒有必要在全局作用域中展示的
2.常量解耦
這個技巧我在業務中也是經常使用的，沒學會之前是這麼寫的
function(){
console.log(12345678901)
}但是學會之後，是這樣的
const TEL = 12345678901
function(){
console.log(TEL)
}可能這裏有人會問，你這不是多此一舉，而且還添加了一個全局常量，但是事實是這樣的，好處如下：
- 當多處引用這個常量的時候，當你修改的時候，只要修改一處代碼即可
- 這樣寫出來的代碼更具語義話，舉個例子，有些請求回調中ERROR常量一般爲1，擺在那別人很難看懂
3.遞歸的解耦
這個方法在紅寶書中有寫到，我不知道常不常用，如有錯誤，請糾正我，因爲我遞歸一直在用，面試寫算法題也在用，沒學會之前的寫法
function a(){
//...
a();
}學會之後，我的遞歸一般是這麼寫的
function a(){
//...
argument.callee();
}解耦的好處：
修改函數名即可，不影響裏面的代碼
補充：
評論裏指出的很正確，在嚴格模式下不能使用，我去mdn的官網翻了api文檔，貼圖如下：
4.整數的轉換之加法篇
你可能以前看到過parseInt和parseFloat這兩個方法來轉換成number類型的整數型和浮點型，其實，一開始我也是用這麼笨的方法的，爲什麼說笨呢，舉個例子
let str = '123'
console.log(typeof parseInt(str)); //number接下來是加號操作符
let str = '123'
console.log(typeof +str); //number好處就不多說了吧，你打字打得累死，不如加號來的快，而且加號實現方式還優雅
5.短路操作
沒學會這個方法之前我的代碼是這樣的：
if(!foo){
foo = bar
}但是我學會短路操作之後的是這樣的：
foo = foo || bar好處：
- 代碼量減少
- 書寫優雅
缺點：
代碼可讀性降低
短路原理：
在js中&&和||這兩個操作符有一個特性，比如&&前後有兩個表達式，前者爲false，後者不會執行，||會反過來
補充：評論裏面有人建議用!!代表true，用!代表false，這一點認可，這樣操作是有好處的，!!代表強制轉化成true，這樣做的目的就是保證值只能在true/false中取，而非其它值。最近在看vue源碼，細想一下，尤神也有對這點的應用
vue源碼
6.條件表達式
條件表達式或許在每門語言中都會用到，你沒學會之前你會這麼寫
if(a === true){
b = c;
}else{
b = d;
}但是你學會之後，你會這麼寫
let b = a ? c : d好處：
1.減少代碼量
2.代碼優雅
缺點：
代碼可讀性降低
7.調試之alert
我沒有實習之前不喜歡用alert的，現在也不怎麼用，都是console.log，這樣就可以在瀏覽器的控制檯中看到頁面數據的輸出，但是h5不一樣，h5有時候pc端沒什麼問題，但是手機端就是各種bug，想調試一個數據很麻煩，但是我們有個寶貝，alert這個東西在手機端調試比console.log棒的地方就是我們能看見我們的數據，他會以一個彈框的形式顯示給我們
補充：關於這個調試，我說的確實不夠詳細，其實自己在實習過程中還用到插件，那是一個webpack的插件，和評論裏說的那個一模一樣，這個插件有很多好處，在手機端就像console控制檯一樣，可以看報錯，但是我翻了我們項目的源碼，貼圖如下：
vconsole
8.優雅的向下取整
向下取整有很多種方式，做常用的，是調用Math的方法，如下圖的例子
let num = 1.23
let num1 = Math.floor(num);
console.log(num1); //1但是下面有一種更加優雅的方式
let num = 1.23
let num1 = num | 0;
console.log(num1) // 1這種方式更加簡潔，這種方式的原理是來源於js的位運算，這邊的 | 不是邏輯或，是按或運算
- 注意點：
- Math.floor(NaN)返回的是NaN，但是或零返回的是0；
- Math.floor(Infinity)返回的是Infinity，但是或零返回的是0；
補充:評論中補充了一個～～也可以向下取整，確實更加優雅，推薦，關於這個原理有興趣的朋友可以自己去看一下，～是取反操作符，我試了一下1.234取反是-2，在取反就是1，不過以上注意點變了
- ~~NaN等於0，這個原理就是js會先調用Number，把NaN轉化成false，false取反就是-1，在取反就是0。
9.單聲明的形式
在編程中，最好養成一個習慣，一個函數的參數，聲明在函數的頂部，然後用這個聲明操作符來完成，例如：
let a = 0,
b = 0,
c = 0,
d = 0;- 這樣的好處有：
- 變量名不散亂，比較容易尋找
- 少代碼量
- 防止你聲明變量的時候出錯
10.綁定this
這個怎麼解釋呢？其實es6箭頭函數已經解決了，我也當一個技巧跟大家絮叨絮叨，我們在設計整個js代碼怎麼書寫的時候，常常會把一塊功能相同的代碼放到一塊，看看下面的例子，你就懂了
function bindEvent(){
let _this = this;
function a () {
//可以在a中使用_this;
}
function b () {
//可以在b中使用_this;
}
}- 總結：