一、JavaScript概要

1.1、JavaScript組成 

• ECMAScript定義了該語言的語法、型別、語句、關鍵字、保留字、操作符、物件等核心內容；

• 文件物件模型（Document Object Model，簡稱DOM）定義處理網頁內容的方法和介面，提供了對整個文件的訪問模型，將文件作為一個樹形結構，樹的每個結點表示了一個HTML標籤或標籤內的文字項。

• 瀏覽器物件模型（Browser Object Model，簡稱BOM）定義了與瀏覽器進行互動的方法和介面，BOM由多個物件組成，其中代表瀏覽器視窗的Window物件是BOM的頂層物件，其他物件都是該物件的子物件。

1.2、JavaScript特點

JavaScript主要被作為客戶端指令碼語言在瀏覽器上執行，能被用來設計和處理網頁在事件發生時的行為。JavaScript是一個動態指令碼語言，支援基於原型的物件構造。

• 解釋型的指令碼語言：JavaScript是一種解釋型的指令碼語言,Java、C#等語言先編譯後執行,而JavaScript是在程式的執行過程中逐行進行解釋的；

• 基於物件：JavaScript是一種基於物件的語言，能運用自己已經建立了的物件，許多功能可以來自於指令碼環境中物件的方法與指令碼的相互作用。

• 事件驅動：JavaScript可以直接對使用者或客戶輸入做出響應，無需經過web服務程式。他對使用者的響應，是以事件驅動的方式進行的，所謂事件驅動，指的是在主頁執行了某種操作所產生的動作，此動作稱為"事件"。

• 跨平臺：JavaScript依賴於瀏覽器本身，不依賴於作業系統。只要能執行瀏覽器的平臺，並支援JavaScript就可以正確執行,目前幾乎所有的瀏覽器都支援JavaScript。

• 安全性：JavaScript是一種安全性語言。它不允許訪問本地的磁碟，並不能將資料存入伺服器上；不允許對網路文字進行修改和刪除，只能通過瀏覽器實現資訊瀏覽或動態互動。可有效的防止資料丟失。

• 弱型別：JavaScript語言中採用的是弱型別的變數型別,對使用的資料型別未做出嚴格的要求, 弱型別語言是相對強型別語言來說的，在強型別語言中變數型別有多種，例如int、float、boolean等，不同的型別相互轉換有時需要強制轉換，而JavaScript在定義變數時可以不指定型別且不同的型別相互轉換有時無需強制轉換。

二、ECMAScript（JavaScript核心與語法）

2.1、ECMAScript介紹

ECMAScript（簡稱ES）是形成JavaScript語言的核心。

2.2、資料型別

2.2.1、typeof運算子用於檢視變數型別

<script>
        console.log(typeof(8));  //number
        console.log(typeof("nfit"));  //string
        console.log(typeof(true));  //boolean
        console.log(typeof(null)); //null->object
        console.log(typeof(undefined));  //undefined
        console.log(typeof([]));  //object
        console.log(typeof 1==="number");  //false
</script>

2.2.2、instanceof運算子用於引用型別判斷

<script>
        console.log([] instanceof Array);  //陣列[]是Array的例項嗎？

        function Student(){};  //建構函式,相當於類

        var tom=new Student();  //例項化物件
        console.log(tom instanceof Student);  //true
        console.log(tom instanceof Object);  //true
        console.log(tom instanceof Function); //?
        console.log(Student instanceof Function);  //true
        console.log(tom);
        console.log(Student);
</script>

原型鏈結果如下：

2.2.3、undefined 的值會出現在如下4種情況中：

（1）從一個物件中獲取某個屬性，如果該物件及其 prototype 鏈 中的物件都沒有該屬性的時候，該屬性的值為 undefined 。

（2）一個 function 如果沒有顯式的通過 return 來返回值給其呼叫者的話，其返回值就是 undefined 。有一個特例就是在使用new的時候。

（3）當定義的變數未賦值時將返回undefined，這種情況比較常見。

（4）JavaScript 中的 function 可以宣告任意個形式引數，當該 function 實際被呼叫的時候，傳入的引數的個數如果小於宣告的形式引數，那麼多餘的形式引數的值為 　　　　         undefined。

舉個栗子：

<script>
        //1、訪問物件中不存在的成員
        var obj={};
        console.log(obj.name);  //undefined

        //2、變數未賦值
        console.log(i);  //undefined
        var i;

        //3、函式的引數沒有賦值
        function foo(p1){
            console.log(p1);
        }
        foo();  //undefined

        //4、函式沒有返回值
        var result=foo();
        console.log(result);  //undefined
    </script>

2.2.4、將一些非Boolean型別的值轉換成布林型別，可以使用邏輯運算子 " ! " 將這些值還原。當然 ! 是非的意思，一般我們會連續使用兩個!!。

 舉個栗子：

<script>
        //1、undefined為false
        console.log(!!window.abc);  //!!將資料轉換成boolean型別

        //2、null為false
        console.log(!!null);

        //3、+0,-0,0,0.0,NaN為false
        console.log(!!+0);
        console.log(!!-0);
        console.log(!!0);
        console.log(!!0.0);
        console.log(!!NaN);

        //4、字串空為false
        console.log(!!"");  //false
        console.log(!!"  ");  //true
    </script>

2.2.5、== 與 ===比較的區別

兩者相比，== 會做一定的型別轉換；而 === 不做型別轉換

舉個栗子：

<script>
        //1、==比較時會轉換型別，（只比值，不不比型別）
        //2、===比較時不會型別轉換、（不僅要比值還要比型別）

        console.log(1=="1");  //true
        console.log(1==="1");  //false

        console.log(undefined==null);  //true
        console.log(undefined===null);  //false

        console.log(5==new Number(5));  //true
        console.log(5===new Number(5));  //false
        
</script>

2.3、運算子

2.3.1、邏輯運算子的非布林型別運算

　　“ || ”在是邏輯運算子，表示"或"的意思，當運算子同為false時結果為false否則為真，但或運算如果不是針對邏輯值運算時，如果第一個值是true，則直接返回第一個值，如果第一個值是false，則直接返回第二個值

舉個栗子：

<script>
        function add(n1,n2){
            n1=n1||0;  //如果n1轉換成boolean型別為空，則返回0，否則返回n1
            n2=n2||0;
            return n1+n2;
        }
        console.log(add());  //0
        console.log(add(1)); //1
        console.log(add(1,2));  //3
</script>

執行結果：

2.3.2、逗號運算子

逗號運算子的特性及作用：逗號運算子的作用是將若干表示式連線起來。它的優先順序是所有運算子中最低的，結合方向是自左至右。

逗號表示式：表示式1，表示式2，表示式3，......表示式n

執行過程：先計算表示式1的值，再計算表示式2的值，......一直計算到表示式n的值。最後整個表示式的值是表示式n的值。

舉個栗子：

<script>
        var a=(b=1,c=2,d=3);  //b=1,c=2,d3,a=3
        function foo(){
            return a++,++b,a+b;  //先計算a++與++b再返回a+b，a=4,b=2,a+b=6
        }
        console.log(foo());  //6 
</script>