js實用的十個小技巧

laihuamin發表於2017-09-30
原文網址 : https://juejin.im/post/59cf5eeb51882578e00dfcde
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原始碼
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
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

相關文章