chen
JavaScript 是一門廣泛應用於 Web 開發的語言，它不僅可以在瀏覽器中運行，也可以在其他環境中執行，例如 Node.js 和 Electron 等。本篇文章將帶領讀者逐步瞭解 JavaScript 的基本語法，爲後續深入學習打下堅實的基礎。
什麼是 JavaScript？
JavaScript 是世界上最流行的腳本語言之一，由 Brendan Eich 在 Netscape Communications Corporation（網景通信公司）創建。它的設計目的是爲了給 HTML 頁面添加動態行爲，比如在用戶與網頁交互時改變內容或樣式。如今，JavaScript 已經成爲全功能編程語言，被用於構建複雜的 web 應用程序以及桌面和移動應用。
變量與數據類型
(甲) 變量
在 JavaScript 中，變量用來存儲值。你可以通過使用 `var`、`let` 或者 `const` 關鍵字來聲明一個變量。其中 `const` 聲明的常量一旦賦值就不能修改其值；而 `let` 和 `var` 聲明的變量則可以多次賦值，但 `let` 通常更推薦使用，因爲它不會提升變量的作用域到函數的開頭。
// 使用 var 聲明變量
var myVar = "Hello, World!";
myVar = "你好，世界！"; // 可以再次賦值
// 使用 let 聲明變量
let myLet = 42;
myLet += 1; // 等同於 myLet = myLet + 1
console.log(myLet); // => 43
// 使用 const 聲明常量
const PI = 3.14159;
PI = 3.1416; // TypeError: Assignment to constant variable.
(乙) 數據類型
JavaScript 有兩種類型的數據類型：原始數據類型（primitive data types）和引用數據類型（reference data types）。原始數據類型有 `String`、`Number`、`Boolean`、`Null` 和 `Undefined`，它們直接包含值；而引用數據類型有 `Object`、`Array` 和 `Function`，它們的值是對象的引用。
// 字符串 String
let name = "Alice";
name[0] = 'A'; // Error: 屬性不能設置這個字符串的第一個字符
// 數值 Number
let age = 28;
age++; // 自增操作符
// 布爾值 Boolean
let isDone = true;
if (isDone) {
console.log('已完成');
} else {
console.log('未完成');
}
// Null
let person;
person = null;
// Undefined
function sayHi() {
console.log('Hi there!');
};
sayHi(); // undefined
運算符與表達式
JavaScript 支持多種運算符，包括算術運算符、比較運算符、邏輯運算符、位運算符、賦值運算符和其他特殊運算符。
// 算術運算符
let x = 7;
x *= 2; // 等同於 x = x * 2
console.log(x); // => 14
// 比較運算符
let y = 3;
if (y > 2) {
console.log('y 大於 2');
}
// 邏輯運算符
let isActive = false;
let isVisible = true;
let canEdit = isActive && isVisible; // 短路邏輯 AND
canEdit = isActive || isVisible; // 短路邏輯 OR
console.log(canEdit); // => false or true
流程控制語句
JavaScript 提供了豐富的流程控制語句，包括 if-else 條件語句、switch 多分支選擇語句、for 循環、while 循環和 do-while 循環。
// If-Else 條件語句
let maxAge = 65;
if (age >= maxAge) {
console.log('已退休');
} else {
console.log('尚未退休');
}
// Switch 多分支選擇語句
let dayOfWeek = 'Friday';
switch (dayOfWeek) {
case 'Monday':
console.log('新的一週開始了');
break;
case 'Friday':
console.log('週末快樂');
break;
default:
console.log('今天不是週一也不是週五');
}
// For 循環
for (let i = 0; i < 5; i++) {
console.log(`Current iteration: ${i}`);
}
// While 循環
let count = 0;
while (count < 5) {
console.log(`Counting: ${count}`);
count++;
}
// Do-While 循環
do {
console.log('Looping...');
count--;
} while (count > 0);
函數
JavaScript 中的函數可以用作代碼塊，這些代碼塊接受輸入參數，並且可能返回結果。函數可以通過 function 關鍵字定義，也可以作爲對象的方法存在。
// 普通函數
function add(a, b) {
return a + b;
}
console.log(add(2, 3)); // => 5
// Arrow 函數
const sum = (num1, num2) => {
return num1 + num2;
};
console.log(sum(10, 20)); // => 30
// 作爲對象方法存在的函數
const user = {
firstName: 'John',
lastName: 'Doe',
fullName: function () {
return `${this.firstName} ${this.lastName}`;
}
};
console.log(user.fullName()); // => John Doe
數組與集合
JavaScript 中的數組是一種特殊的對象，它可以以索引形式保存一組同類型的數據。此外，ES6 引入了 Set 和 Map 結構，分別提供不重複元素集和鍵值對映射的功能。
// 數組 Array
let fruits = ['apple', 'banana', 'cherry'];
fruits.push('orange'); // 向數組末尾追加元素
console.log(fruits); // => ["apple", "banana", "cherry", "orange"]
// ES6 Set 結構
let uniqueFruits = new Set([...fruits]);
uniqueFruits.delete('banana'); // 從集中移除指定元素
console.log(uniqueFruits); // => Set { apple, cherry, orange }
// ES6 Map 結構
let infoMap = new Map();
infoMap.set('name', '張三');
infoMap.set('age', 28);
console.log(infoMap.get('age')); // => 28
七、面向對象編程（OOP）
JavaScript 是一門基於原型的語言，而不是傳統的類繼承模型。然而，這並不意味着我們不能進行 OOP 風格的編程。我們可以通過構造函數和原型鏈來實現類的概念。
// 構造函數
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.greet = function () {
console.log(`我的名字是 ${this.name}，我今年 ${this.age} 歲。`);
};
// 實例化對象
let alice = new Person('Alice', 28);
alice.greet(); // => "我的名字是 Alice，我今年 28 歲。"
八、錯誤處理與異常拋出
在 JavaScript 中，錯誤通常是使用 try/catch/finally 語句處理的。當發生錯誤時，程序會進入 catch 塊，在那裏我們可以處理錯誤。
try {
someOperationThatMightThrowAnError();
} catch (error) {
console.error('An error occurred:', error);
} finally {
console.log('無論如何都會執行的清理工作');
}
九、模塊與打包器
隨着單頁應用的普及，JavaScript 文件變得越來越大，我們需要一種方式來管理依賴關係並進行代碼分割。目前最流行的方式是使用模塊系統和打包器，如 CommonJS、AMD、UMD、ES Modules 和 Webpack、Rollup 等。
// 示例模塊
module.exports = function greet(who) {
return 'Hello, ' + who;
};
// 導入和使用模塊
const greetModule = require('./exampleModule.js');
console.log(greetModule('World')); // => Hello, World
十、總結
本文旨在提供一個關於 JavaScript 基礎知識的全面概述。實際上，這只是冰山一角，因爲 JavaScript 生態系統非常龐大且不斷發展，涵蓋了從客戶端渲染到服務端渲染，再到桌面和移動應用開發的方方面面。希望這篇文章能爲初學者打開通往 JavaScript 世界的大門，鼓勵他們進一步探索和學習。
