js實用的十個小技巧

前言

每一門語言都有一些奇技淫巧，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複製代碼

好處：

1. 代碼量減小
2. 書寫優雅

缺點：
代碼可讀性下降

短路原理：
在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;
    }
}複製代碼

• 總結：
  上面不少技巧，我平時也在用，若是有錯，請大家糾正，若是有受益，麻煩點個👍，謝謝。

備註：
真知源於實踐，此篇文檔純原創，要轉載請註明出處，喜歡的點個star，github