1. 變量的使用

1）基本用法

  • 創建變量，變量賦值

        var或let關鍵字：聲明一個變量。推薦用let定義變量，避免var的缺陷。

var name = 'Oscar';
        let age = 20;

彈框提示：變量賦值可通過彈框提示用户輸入信息

<script>
        var name = prompt("請輸入姓名：");
        var age = prompt("請輸入年齡：");
        var score = prompt("請輸入分數：")
    </script>

第二章 JavaScript 基本語法__賦值

第二章 JavaScript 基本語法__#javascript_02

第二章 JavaScript 基本語法__#開發語言_03

第二章 JavaScript 基本語法__#javascript_04

在此示例中，三個輸入提示框會依次出現，輸出提示框也會在輸入數據後出現

  • 使用變量
console.log(age);   //讀取變量內容
        age = 30;           //修改變量內容

此處介紹幾種類型的變量：

① 強類型變量：不同類型之間的變量進行賦值的時候，需要進行一定手段（如強制類型轉換）

② 弱類型變量：不同類型的變量進行賦值時，可以直接賦值

③ 動態類型變量：代碼執行過程中，變量類型可隨時發生變化

④ 靜態類型變量：變量定義時是什麼類型，運行時就是什麼類型

2）動態類型

① JS的變量類型是程序運行中才確定到的（運行到 = 語句才確定到）

var a = 10；

② 隨着程序的運行，變量的類型可能發生改變

var a = 10;  //數字

a = "hehe"; //字符串

2.基本數據類型

JS內置的幾種基本數據類型：

number：數字，不區分整數和小數

boolean：true，false

string：字符串類型

undefined：未定義的值，只有唯一的值undefined

null：空值，只有唯一的值null 

1）number數字類型

一些進制數的表示：

二進制：0b開頭

八進制：0o或者0開頭（嚴格模式下可能報錯）

十六進制：0x開頭

var a = 0b10;     //二進制，0b開頭
        var b = 0o7;      //八進制，0o或者0開頭（嚴格模式下可能報錯）
        var c = 0xa;      //十六進制，0x開頭

特殊的數字值：

  • Infinity：無窮大，表示數字已超過JS能表示的範圍
  • -Infinity：負無窮大，表示數字已超過JS能表示的範圍
  • NaN：表示當前結果不是一個數字
<script>
        var max = Number.MAX_VALUE;
        console.log(max*2);
        console.log(-max*2);
        console.log('hehe' - 10);
    </script>

第二章 JavaScript 基本語法__賦值_05

注意：

① 負無窮大和無窮小不同。無窮小是無限趨近於0，值為1/Infinity

② ‘hehe’ + 10得到字符串而不是NaN

③ isNaN()函數可以判斷非數字

<script>
        console.log(isNaN(10));
        console.log(isNaN('hehe' - 10));
    </script>

2）String字符串類型

基本規則：字面值用引號引起來，單雙均可

如果字符中本身含義引號：使用轉義字符 \  或  搭配單雙引號使用  均可

var msg = "My name is \"Oscar\"";
        var msg = "My name is 'Oscar'";

轉義字符：

  • \
  • \n
  • \t
  • ...

字符串長度

使用字符串的length屬性

var msg = "My name is \"Oscar\"";
        console.log(msg.length);

第二章 JavaScript 基本語法__#開發語言_06

字符串拼接

① 使用 + 進行拼接

② 數字和字符串也可以拼接。注意認準相加的變量是數字還是字符串

var a = "I am ";
        var b = 8;
        console.log(a + b);

第二章 JavaScript 基本語法__#ecmascript_07

3）boolean布爾類型

兩個值：true  false

boolean參與運算時當作1和0看待。（不建議在實際開發中這麼寫）

console.log(true + 1);
        console.log(false + 1);

第二章 JavaScript 基本語法__字符串_08

4）undefined 未定義數據類型

① 如果一個變量沒有被初始化過，結果就是undefined，是undefined類型

var a;
        console.log(a);

第二章 JavaScript 基本語法__#javascript_09

② undefined和字符串相加，結果進行字符串拼接

var a;
        var b = "100";
        console.log(a + b);

第二章 JavaScript 基本語法__#ecmascript_10

③ undefined和數字相加，結果為NaN

var a;
        console.log(a + 10);

第二章 JavaScript 基本語法__字符串_11

5）空值類型變量

null：當前變量是一個“空值”（被定義了的）

注：null和undefined

null：當前的值為空（相當於有一個盒子）

undefined：當前變量未定義（相當於連盒子都沒有）

3. 運算符

JS中的算數運算符和java的算術運算符用法基本相同，此處不做過多介紹

算數運算符:

+       -        *       /      %

賦值運算符：

=       +=        -=        *=        /=        %=

自增自減運算符：

++        --

比較運算符：

<        >        <=        >=

==  比較相等（會進行隱式類型轉換）       

!=       

===  比較相等（不會進行隱式類型轉換）      

!==

邏輯運算符：

&&         ||           ！

位運算：

&        |        ~（按位取反）        ^（按位異或）

移位運算符：

<<    左移

>>    有符號右移（算術右移）

>>>  無符號右移（邏輯右移）

4. 條件語句

1）if 語句

判定一個數是奇數還是偶數

var num = 10;
        if(num % 2 == 0){
            console.log("num是偶數");
        }
        else{
            console.log("num是奇數");
        }

第二章 JavaScript 基本語法__字符串_12

注意：不能寫成 num%2 == 1就是奇數，因為負的奇數%2結果可能是-1.

例如：

var num = -1;
        if(num % 2 == 1){
            console.log("num是奇數");
        }
        else{
            console.log("num是偶數");
        }

第二章 JavaScript 基本語法__#javascript_13

輸出結果是偶數，這顯然是不正確的

2）三元表達式

if else的簡化寫法

條件 ? 表達式1 : 表達式2

條件為真，返回表達式1的值。

條件為假，返回表達式2的值。

注意：三元表達式的優先級是比較低的

3）switch

適合多分支場景

例如：用户輸入一個整數，提示今天是星期幾

var day = prompt("請輸入今天星期幾：");
        switch(parseInt(day)){
            case 1:
                console.log("星期一");
                break;
            case 2:
                console.log("星期二");
                break;
            case 3:
                console.log("星期三");
                break;
            case 4:
                console.log("星期四");
                break;
            case 5:
                console.log("星期五");
                break;
            case 6:
                console.log("星期六");
                break;
            case 7:
                console.log("星期天");
                break;
            default:
                console.log("輸入有誤");
        }

第二章 JavaScript 基本語法__#ecmascript_14

第二章 JavaScript 基本語法__賦值_15

此處輸入數字4後，控制面板輸出星期四

5. 循環語句

1）while循環

執行過程：條件為true，執行循環體；條件為false，直接結束循環

例如：計算5的階乘

var num = 5;
        var res = 1;
        while(num > 1){
            res *= num;
            num--;
        }
        console.log(res);

第二章 JavaScript 基本語法__賦值_16

2）continue

結束這次循環

例如：吃5個李子，發現第三個李子裏有一隻蟲子，於是扔掉這個，繼續吃下一個

var i = 1;
        while( i <= 5 ){
            if(i == 3){
                i++;
                continue;
            }
            console.log("我在吃第" + i + "個李子");
            i++;
        }

第二章 JavaScript 基本語法__#開發語言_17

3）break

結束整個循環

例如：吃五個李子，發現第三個有蟲子，於是剩下的也不吃了

var i = 1;
        while( i <= 5 ){
            if(i == 3){
                break;
            }
            console.log("我在吃第" + i + "個李子");
            i++;
        }

第二章 JavaScript 基本語法__#javascript_18

4）for循環

for(表達式1;表達式2;表達式3){
    循環體
}

表達式1：初始化循環變量

表達式2：循環條件

表達式3：更新循環變量

例如：計算5的階乘

var result = 1;
        for(var i = 5; i > 1; i--){
            result *= i;
        }
        console.log("result = " + result);

第二章 JavaScript 基本語法__字符串_19