JavaScript（1）語法基礎

阿新 • • 發佈：2021-06-17

JavaScript

JavaScript：基於物件和事件觸發的弱型別指令碼語言。指令碼通常以文字儲存，只在被呼叫時進行解釋或編譯。可以動態增刪改HTML標籤和CSS樣式，動態校驗資料。
JavaScript特點：

互動性：存在於所有Web瀏覽器中，能夠增強使用者與Web站點和 Web 應用程式之間的互動。
安全性：不能直接訪問磁碟
跨平臺：瀏覽器能解析JavaScript就可以，不需要針對於作業系統。

JavaScript組成：

ECMAScript（核心）：
DOM（文件物件模型）
BOM（瀏覽器物件模型）

JavaScript引用方式：<script>標籤在任意位置使用都可以，但是影響載入順序。前兩種引用方式不可以混用。type="text/javascript"屬性不是必需的。JavaScript是HTML中的預設指令碼語言。

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 第一種【內部指令碼】：使用<script>宣告js程式碼域。【注意：外部指令碼中不能再寫內部指令碼】  
-->
    <script type="text/javascript">
        alert('第一種');
    </script>
    <!-- 第二種【外部指令碼】：使用<script>引入外部宣告的js檔案。src屬性：JavaScript檔案的相對路徑 -->
    <script src="my.js" type="text/javascript"></script>
</head>

<body>
    <!-- 第三種【內嵌指令碼】：內嵌在標籤內部，通過事件觸發屬性呼叫。例如：onclick等  
-->
    <input type="button" onclick="alert('第三種')" value="第三種">
</body>

JavaScript語言

註釋：分為多行註釋和單行註釋。

// 單行註釋


/*
    多行註釋
    多行註釋
    多行註釋
 */

語法規範：建議使用分號;結尾、忽略多個空格、支援折行編寫程式碼、
變數宣告：用var關鍵字進行變數宣告（var可以省略）。可以儲存任意型別的資料。變數允許出現同名變數，後面的會將前面的覆蓋。嚴格區分大小寫。宣告不賦值，預設值是undefined。變數允許字母、數字、_（下劃線）、$（美元符號），不允許以數字開頭和關鍵字。

// 宣告變數。
var a = 123;

資料型別：JavaScript中資料型別有五種基本型別（Number、String、Boolean、Null、Undefined）和一種引用型別（Object）。可以使用typeof可以判斷變數的資料型別

number：數字型別。包含了JavaScript中所有的數字型別（包括浮點數和小數）。數字型別不精準，不能用於金錢計算。
string：字串型別。可以使用單引號也可以使用雙引號。
boolean：布林型別。只有true和false兩種。
null：空型別。輸出null為object型別
undefined：未定義的型別。變數聲明後不賦值時預設是未定義型別。Undefined和null判定是相等的
object：物件。ECMAScript中的所有物件都由Object繼承而來，Object物件中的所有屬性和方法都會出現在其他物件中。var obj = new Object();

var a;
// 結果為：undefined
console.log("var：" + typeof (a))
a = 123;
// 結果為：number
console.log("123：" + typeof (a))
a = "cls";
// 結果為：string
console.log("cls：" + typeof (a))
a = true;
// 結果為：boolean
console.log("true：" + typeof (a))
a = null;
// 結果為：object
console.log("null：" + typeof (a))

資料型別比較：實際開發中經常判斷某些值是否為null或者為undifend。下面程式碼進行舉例如何判斷。

/*
 * 結論：typeof輸出的均為小寫字串，需要使用字串比較。=== 需要使用資料型別比較
 */
var a;
// 輸出為：undefined
console.log(a);
// 輸出為：undefined（但實際上是'undefined'）
console.log(typeof a);
// 輸出為：true（直接使用型別判斷）
console.log(a === undefined);
// 輸出為：false（使用typeof之後輸出的均為字串型別）
console.log(typeof a === undefined);
// 輸出為：true
console.log(typeof a === 'undefined');

var b = null;
// 輸出為：null
console.log(b);
// 輸出為：object
console.log(typeof b);
// 輸出為true
console.log(b === null);
// 輸出為：false
console.log(typeof b === null);
// 輸出為：false
console.log(typeof b === Object);
// 輸出為：false
console.log(typeof b === 'null');
// 輸出為：true
console.log(typeof b === 'object');

var c = 1;
var d = '曹老三';
var e = false;
console.log(c === 1);
console.log(d === '曹老三');
console.log(e === false);

資料型別轉換：toString()、parseInt()、parseFloat()和強制型別轉換Boolean()，String()，Number()。null和undefined進行轉換會報錯（沒有toString和parseInt等方法）

var x = "12.05";
// 轉換成String
console.log(x.toString() + "：" + typeof x.toString());
// 轉換成Boolean
console.log(Boolean(x) + "：" + typeof Boolean(x));
// 轉換成Number
console.log(parseFloat(x) + "：" + typeof parseFloat(x));
console.log(parseInt(x) + "：" + typeof parseInt(x));

運算子：

算術運算子：+，-，*，/，%。在算術運算中，資料型別會自動使用Number()強轉成數字型別，然後進行運算
關係運算符：>，>=，<，<=，!= ，++（自增），--，=，==（等值符，只比較值），===（等同符，比較值和型別）
三元運算子：條件？表示式1：表示式2（如果條件為true，返回表示式1的結果，如果條件為false，返回表示式2的結果）
邏輯運算子：&&，||，!
void運算子：javascript:void(0)。一般用於<a>標籤的href屬性，防止檢視地址，阻止跳轉。
型別運算子：typeof判斷資料型別、instanceof(判斷型別是否是你定義的，返回boolean型別【注意：不能使用instanceof判斷null和undefined】)

var a = 10;
var b = 20;
var c = "10";
// 加法
console.log(a + b);
// 等值符和等同符
console.log((a == c) + "：" + (a === c));
// 關係運算符：大於
console.log(a > b);

流程控制語句：基本語法同java語言，不做過多解釋，見程式碼

判斷選擇結構：if(){}，else if(){}，else{}，switch(){}
迴圈結構：for(){}，while(){}，do{}while()，for(in){}增強for迴圈

var a = 15;
var b = ["呵呵", "哈哈", "垃圾"];

// 判斷：if else
if (a == 10) {
    console.log("a為10");
} else if (a == 20) {
    console.log("a為20");
} else {
    console.log("a未匹配");
}
// 判斷：switch
switch (a) {
    case 10:
        console.log("a為10");
        break;
    case 20:
        console.log("a為20");
        break;
    default:
        console.log("a未匹配");
        break;
}
// 迴圈：for
for (var i = 0; i < b.length; i++) {
    console.log(i);
    console.log(b[i]);
}
// 迴圈：增強for（i代表的角標，這個和java中不一樣）【經常用於遍歷物件】
for (var i in b) {
    console.log(b[i]);
}
// 迴圈：while
while (a < 20) {
    console.log(++a);
}
// 迴圈：do while
do {
    console.log(a++);
} while (a < 25);

物件、函式

物件：基本資料型別只能將單一值賦給變數，物件就可以把多個值（包括函式，如果是函式就稱作“方法”）賦給變數。物件分為內建物件（Number、String、Math等）、宿主物件（由JavaScript執行環境【瀏覽器】提供的物件，BOM、DOM）、自定義物件。

// 建立物件
var student = {
    "name": "曹老三",
    "age": 18,
    "grade": 50,
    "isBy": false,
    "study": function () {
        console.log("我在學習")
    }
}
// 修改物件（屬性）
student.name = "王大妞";
// 讀取物件（屬性）
console.log(student.name);
console.log(student["name"]);
// 刪除物件（屬性）
delete student.name;
console.log(student.name);
// 呼叫物件的函式屬性
student.study();

遍歷物件：物件如果不知道有多少屬性的時候，可以使用for...in進行遍歷

// 建立物件
var student = {
    "name": "曹老三",
    "age": 18,
    "grade": 50,
    "isBy": false,
    "study": function () {
        console.log("我在學習")
    }
}
// 遍歷物件
for (item in student) {
    console.log(student[item]);
}

函式：函式是由事件驅動的或者當它被呼叫時執行的可重複使用的程式碼塊。

JavaScript中的函式不需要定義返回值。如果需要返回值，直接return，預設返回undefined。
形參不需要宣告型別，函式的形參在呼叫的時候可以不賦值，預設為undefined。如果不完全賦值，則為依次賦值。
沒有函式過載，只有函式覆蓋。
實參可以是任意型別物件：實體類、函式、匿名函式

// 第一種宣告方式：普通函式宣告【常用】（函式宣告提前）
function test1(a, b) {
    alert("我是第一種宣告方式" + (a + b));
}
// 第二種宣告方式：建構函式方式
var test2 = new Function("a", "b", "alert(a+b);");
// 第三種宣告方式：匿名函式並賦給一個變數【常用】
var test3 = function (a, b) {
    alert("我是第三種宣告方式" + a + b);
};
// 定義需要返回值的函式
function sum(a, b) {
    return a + b;
}

// 呼叫函式
test1(5, 6);
// 呼叫函式(有返回值)
var c = sum(5, 6);

全域性變數：在函式外宣告的變數是全域性變數，網頁上的所有指令碼和函式都能訪問它。全域性變數會在頁面關閉後被刪除。全域性作用域中有一個window物件（BOM）由瀏覽器建立。而所有的全域性變數都是window物件的屬性。所有的函式都是window的方法。
區域性變數：在JavaScript函式內部宣告的變數（使用var）是區域性變數，所以只能在函式內部訪問它。（該變數的作用域是區域性的）。區域性變數會在函式執行以後被刪除。

// 全域性變數
var d = 789;
// 方法
function test1(a, b) {
    // 區域性變數
    var c = 654;
    // 輸出區域性變數
    console.log(c);
    // 輸出全域性變數
    console.log(d);
    return c;
}
// 輸出區域性變數【報錯】
// console.log(c);
// 輸出全域性變數
console.log(d);
test1();

實參和返回值型別：可以是任意物件、函式（程式碼舉例）、匿名函式

// 實參傳入（1）函式
function test1(a) {
    console.log("test1 -------------- ");
    // 方式一對應：呼叫函式test2
    console.log(a(5, 6));
    // 方式二對應：輸出函式test2返回值
    console.log(a);
}
function test2(a, b) {
    console.log("test2 -------------- ");
    return a + b;
}
// 方式一：將函式物件傳入
test1(test2);
// 方式二：呼叫函式，將返回值傳入
test1(test2(5, 6));

// 實參傳入（2）物件
var person = {
    "name": "曹老三",
    "age": 15
};
function test1(a) {
    console.log(a.name);
    console.log(a.age);
}
// 呼叫函式傳入物件
test1(person);

立即執行函式：表示這段函式只會執行一次且立即執行。

/**
 * 立即執行函式：
 * 外邊括號防止編譯報錯，表示為一個整體
 * 後邊括號為立即呼叫函式。
 **/
(function () {
    console.log("123")
})();

宣告提前：所有var定義的物件，都會最先被宣告，但是不會賦值。只有執行到那一行才會賦值。不使用var宣告的物件，只有執行到那一行才會宣告和賦值

// 提前列印a：undefined。宣告未賦值就是undefined
console.log(a);
// 提前列印b：報錯！因為b還沒有宣告
console.log(b);
// 使用var宣告a
var a = "123";
// 不使用var宣告b
b = "456";

函式宣告提前：常用的兩種建立函式的方式針對宣告時機有卻別，詳情看程式碼

// 正常使用函式
test1();
// 報錯：函式不存在
test3();
// 宣告提前，頁面載入時候就被建立，也就是說無論什麼時候使用都行。
function test1() {
    console.log("我是第一種宣告方式");
};
// 宣告不提前：只有執行這段程式碼之後test3方法才能呼叫。
var test3 = function (a, b) {
    console.log("我是第三種宣告方式");
};

函式作用域：每次呼叫函式都會建立一個新的函式作用域，他們之間相互獨立。函式中可以訪問全域性變數，全域性中無法訪問函式的區域性變數。函式中使用變數優先順序是從內部找，然後一層層向外找，如果最外層的全域性作用域也沒有該變數，就會報錯。在函式中不使用var宣告變數，就變成了全域性變數。

// 全域性變數
var a = 10;
var b = 33;
// 函式
function test1() {
    // 區域性變數
    var a = 20;
    // 優先使用區域性變數
    console.log("函式中：" + a);
    // 區域性變數沒有b使用全域性變數b
    console.log("函式中：" + b);
};
// 外部訪問的就是全域性變數
console.log("全域性：" + a);
test1();