摘要：而用來聲明一些根據(jù)判斷條件會(huì)發(fā)生變化的變量。函數(shù)中盡量避免的嵌套是十分常見的一種邏輯。僅對(duì)原數(shù)組進(jìn)行一次遍歷。當(dāng)然，使用專門的請(qǐng)求庫也是很好的選擇。以上總結(jié)僅僅是個(gè)人對(duì)于工作中的一些細(xì)節(jié)上的經(jīng)驗(yàn)之談。

不知不覺，正式工作馬上兩年了，待了兩家公司，做過的項(xiàng)目也不少了，總結(jié)一下自己在寫代碼上的經(jīng)驗(yàn)累積。

不要使用==，使用===

JS是弱類型語言，類型檢查不嚴(yán)格。在判斷兩個(gè)變量是否相等的時(shí)候，使用==會(huì)進(jìn)行隱式的類型轉(zhuǎn)換。比如：

["a"] == "a"; // true;
1 == "1"; // true;

在前端項(xiàng)目日益復(fù)雜的今天，早已不再是后端吐出數(shù)據(jù)，前端直接展示就行了。一些計(jì)算是需要放在前端進(jìn)行的。前端要進(jìn)行計(jì)算，那么變量的類型在整個(gè)過程中，就必須是明確的。不然很容易出一些bug。舉個(gè)最簡(jiǎn)單的例子，

var a = "0.1"; 
var b;
if(a == 0.1) {
    b = a.toFixed(3); // 出錯(cuò)，因?yàn)樽址疀]有toFixed方法。
}

多使用const聲明變量

聲明一個(gè)變量的時(shí)候，首先明確這個(gè)變量的類型，用const 進(jìn)行聲明。這樣后續(xù)寫代碼過程中，能夠清晰的知道這個(gè)變量的類型，避免對(duì)變量進(jìn)行不合法的操作或者一不小心對(duì)變量進(jìn)行了修改，出現(xiàn)bug。并且，一開始使用const聲明變量，后續(xù)review代碼時(shí)，思路能稍微清晰一點(diǎn)(這個(gè)變量就是用來干這個(gè)事情的，它是不會(huì)改變的)。而let用來聲明一些根據(jù)判斷條件會(huì)發(fā)生變化的變量。

使用大寫的變量名來定義常量

使用const來聲明變量后，那用什么來聲明常量，并且可以避免和const聲明的變量混淆呢？可以采用大寫變量名來聲明常量。比如圓周率

const PI =3.1415926535;

在代碼中，看到名字大寫的變量是，我就知道了，這是一個(gè)全局的常量。

純函數(shù)，就是不會(huì)產(chǎn)生副作用的函數(shù)。舉一個(gè)例子，

const fn = arr => { // 非純函數(shù)
    arr.push(1);
}

const pureFn = arr => {  // 純函數(shù)
    return [].slice.call(arr).push(1);
}

const oldArr = [2,3];
fn(oldArr); // fn修改了原數(shù)組，不純

const newArr = pureFn(oldArr); // pureFn返回了一個(gè)新數(shù)組，沒有修改原數(shù)組。

使用純函數(shù)的好處是，函數(shù)的輸出僅僅依賴輸入，不會(huì)受外部條件影響，并且不會(huì)影響到外部的環(huán)境。調(diào)試代碼時(shí)，可以以函數(shù)為單位來驗(yàn)證、測(cè)試。

像上面的例子，我們?cè)诤瘮?shù)fn中修改了oldArr, 如果我們?cè)诹硗庖粋€(gè)地方又需要操作oldArr的時(shí)候, 我們能100%的保證知道這個(gè)oldArr已經(jīng)被修改過了嘛？當(dāng)業(yè)務(wù)邏輯變得復(fù)雜的時(shí)候，我們很容易就忽略了這個(gè)問題，導(dǎo)致出現(xiàn)莫名其妙的bug。而純函數(shù)就不會(huì)有這種問題，我們只需要關(guān)注其輸入和輸出就行。

再考慮一種情況，在使用vue或者react進(jìn)行開發(fā)的時(shí)候，經(jīng)常會(huì)遇到我明明更新了這個(gè)數(shù)組，可是頁面沒有重新渲染的問題。這是因?yàn)椋?b>vue和react在進(jìn)行數(shù)據(jù)的diff時(shí)，對(duì)于數(shù)組(引用數(shù)據(jù)類型)，都沒有采用深比較。如果我僅僅只改變了數(shù)組中的一個(gè)元素時(shí)，數(shù)組其實(shí)并沒有變化，vue和react發(fā)現(xiàn)沒有diff，當(dāng)然不會(huì)重新渲染。使用純函數(shù)就不會(huì)有這個(gè)問題，因?yàn)槊看味际欠祷匾粋€(gè)全新的數(shù)組。

if 、else是十分常見的一種邏輯。如果在代碼中，出現(xiàn)了復(fù)雜的嵌套，會(huì)降低代碼可讀性，并且容易出錯(cuò)。比如下面的代碼：

function fn (a,b,c){
    if(a>1){
        if(b === c){
            return true;
        } else {
            return false;
        }
    } else {
        return true;
    }
}

以上代碼可以改寫為，避免了多層的嵌套，代碼的可讀性得到了增強(qiáng)。

function fn(a,b,c){
    if(a <= 1) {
        return true;
    }
    if(b === c){
        return true;
    }
    return false;
}

同時(shí)，還可以多使用短路，減少if 、 else的使用

var b;
if(condition) {
    b = 1;
}

// 可以改寫成
var b;
condition && (b = 1);

Array.forEach、Array.map、Array.filter、Array.reduce等等，都是特別好用的數(shù)組操作方法，幾乎可以滿足各種的遍歷需要了，比for循環(huán)來得優(yōu)雅。

Array.forEach僅對(duì)原數(shù)組進(jìn)行一次遍歷。

Array.map對(duì)原數(shù)組進(jìn)行遍歷，返回一個(gè)新數(shù)組。

Array.filter對(duì)原數(shù)組進(jìn)行過濾，同時(shí)返回一個(gè)新數(shù)組。

Array.reduce對(duì)原數(shù)組進(jìn)行一次遍歷，可以進(jìn)行累加。

但其實(shí)for循環(huán)有一個(gè)以上方法都沒有的優(yōu)點(diǎn)，for循環(huán)可以隨時(shí)中止數(shù)組的遍歷，break一下就行。

可以根據(jù)不同場(chǎng)景采用不同的遍歷方法。

如今寫代碼已經(jīng)很少使用jQuery和zepto了。jQuery和zepto確實(shí)給我們帶來了很大的方便，但很多時(shí)候，使用jQuery或者zepto只是為了使用選擇器，發(fā)送請(qǐng)求，簡(jiǎn)單動(dòng)畫。選擇器完全可以用querySelector等代替了，發(fā)送網(wǎng)絡(luò)請(qǐng)求，不管是ajax或者jsonp，自己封裝一個(gè)就行，沒有必要為了這一個(gè)功能，引入一個(gè)完整的jQuery或zepto。當(dāng)然，使用專門的http請(qǐng)求庫也是很好的選擇。簡(jiǎn)單動(dòng)畫使用css3就可以完成了，并不需要使用js操作DOM。

在業(yè)務(wù)中，一些經(jīng)常使用的小的功能，比如獲取dom元素距離頁面頂部的高度，獲取url中的參數(shù)，判斷變量類型，函數(shù)防抖，函數(shù)節(jié)流等等，完全可以封裝進(jìn)自己的小工具庫，在多個(gè)項(xiàng)目中使用。

工作時(shí)間還不夠長，代碼量也還不夠，對(duì)于javascript的一些高級(jí)應(yīng)用，編程技巧，各種設(shè)計(jì)模式在項(xiàng)目中的應(yīng)用，項(xiàng)目的整體架構(gòu)等還沒有很深入的理解，react、vue等框架也只是會(huì)用而已，并沒有很深入的研究。

以上總結(jié)僅僅是個(gè)人對(duì)于工作中的一些細(xì)節(jié)上的經(jīng)驗(yàn)之談。歡迎交流。