一篇文章帶你快速入門JavaScript（自學者福利）

文章目錄

一、開始之前

1、JavaScript的簡史
1）1992年Nombas開發出C-minus-minus，也叫C–，沒錯，就是C++的另一個兄弟。它是嵌入式腳本語言(最初綁定在CEnvi軟件中).後將其改名ScriptEase，是一種客戶端執行語言。
2）那個時候有好幾個版本的Web編程語言，歐洲計算機制造協會爲了統一幾家語言，定義了ECMA-262規範。從此，Web 瀏覽器將 ECMAScript 作爲 JavaScript 實現的基礎。
3）Javascript 是Angularjs、Vue 等技術的基礎，它是一門相當完善的編程語言，能夠寫前端也可以寫後端，只是用作前端開發比較多

2、JavaScript的組成
儘管 ECMAScript 是一個重要的標準，但完整的JavaScript其實有三大部分組成：

核心（ECMAScript）
文檔對象模型（DOM） Document object model (整合js，css，html)
瀏覽器對象模型（BOM） Broswer object model（整合js和瀏覽器）

順便提一下，JavaScript的基於對象的編程語言，屬於面向對象的一種特殊情況，JavaScript本身提供了很多我們可以直接使用的對象。

3、JavaScript的引入方式
1）直接引入

<script>
    alert("hello JS");
</script>

2）導入js文件

<script  src="test.js"></script>

4、注意：
<script>標籤一般放在<body>標籤內，也可以放在與<body>和<head>標籤同級
JavaScript使用來註釋/* */ //
使用{}來封裝代碼塊
每個語句結束後可加‘;’號，也可不加分號

二、數據類型

1、變量

1）概念：
ES5 只有全局作用域和函數作用域，沒有塊級作用域，這帶來很多不合理的場景，因此在ES6中用let和const來解決這個問題。

直接定義：全局變量
帶var：只有全局作用域和函數作用域概念，沒有塊級作用域的概念。但是會把{}內也假稱爲塊作用域
帶let：只有塊級作用域的概念，由 { } 包括起來，if語句和for語句裏面的{ }也屬於塊級作用域。

//整個for循環是父級作用域，循環體內是另一個{}塊級作用域
    for( let i = 0 ; i < 3 ; i++ )
    {
        let i = 'hello';　　　　//用var替代let會報錯提示已經定義，若沒有任何關鍵字則每次賦值給i，最後只會輸出一次abc
        console.log(i);　　 // 輸出3次abc
    }

2）var和let的區別：
第一，就是var是全局作用域和函數作用域概念，而let是塊級作用域概念；
第二，let在變量聲明之前就訪問變量的話，會直接提示 ReferenceError，而不像 var 那樣使用默認值 undefined；
第三， var 存在變量提升，而 let，const（後面會提及）聲明的變量卻不存在變量提升，所以用 let 定義的變量一定要在聲明後再使用，否則會報錯。

3）暫時性死區（TDZ）：

var a = 99;
if(ture)
{
    console.log(a);  //ReferrenceError
    let a = 66;
}

因爲let所聲明的變量會鎖在它所在的作用域裏，不允許訪問。意思就是，它會先掃描一遍，把let聲明的變量保存起來，但是不允許使用，這時候你訪問a，由於此作用域中有a，就不用訪問外面的a了，但是你不能在它聲明之前訪問它。
也就是說，var變量可以多次聲明，而let不允許在相同作用域內重複聲明。

<script>
    if (true) {
      let a;
      let a; // Uncaught SyntaxError: Identifier 'a' has already been declared
    }

    if(true){
      var d;
      var d;    //不會報錯
    }

    if (true) {
      var c;
      let c; // Uncaught SyntaxError: Identifier 'c' has already been declared
    }

    if (true) {
      let d;
      var d; // Uncaught SyntaxError: Identifier 'd' has already been declared
    }
</script>

4）const常量：
const常量與let的作用域是一樣的，都是塊級作用域。
const 一旦被賦值，就不能再改變，但這並不意味着使用 const 聲明的變量本身不可變，只是說它不可被再次賦值，因此const 聲明的變量必須經過初始化（定義時就賦值）。

//會報錯，Uncaught ReferenceError: ture is not defined
    // const zoroo;
    // zoroo="ok";
    // console.log(zoroo);
    //正確定義
    const zoroo="ok";
    console.log(zoroo);

2、數字類型（number）

1）概念

最基本的數據類型；
不區分整型數值和浮點型數值；
所有數字都採用64位浮點格式存儲，相當於Java和C語言中的double格式；

2）NaN表示Not a number，非數字類型

//NaN表示Not a number，非數字類型
        console.log(parseInt("hello"));
        console.log(parseInt("123hello"));
        console.log(parseInt(3.1415926));

3、字符串類型（string）

是由Unicode字符、數字、標點符號組成的序列；
JavaScript中沒有字符類型
常用特殊字符在字符串中的表達：
字符串中部分特殊字符必須加上右劃線
常用的轉義字符 \n:換行 ':單引號 ":雙引號 \:右劃線

以上幾條都是字符串類型的幾個基礎點，在後文介紹“字符串對象”時還有關於字符串更多的用法

4、布爾型、Null和Undefined

1）布爾型
Boolean類型僅有兩個值：true和false，也代表1和0，實際運算中true=1,false=0

2）undefined型
Undefined 型只有一個值，即 undefined；
當聲明的變量未初始化時，該變量的默認值是 undefined；
當函數無明確返回值時，返回的也是值 “undefined”。

3）Null型
Null型只有一個專用值 null，即它的字面量；
值 undefined 實際上是從值 null 派生來的，因此 ECMAScript 把它們定義爲相等的；
儘管這兩個值相等，但它們的含義不同：undefined 是聲明瞭變量但未對其初始化時賦予該變量的值，null 則用於表示尚未存在的對象（在討論 typeof 運算符時，簡單地介紹過這一點）；
如果函數或方法要返回的是對象，那麼找不到該對象時，返回的通常是 null。

5、數據類型轉換

1）概念：
JavaScript屬於鬆散類型的程序語言，變量在聲明的時候並不需要指定數據類型；
變量只有在賦值的時候纔會確定數據類型；
表達式中包含不同類型數據則在計算過程中會強制進行類別轉換；

數字 + 字符串：數字轉換爲字符串
數字 + 布爾值：true轉換爲1，false轉換爲0
字符串 + 布爾值：布爾值轉換爲字符串true或false

console.log("hello"+2);
        console.log("hello"+true);
        console.log(2+true);

2）強制數據類型轉換

parseInt函數：強制轉換成整數例如parseInt("3.1415926")=3 ; parseInt(“12a")=12 ;
parseFloat函數：強制轉換成浮點數 parseFloat("123.456")=123.456
eval函數：將字符串強制轉換爲表達式並返回結果 console.log(eval("1+1")) 結果是2；
console.log(eval("5+6"));會默認轉化成數字，結果是11

三、運算符

1、基本概念

加(＋)、減(－)、乘(*) 、除(/) 、餘數(% )
-號除了可以表示減號還可以表示負號例如：x=-y
+號除了可以表示加法運算還可以用於字符串的連接例如：“abc”+“def”=“abcdef”

2、遞增(++) 與遞減(–)

		let i=10, j=20;
        console.log(i++)
        console.log(++i)
        console.log(j--)
        console.log(--j)

結果是：

3、邏輯運算符

等於 ( == ) 、不等於( != ) 、大於( > ) 、小於( < )
大於等於(>=) 、小於等於(<=)
與 (&&) 、或(||) 、非(!)

		let a=NaN;
        console.log(a==NaN);
        console.log(a!=NaN);
        console.log(2==2);
        console.log(2=="2");
        console.log("3">"20"); //最高位的ASCII碼

結果：

四、控制語句

1、if判斷語句
這個與其他編程語言沒有太大區別，格式如下：

		v1="灰太狼";
        if(v1=="慢羊羊")
        {
            alert("老傢伙");
        }
        else if(v1=="灰太狼")
        {
            alert("狼族統治");
        }
        else
        {
            alert("新任村長")
        }

2、switch選擇控制
這個與C語言中的switch用法幾乎是一樣的，格式如下：

		v2=52;
        switch(v2)
        {
            case 13:alert("一生");break;
            case 14:alert("一世");break;
            case 520:alert("五二零");break;
            default:alert("啥也不是");
        }

3、for循環
JavaScript裏的for循環也是和C語言、Java的幾乎相同：

		let v3;
        for(v3=0;v3<10;v3++)
        {
            // alert("v3當前的值爲："+v3);
            document.write("<br>v3當前的值爲："+v3);
        }

這裏的documents.write()表示將信息打印到頁面內，結果如下：

4、while循環
可以說是for循環的基礎版，for循環有三個參數，第一個是定義的值，第二個判斷條件，第三個是每循環一次進行的值操作。
在while循環內，沒有第一個和第三個參數。

		var i=1;
        while (i<=7)
        {
            document.write("<H"+i+">JavaScript</H "+i+"> ");
            document.write("<br>");
            i++;
        }

以上代碼實現的是循環輸出H1到H7字體大小：

5、異常處理

try：正常進行的部分
catch：出現異常纔會執行的部分
finally：無論如何都會執行的部分

try
        {
            console.log("正常執行！");
            //自行拋出一個異常
            throw Error("自定義異常！");
        }
        catch(e)
        {
            console.log("出現異常！"+e);
        }
        finally
        {
            console.log("終將執行的語句！");
        }

五、ECMA對象

1、對象須知

object對象：ECMAScript 中的所有對象都由這個對象繼承而來；Object 對象中的所有屬性和方法都會出現在其他對象中
11種內置對象：Array ,String , Date, Math, Boolean, Number Function,
Global, Error, RegExp , Object
在JavaScript可以用創建對象的方法定義變量，String、Math、Array、Date、RegExp都是JavaScript中重要的內置對象，在JavaScript程序大多數功能都是通過對象實現的

2、string對象

1）創建字符串的兩種方式
一是直接創建字符串，而是用string對象來創建字符串

	str1="Hello一號";  //字符串方式
    str2=new String("Hello二號");  //字符串對象方式
    console.log(typeof str1);
    console.log(typeof str2);
    console.log(str1.length);  //統計長度的屬性

2）字符串的常用方法

格式編排方法

	str1="Hello一號";
    console.log(str1.italics()); //斜體
    console.log(str1.bold());  //加粗
    console.log(str1.anchor());  //變成a標籤

格式轉換

	var str1="helLO，JAvascript";
    var str2=str1.toLowerCase();  //全部變成小寫
    var str3=str1.toUpperCase();  //全部變成大寫
    console.log(str2);
    console.log(str3);

獲取指定字符

	var str1="welcome to the world of JS!梔子！";
    var str2=str1.charAt(28);  //獲取28這個索引下的字符
    var str3=str1.charCodeAt(28);  //獲取28這個索引下字符的編碼
    console.log(str2);
    console.log(str3);

查詢指定字符

	var str1="welcome to the world of JS!";
    var str2=str1.indexOf("o");  //查詢字符o的索引位置
    var str3=str1.lastIndexOf("l");  //查詢字符l的索引位置
    console.log(str2);
    console.log(str3);

查詢字符串

match返回匹配字符串的數組，如果沒有匹配則返回null
search返回匹配字符串的首字符位置索引

	var str1="welcome to the world of JS!";
    var str2=str1.match("world");
    var str3=str1.search("world");
    console.log(str2[0]);
    console.log(str3);

截取字符串

	str1="Hello七號";
    console.log(str1.substr(1,5));  //從1截取到4
    console.log(str1.substring(1,5));  //從1截取到5
    console.log(str1.slice(1,5));  //從1切片到5
    console.log(str1.slice(-2,7));  //切片位置可以是負數

字符串替換

	var str1="abcdefgh";
    var str2=str1.replace("def","jjjjjj");  //用jjjjjj替換def
    console.log(str2);

字符串分割

	var str1="一,二,三,四,五,六,日";
    var str2=str1.split(",");  //用，號將字符串分割開
    console.log(str2);

字符串連接

	var str1="abcd";
    var str2=str1.concat("efgh");  //在str1後面接上一段
    console.log(str2);

3、Array對象

1）一維數組

	arr1=[1314,"曾經滄海難爲水",{name:"Za huw"}];  //數組內可以放任意元素
    arr2=new Array(3);  //大小爲3的數組對象
    arr3=new Array("數組object對象",true,12345);  //用Array對象方式創建數組
    console.log(arr1);
    console.log(arr2);
    console.log(arr3);

2）二維數組

	cnarr1=new Array(4);
    cnarr1[0]=new Array(7);
    cnarr1[0][0]="Monday";
    cnarr1[0][1]="Tuesday";
    cnarr1[0][2]="Wednesday";
    cnarr1[0][3]="Thursday";
    cnarr1[0][4]="Friday";
    cnarr1[0][5]="Saturday";
    cnarr1[0][6]="Sunday";
    console.log(cnarr1);

第一維的大小爲4，索引爲0的第二維大小爲7

3）數組對象的方法

4）join方法

	arr4=new Array("除卻","巫山","不是雲",11,22,33,4);
    console.log(arr4.join("--"));

5）toString方法

	vv=new Array(11,22,33,4);
    console.log(vv.toString());
    console.log(typeof vv.toString())

6）concat方法

	vv2= Array(123,4,5);
    ret=vv2.concat([678,9,10]);
    console.log(ret);
    console.log(typeof ret);

7）reverse方法

	vv3=[11,22,33,44];
    vv4=[5,40,6,1,7];
    console.log(vv3.reverse());  //順序顛倒

8）兩種排序
不正經的：

	vv4=[5,40,6,1,7];
    console.log(vv4.sort());

正經的：

	function so(a,b)
    {
        return a-b;
    }
    console.log(vv4.sort(so));

9）push入棧與pop出棧
這兩種出入棧方式都是先進後出

	arr8=[1,2,3];
    arr8.push(4,5,6);  //入棧，加入到最後面
    console.log(arr8); 
    console.log(arr8.pop());  //出棧，移除最後一個6

10）unshift入棧與shift出棧

	arr9=[8,9,10];
    arr10=["world"];
    arr9.unshift(4,5,6,7);  //入棧，加入到最前面
    arr10.unshift("hello,");  //入棧
    arr9.shift();  //出棧，移除第一個
    console.log(arr9);
    console.log(arr10);

4、函數對象

1）JS函數概念

可以使用變量、常量或表達式作爲函數調用的參數
函數由關鍵字function定義
js的函數加載執行與python不同，它是整體加載完纔會執行，所以執行函數放在函數聲明上面或下面都可以

2）兩種定義方式

複雜版

	obj=new Function("name","console.log(\"哈哈哈\"+name)");
    obj("平底鍋！");

常用版

	function add(x,y,z)
    {
        return x+y+z;
    }
    console.log(add(1,2,3,4,5));  //數字多了不會報錯，只會取前三個
    console.log(add("兩情若是長久時，","又豈在","朝朝暮暮。"));  //字符串也能相加

3）不限參數個數的函數

	function add()
    {
        sum=0;
        for(i=0;i<arguments.length;i++)
        {
            sum+=arguments[i];
        }
        return sum;
    }
    console.log(add(1,2,3,4,5,6,7,8,9,10));

4）匿名函數
說白了就是沒有名字的函數，也叫自執行函數；
好處就是簡便；
缺點就是易讀性差

(function(arv){alert(arv);})("歡迎訪問！");

這裏表示的就是一個沒有名字的函數，執行內容在{}內，形參參數是arv；
調用函數時傳入的參數是“歡迎訪問”
最終結果：

一篇文章帶你快速入門JavaScript（自學者福利）

文章目錄

一、開始之前

二、數據類型

1、變量

2、數字類型（number）

3、字符串類型（string）

4、布爾型、Null和Undefined

5、數據類型轉換

三、運算符

四、控制語句

五、ECMA對象

1、對象須知

2、string對象

3、Array對象

4、函數對象

推薦2款開源、美觀的WinForm UI控件庫

NET9 AspnetCore將整合OpenAPI的文檔生成功能而無需三方庫

在Linux下管理MySQL的大小寫敏感性

Python之進程+線程+協程（multiprocessing多進程模塊）

JavaScript之jQuery夠用即可（jQuery的引入、查找選擇器、左側菜單欄）

初學者python筆記（map()函數、reduce()函數、filter()函數、匿名函數）

Python之網絡編程（socketserver模塊詳解、鏈接認證）

Python之進程+線程+協程（進程的本質與 threading線程模塊）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結