JavaScript學習筆記(二)

demo2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <script>
        function p(s){
            document.write(s);
            document.write("<br>");
        }
        p("1 + 2 = " + (1 + 2));
        p("10 - 7 = " + (10 - 7));
        p("5 * 4 = " + (5 * 4));
        p("20 / 4 = " + (20 / 4));
        p("10 % 3 = " + (10 % 3));
    </script>

    <script>
        var a = 5;
        document.write(a++);
        document.write("<br>")
        var b = 5;
        document.write(++b);
        document.write("<br>");
    </script>

    <script>
        x = 5;
        x += 6;
        document.write(x);
        document.write("<br>")
    </script>

<!--    + 具備多態特徵-->
<!--    當兩邊都是數字的時候 ,表現爲算數運算符-->
<!--    當任意一邊是字符串的時候,表現爲字符串連接符-->
    <script>
        document.write("1 + 2 = " + (1 + 2));
        document.write("<br>");
        document.write("1 + \" 2 \" = " + (1 + "2"));
        document.write("<br>")
    </script>

<!--    邏輯運算符 : ==    !=    >    >=       返回一個Boolean類型的值,true或者false-->
    <script>
        function p(s) {
            document.write(s);
            document.write("<br>")
        }
        p(1 == 2);
        p(1 != 2);
        p(1 > 2);
    </script>

<!--==進行值是否相等的判斷不同 ,絕對等 ===還會進行 類型的判斷-->
<!--    比如 數字1和 字符串'1'比較,值是相等的,但是類型不同-->
<!--    所以==會返回true,但是===會返回false-->
<!--    絕對不等於!== 與上是一個道理-->
    <script>
        function p(s){
            document.write(s);
            document.write("<br>");
        }
        p(1 == "1");
        p(1 === "1");
    </script>

<!--    三目運算符 ?: 有三個操作數-->
<!--    如果第一個返回true,就返回第二個操作符-->
<!--    否則就返回第三個操作符。-->
    <script>
        var x = 15;
        var y = x == 10?"你好":"你不好";
        document.write(y + "<br>")
    </script>

    <script>
        var age = 17;
        if(age < 18){
            document.write("未成年!");
        }else if(age < 20){
            document.write("成年!");
        }else{
            document.write("趕緊結婚!")
        }
    </script>

    <script>
        var day = new Date().getDay();  //通過日期對象獲取數字形式的星期幾
        var today;
        switch (day) {
            case 0:
                today = "星期日";
                break;
            case 1:
                today = "星期一";
                break;
            case 2:
                today = "星期二";
                break;
            case 3:
                today = "星期三";
                break;
            case 4:
                today = "星期四";
                break;
            case 5:
                today = "星期五";
                break;
            case 6:
                today = "星期六";
                break;

        }
        document.write("今天是:" + today);
        document.write("<br>")
    </script>

    <script>
        function p(s) {
            document.write(s);
            document.write("<br>");
        }
        for(var i = 0;i < 5;i++){
            p(i);
        }

        var j = 0;
        while(j < 5){
            p(j);
            j++;
        }

        var k = 0;
        do{
            p(k);
            k++;
        }while(k < 5);

        function f(s) {
            document.write(s);
            document.write("<br>");
        }
        var x = new Array(3,1,4);
        for(i = 0;i < x.length;i++){
            f(x[i]);
        }
        // 使用增強for in循環遍歷
        // 在增強for in中,i是下標的意思
        for(i in x){
            f(x[i]);
        }

    </script>

<!--    錯誤處理-->
    <script>
        function f1(){

        }
        try{
            document.write("調用不存在的f2<br>");
            f2();
        }catch (err) {
            document.write("捕捉到錯誤產生!<br>");
            document.write(err.message + "<br>");
        }
        document.write("錯誤被捕捉,後續代碼可以繼續執行!<br>");
    </script>

<!--    通過new Number()創建一個數字對象  對象類型的數字,擁有更多的屬性和方法-->
    <script>
        var x = new Number(123);
        document.write(x + "<br>");
        document.write(typeof x + "<br>");
        // Number對象能取到的最大和最小值
        document.write(Number.MIN_VALUE + "<br>");
        document.write(Number.MAX_VALUE + "<br>");
        document.write(isNaN(x) + "<br>");
        document.write(x.toFixed(2) + "<br>");  //保留兩位小數
        document.write(x.toExponential() + "<br>");  //返回Number對象的科學計數法表達
        document.write(x.valueOf() + "<br>");   //返回一個基本類型的數字
    </script>

    //new String創建一個字符串對象
    <script>
        var x = "5";
        var y = new String(x);
        document.write(y + "<br>");
        document.write(typeof y + "<br>");
        var z = new String("Hello Java<br>");
        document.write(z.length + "<br>");
        // charAt 返回指定位置的字符
        // charCodeAt 返回指定位置的字符對應的Unicode碼
        document.write(z.charAt(0) + "<br>");
        document.write(z.charCodeAt(0) + "<br>");
        document.write(y.concat(z) + "<br>");  //concat字符串拼接
        document.write(z.indexOf("a") + "<br>");   //字符第一次出現的位置
        document.write(z.lastIndexOf("a") + "<br>");  //字符最後一次出現的地方
        var a = "hello";
        var b = "world";
        document.write(a.localeCompare(b) + "<br>");  //localeCompare 比較兩段字符串是否相同,0即表示相同,非0表示不同
        document.write(z.substring(0,3) + "<br>");  //substring 截取一段子字符串  左閉右開

        var c = new String("Hello this is JavaScript");
        var d = c.split(" ");   //split 根據分隔符,把字符串轉換爲數組。
        document.write(d + "<br>");
        var e = c.split(" ",2);  //只保留前兩個
        document.write(e + "<br>");

        //replace(search,replacement)
        // 找到滿足條件的子字符串search,替換爲replacement
        // 默認情況下只替換找到的第一個子字符串,如果要所有都替換,需要寫成:regs
        document.write(z.replace("a","o") + "<br>");
        var regS = new RegExp("a","g");
        var f = z.replace(regS,"o");
        document.write(f + "<br>");

        //所有返回字符串類型的方法,返回的都是基本類型的String
    </script>


<!--    javascript中的數組是動態的,即長度是可以發生變化的-->
<!--    創建數組對象的3種方式:-->
<!--    1. new Array() 創建長度是0的數組-->
<!--    2. new Array(5); 創建長度是5的數組,,但是其每一個元素都是undefine-->
<!--    3. new Array(3,1,4,1,5,9,2,6); 根據參數創建數組-->
    <script>
        function p(s,v) {
            document.write(s + " " + v);
            document.write("<br>");
        }
        var x = new Array();
        p("通過new Array()創建一個空數組:",x);
        x = new Array(5);
        p("創建一個長度是5的數組:",x);
        x = new Array(12,2,3,4,5,6);
        p("創建有初值的數組:",x);
        p("數組長度:",x.length);
        // 遍歷數組的兩種方式
        // 1.結合for循環,通過下標遍歷
        // 2.使用增強for in循環遍歷,在增強for in中,i是下標的意思
        for(i = 0;i < x.length;i++){
            p("數組中第" + (i+1) + "位:",x[i]);
        }
        for(i in x){
            p("數組中第" + x[i] + "位:",x[i]);
        }

        //concat連接兩個數組
        y = new Array(9,8,7,6,5);
        z = x.concat(y);
        p("兩個數組連接:",z)

        //方法join通過指定分隔符,返回一個數組的字符串表達
        var a = z.join();
        p("通過join返回的數組的字符串表達:",a);
        var b = z.join("@");
        p("通過指定分隔符@返回的字符串表達:",b);

        //方法 push pop,分別在最後的位置插入數據和獲取數據(獲取後刪除)
        z.push(5);
        p("向數組中push元素5得到數組:",z);
        var c = z.pop();
        p("pop獲取數組的最後一個元素:",c);
        p("pop後的數組是:",z);

        //方法 unshift shift ,分別在最開始的位置插入數據和獲取數據(獲取後刪除)
        z.unshift("a");
        p("數組在最開始的位置插入元素a之後:",z);
        var d = z.shift();
        p("獲取的最開始位置的元素爲:",d);
        p("shift之後的數組爲:",z);

        //方法 sort對數組的內容進行排序
        z.sort();   //默認排序按首位字符排序
        p("排序之後的數組爲:",z);

        //sort()默認採用正排序,即小的數排在前面。 如果需要採用自定義排序的算法,就把比較器函數作爲參數傳遞給sort()
        //調用sort函數的時候,把這個比較器函數comparator作爲參數傳遞進去即可。
        function comparator(v1,v2) {
            return v2-v1;   //v2-v1表示大的放在前面
        }
        function comparator1(v1,v2){
            return v1-v2;
        }
        z.sort(comparator1);
        p("使用自定義的排序1之後的數組:",z);
        z.sort(comparator)
        p("使用自定義的排序之後的數組:",z);

        //消除數組的重複元素然後排序
        function check(value,s) {
            for(i in a){
                if(value == s[i])
                    return true;
                //return false;
            }
            return false;
        }
        function removeDuplicate(s) {
            var result = new Array();
            while(s.length != 0){
                var v = s.pop();
                if(!check(v,s)){
                    result.push(v);
                }
            }
            return result;
        }
        p("數組在:",z);
        z = removeDuplicate(z);
        z.sort(comparator1);
        p("消除重複元素後的數組z排序:",z);


        //方法 reverse,對數組的內容進行反轉
        z.reverse();
        p("數組z反轉後爲:",z);

        //方法 slice 獲取子數組
        p("獲取子數組:",z.slice(1));
        p("獲取子數組:",z.slice(1,4));  //左閉右開


        // 方法 splice用於刪除數組中的元素,它還能用於向數組中插入元素
        p("數組z:",z);
        z.splice(3,2);
        p("從位置3開始刪除兩個元素:",z);
        z.splice(3,2,1,5);
        p("從位置3開始刪除兩個元素,但是插入1和5:",z);
    </script>

</head>
<body>

</body>
</html>
發佈了10 篇原創文章 · 獲贊 1 · 訪問量 5653
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章