JavaScript 基礎

JavaScript 基礎

本文講解 JavaScript 的基礎知識。

YouTube Video

執行 Hello World!

JavaScript 概述

JavaScript 是網頁開發中最廣泛使用的程式語言之一。它主要用於為網頁添加動態元素,實現用戶界面操作、資料傳輸和動畫創建。它可以在客戶端(瀏覽器中)運行,也可以透過使用像 Node.js 這樣的技術在伺服器端運行。由於其簡單性和靈活性,新手容易學習,並且專業開發者也廣泛使用它。

JavaScript 中的變數

JavaScript 中的變數就像儲存和重複使用資料的容器。通過使用變數,你可以在程式中維護和操作值。

變數宣告

在 JavaScript 中,有三個關鍵字可以用來宣告變數。

  • var:一種舊的變數宣告方式,但處理它的作用域是複雜的,需小心使用。它是基於函式作用域的。
1var x = 10;
  • let:在 ES6 中引入,是用來宣告區塊作用域變數的方式。它可以重新賦值,但無法在相同作用域中重新宣告。
1let y = 20;
  • const:用於宣告不可變(常數)的變數。它具有區塊作用域,宣告後不可重新賦值或重新宣告。
1const z = 30;

作用域

變數具有作用域的概念。

全域作用域

1var globalVar = 'This is global'; // Global scope
2
3function accessGlobal() {
4    console.log(globalVar); // Able to access global variable
5}
6
7accessGlobal(); // Outputs "This is global"
  • 全域作用域的變數可以從任何地方訪問。使用 var 宣告的變數具有全域或函數作用域,而 letconst 則具有區塊作用域。

區塊作用域

1if (true) {
2    let localVar = "This is a block-scoped variable";
3
4    // Accessible inside the brackets
5    console.log(localVar);
6}
7
8// Error: localVar cannot be used outside of this scope
9console.log(localVar);
  • 區塊作用域: 使用 letconst 宣告的變數僅在 {}(大括號)內有效。

  • {} (大括號)外部訪問時發生錯誤。

函數作用域

 1function myFunction() {
 2    var functionScoped = 'This is function scope';
 3    // Accessible inside the function
 4    console.log(functionScoped);
 5
 6    if (true) {
 7        var functionVar = 'This is also function scope';
 8    }
 9    // functionVar can be used inside of the fucntion
10    console.log(functionVar);
11}
12
13myFunction(); // Outputs "This is function scope"
14
15// Error: functionScoped is not defined
16console.log(functionScoped);
  • 函數作用域: 在函數內定義的變數和函數無法從函數外部訪問。在函數內使用 var 宣告的變數屬於此作用域。

  • 在此範例中,只要在函數作用域內,變數 functionVar 可以從 {}(大括號)外部訪問。另一方面,從函數作用域外部訪問變數 functionScoped 會導致錯誤。

因此,用 var 宣告的變數只有函數作用域,沒有區塊作用域,可能會在意外範圍內被使用,帶來風險。對於不變的變數,建議使用 const,通常使用 let,應盡量避免使用 var。

數據類型

JavaScript 變數可以儲存不同數據類型的值。string 用於處理文字,number 用於處理數值。

主要的數據類型如下:。

 1// Number: Numeric type (integer and floating point number)
 2let integerNumber = 42;
 3let floatNumber = 3.14;
 4console.log("Number (Integer):", integerNumber);
 5console.log("Number (Float):", floatNumber);
 6
 7// String: String type
 8let text = "Hello, JavaScript!";
 9console.log("String:", text);
10
11// Boolean: Boolean type (true or false)
12let isJavaScriptFun = true;
13let isError = false;
14console.log("Boolean (true):", isJavaScriptFun);
15console.log("Boolean (false):", isError);
16
17// Null: Explicitly represents "nothing"
18let emptyValue = null;
19console.log("Null:", emptyValue);
20
21// Undefined: The default value assigned to an uninitialized variable
22let notDefined;
23console.log("Undefined:", notDefined);
24
25// Symbol: A data type for creating unique values
26let uniqueKey = Symbol("id");
27console.log("Symbol:", uniqueKey);
  • 原始類型
    • number:處理數值(整數和浮點數)。
    • string:處理字串。
    • boolean:處理布林值 truefalse
    • null:明確表示值為「無」。
    • “未定義(undefined)”:自動分配給尚未初始化的變量的值。
    • Symbol:用於創建唯一值的數據類型。
 1// Object: A data structure that holds multiple properties
 2let person = {
 3    name: "Alice",
 4    age: 25,
 5    isStudent: false
 6};
 7console.log("Object:", person);
 8console.log("Object Property (name):", person.name);
 9console.log("Object Property (age):", person.age);
10
11// Array: A list that holds multiple values
12let numbers = [10, 20, 30, 40];
13console.log("Array:", numbers);
14console.log("Array Element (index 0):", numbers[0]);
15
16// Function: A function object
17function greet(name) {
18  return "Hello, " + name + "!";
19}
20console.log("Function Output:", greet("Bob"));
21
22// Another way to define a function using arrow syntax
23let add = (a, b) => a + b;
24console.log("Arrow Function Output (3 + 5):", add(3, 5));
  • 物件類型:
    • Object:具有多個屬性的數據結構。
    • 陣列:包含多個值的列表。
    • 函数:一個函數物件。

變數的賦值與重新賦值

使用 letvar 聲明的變數可以重新賦值,但使用 const 聲明的變數一旦聲明後就無法重新賦值。

1let score = 100;
2score = 150; // Correct
3
4const pi = 3.14;
5pi = 3.14159; // Error

變數提升

在 JavaScript 中,變數聲明會出現「提升」現象,也就是提升到其作用域的頂部。使用 var 聲明的變數會被提升,但在聲明之前使用 letconst 則會導致錯誤。

1console.log(a); // undefined
2var a = 10;
3console.log(a); // 10
  • 在這種情況下,用 var 聲明的變量會提升,並輸出它們的值。
1console.log(b); // ReferenceError
2let b = 20;
  • let 聲明的變量不會提升,會導致錯誤。

正確使用變數

正確使用變數時請考慮以下幾點。

  • 建議使用 const,避免使用 var
  • 遵循變數命名規範。
    • 使用駝峰命名法(camelCase),如 userNametotalPrice
    • 避免使用像 datavalue 這類模糊的名稱,應使用具意義的名稱以提升可讀性。
    • 變數名稱不能以數字開頭,因此像 1variable 這樣的名稱是不允許的。
  • 過度使用全域變數會造成作用域模糊並導致錯誤,因此盡可能避免使用。

總結

  • var:一種舊的變數聲明方法,具有函數作用域。
  • let:一種區塊作用域的變數,可以重新賦值。
  • const:一種區塊作用域的變數,無法重新賦值(常量)。
  • 根據數據類型使用變數並注意它們的作用域是非常重要的。

什麼是 JavaScript 中的轉義字元?

轉義字元是一種方法,用於在普通字串中表示具有特殊含義的字元。在 JavaScript 中,轉義字元以反斜杠 \ 開頭,用於為字串賦予特殊效果或包含控制字元。轉義字元用於在字串中包含諸如換行符、製表符或引號等元素。

使用轉義字元的範例

以下是一些使用轉義字元的範例代碼。

轉義雙引號和單引號

使用轉義字元在字串中表示雙引號或單引號。

1const singleQuote = 'It\'s a beautiful day!';
2console.log(singleQuote); // Output: It's a beautiful day!
3
4const doubleQuote = "He said, \"Hello there!\"";
5console.log(doubleQuote); // Output: He said, "Hello there!"

轉義反斜杠

若要在字串中包含反斜杠本身,請使用 \ 進行轉義。

1const path = "C:\\Program Files\\MyApp";
2console.log(path); // Output: C:\Program Files\MyApp

轉義換行符和製表符

您可以插入換行符和製表符,使長字串更具可讀性。

1const multiline = "First line\nSecond line\nThird line";
2console.log(multiline);
3// Output:
4// First line
5// Second line
6// Third line
7
8const tabbed = "Column1\tColumn2\tColumn3";
9console.log(tabbed); // Output: Column1  Column2  Column3

轉義 Unicode 字元

使用 Unicode 轉義序列可以通過十六進制代碼表示特定字元。

1const smiley = "\u263A";  // Copyright Mark
2console.log(smiley);

注意事項

過度使用轉義可能影響可讀性

過度使用轉義字元會降低代碼的可讀性。在長字串中謹慎使用轉義字元尤其重要。

考慮使用模板字串

在 JavaScript 中,使用反引號的模板字串允許您在不使用轉義字元的情況下包含換行符或嵌入表達式。

1const message = `This is a message
2that spans multiple lines`;
3console.log(message);
4// Output:
5// This is a message
6// that spans multiple lines

總結

轉義字元對於在字串中表示特殊字元或控制字元至關重要。通過轉義單引號或雙引號並添加換行符或製表符,您可以創建更靈活的字串。但是,過度使用轉義字元可能會使代碼難以閱讀,因此請在適當時考慮使用模板字串。

JavaScript 版本

JavaScript 擁有一個稱為 ECMAScript (ES) 的標準規範。JavaScript 是基於這一標準而發展的。以下是其主要版本的簡要描述。

  • ES3 (1999)

    第一個被廣泛採用的版本。基本語法和功能已被確立。

  • ES5 (2009)

    引入了 strict mode,並新增了 Array.prototype.forEachObject.keys 等新功能。

  • ES6 / ES2015 (2015)

    JavaScript 已進行重大更新。許多現代 JavaScript 的基礎特性,例如 letconst箭頭函數promises模組 等被引入。

  • ES7 / ES2016 (2016)

    新增了 Array.prototype.includes冪運算符號 (**)

  • ES8 / ES2017 (2017)

    引入了 async/await,使得編寫非同步程式更簡單。

  • ES9 / ES2018 (2018)

    新增了非同步迭代器和 剩餘/展開屬性

  • ES10 / ES2019 (2019)

    新增了 flatMapObject.fromEntries

  • ES11 / ES2020 (2020)

    新增了 選擇鏈 (?.)空值合併運算符 (??),使程式碼能更簡單和安全地撰寫。

  • ES12 / ES2021(2021)

    新增了 String.prototype.replaceAllPromise.any 等功能。

  • ES13 / ES2022(2022)

    新增了 Array.prototype.at 和類的 private 欄位(#field)等功能。

  • ES14 / ES2023(2023)

    新增了 Array.prototype.toSortedSymbol.prototype.description 等功能。

  • ES15 / ES2024(2024)

    新增了便於管理 PromisePromise.withResolvers 和可調整大小的 ArrayBuffer 等功能。

目前的 JavaScript 每年都會更新,即使是最新版本也會添加新功能。

您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。

YouTube Video