技術文章 » JavaScript快速入門（二）

JavaScript快速入門（二）

2023-04-05 12:00:08

檔案中引入JavaScript

嵌入到HTML檔案中

在body或者head中新增script標籤

<script>
    var age = 10;
    console.log(age);
</script>

引入js檔案

建立一個js檔案

var age = 20;
console.log(age);

在html檔案中src引入改檔案

<body>
    <script src="./age.js"></script>
</body>

引入網路來原始檔，和引入原生的js檔案一樣，通過src

<body>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
</body>

 資料型別

原始資料型別：基本的資料型別（數值、字串、布林值）

複合資料型別：物件（一個物件可以看做是存放各種值得容器，由基礎資料型別組成）

var user = {
    "name":"ming",
    age:20,
    is_register:True
}

特殊資料型別：null和undefined

typeof可以用來判斷基礎資料型別

<body>
    <script>
        var age = 20;
        console.log(typeof age);
    </script>
</body>

算數運運算元

加減乘除取餘：+ 、-、*、/、%

自增或者自減相當於當前值+1或者-1

<body>
    <script>
        var num = 20;
        console.log(++num);
        console.log(--num);
    </script>
</body>

自增自減需要注意，有兩種寫法一種運運算元號在前，一種運運算元號在後，兩種效果不一樣

運運算元號在前是先自增再執行，運運算元號在後是先執行在自增

<body>
    <script>
        var num = 20;
        console.log(++num); // 21
        var num1 = 20;
        console.log(num1++); // 20
    </script>
</body>

 賦值運運算元

賦值運運算元 表示式
= 賦值運運算元
+= x +=y 等同於 x= x+y
-= x -=y 等同於 x = x-y
*= x *= y 等同於 x = x*y
/= x /= y 等同於 x = x/y
%= x %= y 等同於 x = x % y

比較運運算元

比較運運算元 描述
< 小於
> 大於
<= 小於或者等於
>= 大於或者等於
== 相等
=== 嚴格相等
!= 不相等
!== 嚴格不相等

== 和 ===區別

<body>
    <script>
        var num = 20;
        var num1 = 20;
        var num2 = "20";
        console.log(num == num1); // True
        console.log(num == num1); // True
        console.log(num == num2); // True
        console.log(num === num2);// 嚴格比較數值和型別 False
        console.log(num != num2);// False
        console.log(num !== num2);// True 型別不一致
    </script>
</body>

布林運運算元

取反運運算元（！）

<body>
    <script>
        var flag = true;
        console.log(!flag);
    </script>
</body>

提示 undefind 、null、false、0、NaN、空字串 取反都為true

且運運算元（&&）

<body>
    <script>
        console.log(10<20 && 10>5); // True
    </script>
</body>

活運運算元（||）

<body>
    <script>
        console.log(10>20 || 10>5); // True
    </script>
</body>

 用Switch簡化多個if...else....

swith後面跟表示式，case後面記得一定要加上break，不加上break會把後續的都執行，最後default就是以上case都不是執行

<body>
    <script>
        var day = 3;
        switch(day){
            case 0:
                console.log("今天週一");
                break;
            case 1:
                console.log("今天週二");
                break;
            case 2:
                console.log("今天週三");
                break;
            default:
                console.log("今天不是週一、二、三")
        }
    </script>
</body>

 用三目運運算元來代替if...else...

<表示式>？y ：x

表示式正確返回y，錯誤則返回x

<body>
    <script>
        var num = 10;
        var result = num % 2 == 0 ? "是偶數" : "是奇數";
        console.log(result)
    </script>
</body>

 字串

<body>
    <script>
        //字串要麼使用單引號巢狀雙引號，要麼使用雙引號巢狀單引號
        var str1 = '我說"你好呀"';
        //如果想使用雙引號巢狀雙引號，單引號巢狀單引號或者換行就需要用到反斜槓
        var str2 = '我說\'你好呀\'';
        var str3 = "今天天氣真好，\
        我想出去玩";
        console.log(str1,str2,str3);
    </script>
</body>

用屬性length來檢視字串長度

<body>
    <script>
        var str3 = "今天天氣真好，\
        我想出去玩";
        console.log(str3.length);
    </script>
</body>

charAT檢視索引位置的字串

<body>
    <script>
        var str = "yetangjian的部落格園";
        console.log(str.charAt(1)); // 檢視索引1位置的字串e
        console.log(str.charAt(str.length -1));//檢視最後一位的字元園
        //如果索引不存在會列印出來空字串
        console.log(str.charAt(-1));
        console.log(str.charAt(str.length+1));
    </script>
</body>

concat連線兩個字串，建立新的字串，不影響老的字串（拼接的如果不是字串，也會先轉為str再拼接）

同樣也可以用「+」拼接

<body>
    <script>
        var str = "yetangjian的部落格園";
        var str1 = "豐富多彩呀~~";
        var result = str.concat(str1);
        document.write(result);//頁面上展示出來拼接後的
        // 可以接收多個引數拼接
        var str3 = "看的停不下來了";
        document.write(str.concat(str1,str3));
    </script>
</body>

concat和+號的區別

+號會先運算數位型別在轉，所以下方會先做1+2後再轉字串

concat不管什麼，都會轉字串拼接

<body>
    <script>
        var num1 = 1;
        var num2 = 2;
        var str3 = "3";
        document.write("".concat(num1,num2,str3)); // 123
        document.write(num1+num2+str3);// 33
    </script>
</body>

substring擷取字串，兩個引數，引數1開始的位置的索引，第二個引數結束位置的索引（結束索引位置不取，左閉右開）

<body>
    <script>
        var str = "yetangjian的部落格園";
        // 擷取部落格園三個字,左閉右開
        document.write(str.substring(11,str.length));
        // 省略第二個引數，直接取到最後
        console.log(str.substring(11)); //部落格園
        //在substring中引數如果是負數，直接當索引0用
    </script>
</body>

substr用法基本和substring一樣，區別是第二個引數不在是結束位置的索引，而是字串的長度

<body>
    <script>
        var str = "yetangjian的部落格園";
        var result = str.substr(11,3);//從索引位置11開始取，擷取長度為3
        document.write(result);//部落格園
        //如果省略第二個引數，直接取到結尾，如果第二個引數是個負數，會變為0即字串長度為0的空字串
        console.log(str.substr(11));//部落格園
        console.log(str.substr(11,-4));//空字串
        //如果第一個引數是負數，則從後向前計算字元位置，這個和之前的字串不太一樣
        console.log(str.substr(-3));
    </script>
</body>

indexof查詢字串第一次出現的位置，不存在則返回-1

<body>
    <script>
        var str = "yetangjian的部落格園";
        // 判斷上述字元換中是否存在部落格園
        if (str.indexOf("部落格園") > -1){
            console.log("存在");
        }else{
            console.log("不存在");
        }
        // 引數2位置開始索引位置
        console.log(str.indexOf("部落格園",12));//從12索引位置不存在了，所以返回-1
    </script>
</body>

trim方法去除首尾兩端的空格，包括\r \n \t都能去掉

<body>
    <script>
        var str = "   yetangjian的部落格園   ";
        console.log(str);//   yetangjian的部落格園   
        console.log(str.trim());//yetangjian的部落格園
    </script>
</body>

split方法是按分隔符，返回一個分割出來的字串陣列

<body>
    <script>
        var str = "yetangjian|的|部落格園";
        var result = str.split("|");
        console.log(result);// ["yetangjian", "的", "部落格園"]
        console.log(str.split(""));//["y", "e", "t", "a", "n", "g", "j", "i", "a", "n", "|", "的", "|", "博", "客", "園"]
        //存在第二個引數可以設定獲取陣列的長度
        console.log(str.split("",2));//["y", "e"]
    </script>
</body>

 陣列

查詢、追加

<body>
    <script>
        var arr = [];
        arr[1] = 1 // 通過下標加入陣列值
        console.log(arr)
        console.log(arr[1])//1
        console.log(arr.length)//2
    </script>
</body>

遍歷

<body>
    <script>
        var city = ["shanghai","guangzhou","beijing"]
        // for 
        for (var i=0;i<city.length;i++){
            console.log(city[i]);
        }
        // while
        i = 0
        while (i < city.length){
            console.log(city[i]);
            i++
        }
        // for in 
        for (var i in city){
            console.log(city[i]);
        }
    </script>
</body>

陣列靜態方法Array.isArray()：判斷是否為陣列

<body>
    <script>
        var city = ["shanghai","guangzhou","beijing"]
        console.log(typeof(city));//object
        console.log(Array.isArray(city));//true
    </script>
</body>

push()/pop()方法：改變原陣列末尾增加或刪除

<body>
    <script>
        var city = ["shanghai","guangzhou","beijing"]
        //push
        city.push("nanjing");
        city.push("fujian","xiamen");//向尾部新增一個或多個
        console.log(city);
        //pop
        var deleteend = city.pop();
        console.log(deleteend);//"xiamen"
        console.log(city);//["shanghai", "guangzhou", "beijing", "nanjing", "fujian"]
    </script>
</body>

shift()/unshift：改變原陣列在陣列起始位置新增或刪除

<body>
    <script>
        var city = ["shanghai","guangzhou","beijing"];
        //shift
        var shiftfirst = city.shift();
        console.log(shiftfirst);//shanghai
        console.log(city);//["guangzhou","beijing"]
        //unshift
        city.unshift("hefei","chongqing");
        console.log(city);// ["hefei", "chongqing", "guangzhou", "beijing"]
    </script>
</body>

join按指定分隔符拼接陣列成員，預設都是逗號

<body>
    <script>
        var city = ["shanghai","guangzhou","beijing"];
        //join
        document.write(city.join());//shanghai,guangzhou,beijing
        document.write(city.join("|"));//shanghai|guangzhou|beijing
        document.write(city.join(""));//shanghaiguangzhoubeijing
        //join可以把陣列拼成字串，split可以把字串拆成陣列
        var result = city.join("|");
        console.log(result);
        var newArr = result.split("|");// shanghai|guangzhou|beijing
        console.log(newArr);//["shanghai", "guangzhou", "beijing"]
    </script>
</body>

concat陣列合併

<body>
    <script>
        var city = ["shanghai","guangzhou","beijing"];
        var contry = ["China","Japan"]
        //concat和+號區別
        console.log(city + contry);//變為字串了shanghai,guangzhou,beijingChina,Japan
        console.log(city.concat(contry));//還是陣列["shanghai", "guangzhou", "beijing", "China", "Japan"]
        //使用concat陣列追加,注意看下面例子
        console.log(city.concat(1,2,3,[4,5,6]));// ["shanghai", "guangzhou", "beijing", 1, 2, 3, 4, 5, 6]
    </script>
</body>

reverse翻轉

<body>
    <script>
        var city = ["shanghai","guangzhou","beijing"];
        console.log(city.reverse());//["beijing", "guangzhou", "shanghai"]
        //翻轉字串
        var word = "apple";
        console.log(word.split("").reverse().join(""));//elppa
    </script>
</body>

indexof返回元素在陣列中第一次出現的位置，沒有則返回-1

<body>
    <script>
        var city = ["shanghai","guangzhou","beijing","shanghai"];
        console.log(city.indexOf("shanghai"));//0
        console.log(city.indexOf("nanjing"));//-1
        //第二個引數為起始位置
        console.log(city.indexOf("shanghai",2));//3
    </script>
</body>