前端基礎之JavaScript

標籤：前端基礎之JavaScript

一、JavaScript的曆史

略

二、ECMAScript

註：ES6就是指ECMAScript 6。

儘管 ECMAScript 是一個重要的標準，但它並不是 JavaScript 唯一的部分，當然，也不是唯一被標準化的部分。實際上，一個完整的 JavaScript 實現是由以下 3 個不同部分組成的：

    核心（ECMAScript） 

    文件物件模型（DOM） Document object model (整合js，css，html)

    瀏覽器物件模型（BOM） Broswer object model（整合js和瀏覽器）

簡單地說，ECMAScript 描述了JavaScript語言本身的相關內容。

    JavaScript 是指令碼語言

    JavaScript 是一種輕量級的程式設計語言。

    JavaScript 是可插入 HTML 頁面的編程代碼。

    JavaScript 插入 HTML 頁面後，可由所有的現代瀏覽器執行。

三、JavaScript引入方式

1、在HTML檔案的Script標籤內寫代碼

        <script>

          // 在這裡寫你的JS代碼

        </script>

2、HTML檔案引入額外的JS檔案

    <script src="myscript.js"></script>

四、JavaScript語言規範

1、注釋（注釋是代碼之母）

    // 這是單行注釋

    /*

        這是多行注釋

    */

2、結束符

    JavaScript中的語句要以分號（;）為結束符。

五、JavaScript語言基礎

1、變數聲明

    JavaScript的變數名可以使用_，數字，字母，$組成，不能以數字開頭。

    聲明變數使用 var 變數名; 的格式來進行聲明

        var name = "Alex";

        var age = 18;

注意：

    變數名是區分大小寫。

    推薦使用駝峰式命名規則。

    保留字不能用做變數名。

六、JavaScript資料類型

1、JavaScript擁有動態類型

    var x;  // 此時x是undefined

    var x = 1;  // 此時x是數字

    var x = "Alex"  // 此時x是字串 

2、數字類型

    JavaScript不區分整型和浮點型，就只有一種數字類型。

    var a = 12.34;

    var b = 20;

    var c = 123e5;  // 12300000

    var d = 123e-5;  // 0.00123

3、還有一種NaN，表示不是一個數字（Not a Number）。

常用方法：

    parseInt("123")  // 返回123

    parseInt("ABC")  // 返回NaN,NaN屬性是代表非數字值的特殊值。該屬性用於指示某個值不是數字。

    parseFloat("123.456")  // 返回123.456

4、字串

    var a = "Hello"

    var b = "world;

    var c = a + b; 

    console.log(c);  // 得到Helloworld

常用方法：

方法	說明
.length	返回長度
.trim()	移除空白
.trimLeft()	移除左邊的空白
.trimRight()	移除右邊的空白
.charAt(n)	返回第n個字元
.concat(value, ...)	拼接
.indexOf(substring, start)	子序列位置
.substring(from, to)	根據索引擷取子序列
.slice(start, end)	切片
.toLowerCase()	小寫
.toUpperCase()	大寫
.split(delimiter, limit)	分割

拼接字串一般使用“+”

補充：slice和ubstirng的區別：

        string.slice(start, stop)和string.substring(start, stop)：

        兩者的相同點：

            如果start等於end，返回Null 字元串

            如果stop參數省略，則取到字串末

            如果某個參數超過string的長度，這個參數會被替換為string的長度

        substirng()的特點：

            如果 start > stop ，start和stop將被交換

            如果參數是負數或者不是數字，將會被0替換

        silce()的特點：

            如果 start > stop 不會交換兩者

            如果start小於0，則切割從字串末尾往前數的第abs(start)個的字元開始(包括該位置的字元)

            如果stop小於0，則切割在從字串末尾往前數的第abs(stop)個字元結束(不包含該位置字元)

 5、布爾類型  區別於Python，true和false都是小寫。

    var a = true;

    var b = false;

    ""(Null 字元串)、0、null、undefined、NaN都是false。

6、數組 類似於Python中的列表。

    var a = [123, "ABC"];

    console.log(a[1]);  // 輸出"ABC"

     常用方法：

方法	說明
.length	數組的大小
.push(ele)	尾部追加元素
.pop()	擷取尾部的元素
.unshift(ele)	頭部插入元素
.shift()	頭部移除元素
.slice(start, end)	切片
.reverse()	反轉
.join(seq)	將數組元素串連成字串
.concat(val, ...)	串連數組
.sort()	排序

 補充：關於sort的問題：

        如果調用sort方法時沒有傳入參數，將按字母順序對數組中的元素進行排序，說得更精確點，是按照字元編碼的順序進行排序。要實現這一點，首先應把數組的元素都轉換成字串（如有必要），以便進行比較。

        如果想按照其他標準進行排序，就需要提供比較函數，該函數要比較兩個值，然後返回一個用於說明這兩個值的相對順序的數字。比較函數應該具有兩個參數 a 和 b，其傳回值如下：

        若 a 小於 b，在排序後的數組中 a 應該出現在 b 之前，則返回一個小於 0 的值。

        若 a 等於 b，則返回 0。

        若 a 大於 b，則返回一個大於 0 的值。

        // 根據上面的規則自行實現一個排序函數：

        function sortNumber(a,b) {

          return a - b

        }

        // 調用sort方法時將定義好的排序函數傳入即可。

        stringObj.sort(sortNumber)

可以使用以下方式遍曆數組中的元素：

    var a = [10, 20, 30, 40];

    for (var i=0;i<a.length;i++) {

      console.log(i);

    }

7、null和undefined

    null表示值是空，一般在需要指定或清空一個變數時才會使用，如 name=null;

    undefined表示當聲明一個變數但未初始化時，該變數的預設值是undefined。還有就是函數無明確的傳回值時，返回的也是undefined。

    null表示變數的值是空，undefined則表示只聲明了變數，但還沒有賦值。

8、類型查詢

typeof是一個一元運算子（就像++，--，！，- 等一元運算子），不是一個函數，也不是一個語句。

    typeof "abc"  // "string"

    typeof null  // "object"

    typeof true  // "boolean"

    typeof 123 // "number"

對變數或值調用 typeof 運算子將返回下列值之一：

    undefined - 如果變數是 Undefined 類型的

    boolean - 如果變數是 Boolean 類型的

    number - 如果變數是 Number 類型的

    string - 如果變數是 String 類型的

    object - 如果變數是一種參考型別或 Null 類型的

前端基礎之JavaScript