1. 程式人生 > 實用技巧 >JavaScript基礎知識二

JavaScript基礎知識二

1、資料型別
    1、檢視資料型別
        1、語法
            typeof() 或 typeof 
            ex:
                var num = 35;
                console.log(typeof(num));
    2、資料型別的轉換
        1、隱式轉換
            自動進行轉換
            1、字串 + 數字 :將數字轉換為字串
                ex
                    1、"你好" + 123 :"你好123"
                    2、"78" + 15 :"7815"
                    3、var r = "78"+15+13;
                        r : "781513"
                    4、var r = 15+13+"78";
                        r : "2878"
            2、數字 + 布林值 :將布林值轉換為數字
                ex:
                    1、25 + true :26
                    2、38 * false :0
            3、字串 + 布林值 :將布林值轉換為字串
                ex:
                    1、"你好" + true :"你好true"
                    2、"Hello" + false : "Hellofalse"
            4、布林值 + 布林值 :將布林值轉換為數字
                ex:
                    1、true + false : 1
        2、強制轉換 - 轉換函式
            "78" + 15,問題:想將"78"轉換為數字,該怎麼辦
            1、toString()
                將任意型別的資料轉換成字串
                語法:
                    var 結果 = 資料.toString();
                    var r = "張".charCodeAt().toString(16);
            2、parseInt()
                Integer : 整數
                作用:將指定的資料轉換為整數
                語法:
                    var 結果 = parseInt(資料);
                ex:
                    1、var r = parseInt(78.5);
                        r : 78
                    2、var r = parseInt("78");
                        r : 78
                    3、var r = parseInt("78ABC");
                        r : 78
                    4、var r = parseInt("ABC78");
                        r : NaN (Not a Number)
            3、parseFloat()
                作用:將任意型別的資料轉換為 小數
                ex:
                    1、var r = parseFloat("38.5");
                        r : 38.5
                    2、var r = parseFloat("38.5你好嗎!")
                        r : 38.5
                    3、var r = parseFloat("你好嗎38.5");
                        r : NaN
            4、Number()
                作用:將任意型別的資料轉換為數字(整數或小數)
                注意:如果轉換的資料中包含非數字的字元,則返回NaN 
                ex:
                    1、var r = Number("35");
                        r : 35
                    2、var r = Number("35.5");
                        r : 35.5
                    3、var r = Number("Hello 35.5");
                        r : NaN
                    4、var r = Number("35.5Hello");
                        r : NaN
2、運算子 和 表示式
    1、什麼是表示式
        表示式是由運算子 和 運算元來組成的式子
            var result = 35 + 28;
            console.log(a = 35); //結果為 35
            b=a=35; 正確的表示式,a 和 b 的值,都是35
    2、運算子
        1、算術運算子
            +,-,*,/,%,++,--
            優先順序:
                ++,-- 最高
                *,/,% 居中
                +,- 最低

            ++ : 自增運算子
                在自身基礎上做+1的操作
                ++ 做字首:
                    var i = 10;
                    console.log(++i); // 11
                    先對i進行+1操作,然後再使用i的值(先自加,再取值)
                
                ++ 做字尾:
                    var j = 10;
                    console.log(j++); // 10
                    console.log(j); // 11
                    先使用j的值,然後再對j進行+1操作(先取值,再自加)
            -- : 自減運算子
                在自身基礎上做-1的操作

            ex:
                1、var i = 10;
                    console.log(i++);//輸出:10 變為:11
                    console.log(++i);//12 變為 :12 輸出 12
                    console.log(i++);//12 輸出 :12 變為 13
                    console.log(i++);//13 輸出 :13 變為 14
                    console.log(i);//14 輸出 :14
                2、
                    var i = 10;
                            10  10(11)(12)12 12(13) (14)1414
                    var r = i + i++ + ++i +  i++ +  ++i + i;
                    10+10+12+12+14+14 :72
                    //72,78,
        2、關係運算符(比較運算子)
            >,<,>=,<=,==,!=,===,!==
            優先順序:
                1、>,<,>=,<=
                2、==,!=,===,!==
            == : 判斷等於
            = : 賦值
            != : 判斷兩個資料是否不相等,不等為true
            === : 判斷數值和資料型別是否都一直
                var n1 = 35;
                var s1 = "35";

                n1 == s1 : true
                n1 === s1 : false

            ex:
                1、3 > 10 : false
                2、"3" > 10 : false
                3、"3a" > 2 : false
                4、"3" > "10" : true
                5、"張三丰" > "張無忌" : false


            注意:
                1、兩個運算元,如果一個是數字,一個是字串的話,預設會將字串通過 Number() 轉換成數字,再做比較
                2、NaN
                    NaN 與 任何資料做 != ,結果都為 true
                    其它操作全是 false
                3、字串 與 字串進行比較時,實際上上比較的是每位字元的Unicode碼
                    1、"3" > "10"
                        實際上比較的是 3 跟 1 的Unicode碼的大小
                    2、"張三丰" > "張無忌" : false
                        實際上比較的是 "三" 跟 "無" 的unicode碼的大小

                        張(24352)三(19977)豐
                        張(24352)無(26080)忌
                    3、35 > "張三丰"
                        結果:false
                4、判斷一個數據是否為數字
                    NaN 不能使用 == 或 != 來進行判斷
                    想判斷一個數據是否為數字,使用以下函式
                    isNaN() : 判斷一個數據是否為 非數字
                        如果為非數字的話,返回true
                        否則(是數字) ,返回 false
                    語法:
                        var 結果 = isNaN(資料);
                    ex:
                        1、var r = isNaN("35.5");
                            false
                        2、var r = isNaN("35你好");
                            true
                        3、var r = isNaN("你好35");
                            true
                        4、var r = isNaN(35)
                            false
        3、邏輯運算子
            &&,||,!
            && : 兩個條件都為true,整個表示式為true
            || : 兩個條件,有一個為true,整個表示式就為 true
            ! : 對現有條件結果,取反。非真即假,非假即真

          短路邏輯:
                1、短路邏輯 &&
                    條件1 && 條件2
                    當第一個條件為false時,整體表達式結果就是false,就不會判斷執行第二個表示式

                    如果條件1為true的話,那麼就要繼續判斷執行第二個條件

                    條件 && 操作
                    如果操作中有多條語句要執行,則使用(),括起來,並用 , 隔開
                2、短路邏輯 ||
                    條件1 || 條件2
                    當第一個條件為true時,就不再執行條件2,整個結果為 true

                    當第一個條件為false時,則繼續執行第二個條件

                    條件1 || 操作
        4、位運算子
            1、位運算子
                是將數字先轉換為二進位制,再進行操作
            2、詳解
                1、<<
                    按位左移,將數字變大
                2、>>
                    按位右移,將數字變小
                3、&
                    按位與,判斷奇偶性可以使用按位&
                    將任意數字與1做按位與操作,結果為1,是奇數,結果為0,是偶數
                    ex:
                        35 & 1 : 1 -> 奇數
                        38 & 1 : 0 -> 偶數
                4、|
                    按位或,對小數取整時使用
                    將任意數字與0做按位或操作,結果為 保留整數部分
                    ex:
                        35.857 | 0 : 35
                5、^
                    按位異或,交換兩個數字時使用
                    var a = 15;
                    var b = 18;

                    a = a ^ b; 結果:29
                    b = b ^ a; 結果:15
                    a = a ^ b; 結果:18
                
        5、賦值運算子 & 擴充套件的賦值運算子
            1、賦值運算子 :=
            2、擴充套件的賦值運算子
                +=,-=,*=,/=,%=,^= ... ...
                a+=b; => a = a + b;
                a^=b; => a = a ^ b;
                ex:
                    使用 擴充套件的賦值運算子,簡化下列操作
                    a = a ^ b; ( a^=b;)
                    b = b ^ a; ( b^=a;)
                    a = a ^ b; ( a^=b;)
        6、條件運算子(三目運算子)
            單目(一元)運算子 :只需要一個運算元的運算子
                ++,--,!
                ex:
                    a++
                    ++a
            雙目(二元)運算子 :需要兩個運算元的運算子
                +,-,*,/,%,>,<,>=,<=,==,!=,==,!==,&&,||,<<,>>,&,|,^
            三目(三元)運算子 :需要三個運算元的運算子
                條件運算子 ?:
            
            語法:
                條件表示式?表示式1:表示式2;
                
                條件運算子的巢狀,在表示式1 和 表示式2,可以再繼續使用條件運算子
          
        var num = 5;
        console.log(5 & 1 == 1);
        結果:1

        var num = 5;
        console.log((5 & 1) == 1);
        結果:true
3、函式 - function
    1、什麼是函式
        函式是一段預定義好,可以被反覆執行的程式碼塊
            預定義:提前宣告好,並非馬上執行
            程式碼塊:可以包含多條可執行的語句
            反覆執行:允許被多次使用(呼叫)
        使用過的函式:
            parseInt() :有引數,有返回值
            parseFloat() :有引數,有返回值
            Number() :有引數,有返回值
            console.log() :有引數,無返回值
            alert() :有引數,無返回值
            prompt() :有引數,有返回值
    2、定義和使用函式
        1、普通函式的宣告 和 呼叫
            1、宣告
                function 函式名(){
                    //函式體 - 若干條可執行的語句
                }
            2、呼叫
                在任意的JS位置處,可以通過
                    函式名();
                對函式進行呼叫
        2、帶引數 帶返回值的函式
            語法:
                function 函式名(形參列表){
                    return 值;
                }

                1、形參列表
                    形參:形式引數,定義函式時定義的引數,如果是多個引數的話,用 "," 隔開即可
                2、返回值
                    在函式體內,要帶給函式體外的一個數據
            呼叫:
                1、在JS的任意位置處通過  函式名(); 呼叫函式
                2、如果函式有引數的話,則需要傳遞引數(實參)給函式。
                3、如果函式有返回值的話,則可以在函式呼叫處,通過一個變數來接收返回值