變數、函式和運算子

變數宣告

function doSomething() {
    
    var result = 10 + value;
    var value = https://www.cnblogs.com/wangzhaoyv/p/10;
    return result;
}

變數value在宣告之前參與了運算，這是完全合法的，盡管這樣會造成result的計算結果是一個特殊值NaN，這是因為JavaScript中有變數提升機制，也就是將兩個var陳述句提前至函式的頂部，相當于

function doSomething() {
    
    var result;
    var value;
    
    result = 10 + value;
    value = https://www.cnblogs.com/wangzhaoyv/p/10;
    
    return result;
}

變數宣告提升意味著：在函式內部不管任何地方定義的變數和在函式頂部定義變數是完全一致的,因此，一種流行的風格就是將所有變數宣告放在函式的頂部而不是散落在各個角落，簡而言之，依照這種風格寫出來的代碼邏輯和JavaScript引擎決議這段代碼的習慣非常的相似

作者推薦這種寫法，并且推薦在函式頂部使用單var陳述句

function doSomething() {
    
    var value = https://www.cnblogs.com/wangzhaoyv/p/10,
        result = value + 10,
        i,
        len;
    
    for (i = 0, len = items.length; i < len; i++) {
        console.log(items[i]);
    }  
}

推薦合并var陳述句，這可以讓你的代碼更短，下載更快

函式宣告

和變數宣告一樣，函式宣告也會被JavaScript引擎提前，因此，在代碼重函式的呼叫可以出現在函式宣告之前，

不好的做法：先使用后宣告

doSomething();
 
function doSomething() {
    console.log("hello word")
}

這段代碼是可以正常運行的，因為JavaScript引擎將這段代碼決議為：

function doSomething() {
    console.log("hello word")
}

doSomething();

由于JavaScript的這種行為，我們推薦總是先宣告JavaScript函式然后在使用函式，Crockford的編程規范里包含這種設計，而且還推薦在宣告變數之后就宣告

function doSomethingWithItems(items) {
    var i, len,
        value = https://www.cnblogs.com/wangzhaoyv/p/10,
        result = value + 10;
    
    function doSomething(item) {
        // 代碼邏輯
    }
    
   for (i = 0, len = items.length; i < len; i++) {
        doSomething(items[i]);
    }  
}

不好的寫法：在陳述句塊內宣告函式

if (flag) {
    function doSomething() {
        alert("Hi");
    }
} else {
    function doSomething() {
        alert("Yo!");
    }
}

這段代碼不會按照我們的意圖執行，這段代碼在不同瀏覽器中的運行結果也是不盡相同，不管flag的計算結果如何，大多數瀏覽器都會自動使用第二個宣告，而Firefox則根據flag的計算結果選用合適的函式宣告，這種場景是ECMAScript的一個灰色地帶，應盡可能的避免

函式呼叫間隔

推薦寫法： 在函式名和左括號之間沒有空格，這樣做是為了將它和塊陳述句區分開來

// 好的寫法
doSomething(item);

// 不好的寫法
doSomething (item);

// 用來做比較的塊陳述句
while (item) {
    // 代碼邏輯
}

立即呼叫的函式

推薦使用()包裹住自執行函式

var value = https://www.cnblogs.com/wangzhaoyv/p/(function() {
    // 函式體
    
    return {
        message:"Hi"
    }
}())

嚴格模式

"use strict",這條編譯指令不僅僅適用于全域，還是適用于區域，比如一個函式內，但是不推薦將"use strict"用在全域作用域中，因為這會讓檔案中的所有代碼都以嚴格模式決議，所以如果將11個檔案合并為一個檔案時，當其中一個檔案在全域作用域中啟用了嚴格模式，那么所有代碼都會以嚴格模式決議，這樣非嚴格模式下的代碼就會報錯

// 不好的寫法
"use strict";
function doSomething() {
    // 代碼
}

// 好的寫法
function doSomething() {
    "use strict";
    // 代碼
}


// 好的寫法 ： 多個函式使用嚴格模式
(function() {
    "use strict";
    
    function doSomething1() {
        // 代碼
    }
 
    function doSomething2() { 
        // 代碼
    }
})();

相等

由于JavaScript有強制型別轉換機制，JavaScript中的判斷相等操作是很微妙的，如果不知道== 和 != 的比較規則，可以看看這篇第一章 JavaScript簡介,由于這種微妙，所以推薦使用=== 和 !== 進行判斷

eval()

eval()的引數是一個字串，eval()會將傳入的字串當做代碼來執行，開發者可以通過這個函式載入外部的JavaScript代碼，或隨即生成JavaScript代碼并執行它

eval("alert('Hi!')");

var count = 10;
var number = eval("5 + count");
console.log(number); // 15

在JavaScript中不止eval()有這樣的功能，使用Function建構式也可以做到這一點，setTimeout()和setInterval()也可以

var myfunc = new Function("alert('Hi!')");

setTimeout("document.body.style.background='red'", 50);

setInterval("document.title = 'It is now '" + (new Date()), 1000);

嚴格模式下對eval()有著嚴格的限制，禁止在一個封閉的作用域中使用它創建新的變數或者函式，這條限制幫助我們避免了eval()的先天安全漏洞（嚴格模式下，傳入eval()的字串無法在呼叫函式所在的背景關系宣告變數或函式，非嚴格模式下是可以這樣做的），盡量少使用eval()，不使用Function，setTimeout，setInterval

原始包裝型別

JavaScript中的一個不易被了解且常常誤解的方面是，這門語言對原始包裝型別的依賴，JavaScript里的有3原始包裝型別：String，Boolean，Number，每種型別都代表全域作用域中的一個建構式，并分別表示對各自對應原始值的對像，原始包裝型別的主要作用是對原始值具有物件的行為

注：原始值本身不具有物件特征，比如1.toString()是報錯的，

必須要

var a = 1;

a.toString();

var name = "Nicholas";
console.log(name.toUpperCase());

盡管name是一個字串，是原始型別不是物件，但是你仍然可以使用toUpperCase()之類的方法，即將字串當做物件來對待，這種做法之所以行得通，是因為在這條陳述句的表象背后JavaScript引擎創建了一個String型別的新實體，緊跟著被銷毀了，當再次需要時就會又創建另一個物件，你可以通過給字串增加屬性來檢驗這種行為，

var name = "Nicholas";
name.author = true;
console.log(name.author); // undefined

第二行結束后，author屬性就不見了，因為表示這個字串的臨時String物件在第二行執行完成后就銷毀了

不好的寫法

var name = new String("Nicholas");
var author = new Boolean(true);
var count = new Number(10);

最后

第一部分的內容總算是結束了，這部分主要是編碼風格，從格式化，到注釋然后在到陳述句的撰寫，最后一些特殊的代碼撰寫，寫這么多為了什么呢！！！主要還是要扼殺bug在搖籃中，后面將會在編碼實踐上進行編碼上的規范

標籤：JavaScript

上一篇：CentOS 8.2服務器上安裝最新版Node.js

下一篇：Vue-Cli腳手架搭建詳細步驟