JavaScript快速入門（二）-有解無憂

檔案中引入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 = xy
/=	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>

作者： yetangjian

出處： https://www.cnblogs.com/yetangjian/p/17253215.html

關于作者： yetangjian

本文著作權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段宣告，且在文章頁面明顯位置給出, 原文鏈接如有問題，可郵件（[email protected]）咨詢.

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/549229.html

標籤：其他

上一篇：JavaScript快速入門（二）

下一篇：BPM作業流引擎常見的術語和概念介紹