JavaScript 語法

JavaScript 是一種 object-oriented (物件導向)、prototype-based (原型導向)、multi-paradigm (多範式) 語言。

其中 dynamically-typed (動態類型)，這意味著變量的型別在執行期間確定，並且可以根據賦值變動，以及屬於 弱型別 (weakly typed) 語言，這意味著型別之間的轉換較為寬容，語言會自動將不同型別的數據進行隱式轉換，雖然這樣提高了靈活性，但也可能帶來錯誤。

JavaScript 同時是 event-driven (事件驅動) 和 single-threaded (單線程)，透過事件循環機制實現高效的異步處理，讓它在處理複雜的 Web development (網頁開發) 任務時十分靈活

• 此筆記提供快速複習現有的語法架構 -2025

基本

(default) 預設為 Public（公共）

# 表示 Private（私有）

static 方法為 靜態方法，屬於 class 本身，與實例（Instance）無關

class MyClass {
    // 靜態方法
    static staticMethod() {
        return "This is a static method";
    }
}
const instance = new MyClass(); //實例化
console.log(instance.staticMethod); // undefined
console.log(MyClass.staticMethod()); // successful

變數宣告 (Variable Declarations)

• var：宣告一個全域或函數作用域的變數，可任意更改其值。
• let：宣告一個區塊作用域 (Block Scope) 的變數，可任意更改其值。
• const：宣告一個區塊作用域的不可變常數，值不可重新賦值。

Class

建構函數 (Constructor)

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

Get and Set

class MyClass {
	let value
  get value() {
    return this._value;
  }
  set value(newValue) {
    this._value = newValue;
  }
}

JSDoc 註解

/**
 * @typedef {Object} User
 * @property {number} id - 使用者的 ID
 * @property {string} name - 使用者的名稱
 * @property {boolean} isAdmin - 是否為管理員
 */

/**
 * @param {User} user - 使用者物件
 * @returns {} - 返回
 */
function printUser(user) {
  console.log(`ID: ${user.id}, Name: ${user.name}, Admin: ${user.isAdmin}`);
}

Funtion

箭頭函數

// () => {}
const example1 = () => {
  console.log("Hello");
}; //無回傳值 void

// () => ()
const example2 = () => (
"Hello"
); //有回傳值 string

DOM | Windows

window.addEventListener

window.scrollY

document.getElementById

    const div = document.getElementById('myDiv');

document.querySelector(”className”).add(”what”)

document.querySelector(”className”).remove(”what”)

對class的操作

const div = document.getElementById('myDiv');
div.classList.remove('what')
div.classList.add('what');

Logical operators

基本邏輯運算子Logical operators( || 、 && 、 ! )

! (反轉運算子)

const object = !true; // false

|| (OR)

• 如果左側為 truthy，直接返回左側的值。
• 如果左側為 falsy，返回右側的值。

console.log(true || false); // true
console.log(false || "hello"); // "hello"

&& (AND)

• 如果左側為 falsy，直接返回左側的值。
• 如果左側為 truthy，返回右側的值。

console.log(false && "hello"); // false
console.log(true && "world"); // "world"

isOkay ? A : B (Ternary Operator 三元運算)

判斷 isOkay 布林值 如果是 true 回傳 A 否則 回傳 B

?.

當值不存在時，給出undefine 而不引發程式錯誤

const obj = { A: "Hello" };
console.log( obj?.B ); // 输出 undefine

Array

push()

let arr = [1, 2, 3];

arr.push(4) //資料結構堆疊
console.log(arr); // 結果 [1, 2, 3, 4]

//arr.splice(索引值)  //只保留到索引值位子
//arr.splice(索引值,刪除數)  //只保留到索引值位子,往後刪除幾個
//arr.splice(索引值,刪除數,插入值)  //只保留到索引值位子,往後刪除幾個,在索引值插入值
arr.splice(2, 0, 'c'); // 在索引 2 處插入 'c'，不刪除任何元素
console.log(arr); // 結果 ['a', 'b', 'c', 'd']

//arr.shift()刪除開頭
arr.shift()
console.log(arr); // 結果 ['b', 'c', 'd']

arr.pop(); // 刪除陣列最後一個元素
console.log(arr); // [1, 2, 3]

splice()

arr.splice(索引值,刪除數,插入值,...)  //從哪個位置開始操作,往後刪除幾個,在索引值插入值

let arr = ['a', 'b', 'd'];
arr.splice(2, 0, 'c'); // 在索引 2 處插入 'c'
console.log(arr); // ['a', 'b', 'c', 'd']

let arr = ['a', 'b', 'c', 'd'];
arr.splice(2, 1); // 刪除索引 2 的元素 ('c')
console.log(arr); // ['a', 'b', 'd']

shift()

let arr = ['a', 'b', 'c', 'd'];
arr.shift(); // 刪除陣列的第一個元素 ('a')
console.log(arr); // ['b', 'c', 'd']

map()

陣列迴圈輸出

const array = [1, 2, 3]
array.map((item, index) => {
  console.log(item, index)
})
// console.log...
// 1 0
// 2 1
// 3 2

findIndex()

回應找到陣列索引值，沒找到回傳-1

const arr = ["A", "B", "C"];
const result = arr.findIndex((n) => {
  return n === "C";
});
console.log(result); //2

sort()

對陣列進行排列

result.sort((a, b) => {
  return new Date(a.date) - new Date(b.date); // 升序排序
});

join()

const fruits = ["Apple", "Banana", "Cherry"];
const result = fruits.join();
console.log(result); // Apple,Banana,Cherry

filter()

const array1 = ["A", "C"];
const array2 = ["A", "B", "C"];
array2.filter(item => !array1.includes(item)); // ["B"]

arr.push(data);
arr.pop();
arr.shift();
arr.concat()
arr.findIndex()

String

文字模板 (Template literals)

• **${ object }``

<p>{`Logged In: ${user.loggedIn}`}</p>

split()

const text = "A/B/C"
text.split("/") //輸出陣列 ["A","B","C"]

trim()

console.log("  消除前後空格 ".trim())

Object

物件解構 (Object Destructuring)

物件解構允許從物件中提取出值並賦給變數。這樣可以讓代碼更簡潔，減少繁瑣的存取操作。

const person = { name: 'Tom', age: 20 };

// 物件解構，將物件的屬性賦值給變數
const { name, age } = person;

console.log(name); // 输出 'Tom'
console.log(age);  // 输出 20

合併物件

使用解構語法可以合併兩個物件

const person = { name: 'Tom', age: 20 };
const add = { ...person, position: "staff" };

console.log(add); // 输出 { name: 'Tom', age: 20 , position: "staff" }

---

物件與鍵值 (Object Properties)

可以通過兩種方式來存取物件的鍵值：

1. 使用點語法（Dot Notation）
2. 使用中括號語法（Bracket Notation）

const object = {
    key: "value",
    key2: function () {
        console.log("Hello");
    },
};

console.log(object.key);    // 输出 "value"
console.log(object["key"]); // 输出 "value"
console.log(object.key2);   // 输出 function 內容

---

更改物件屬性 (Modifying Object Properties)

可以直接通過點語法或中括號語法來為物件添加或修改屬性。

const obj = { A: "a" };

// 添加新屬性
obj.B = "b";
obj["C"] = "c";

console.log(obj); // 输出 { A: "a", B: "b", C: "c" }

---

解構賦值 (Destructuring Assignment)

解構賦值並設置預設值：

在解構賦值時，可以為變數設置預設值，若物件沒有該屬性，則會使用預設值。

function greetUser({ name = "Guest", age = 18 } = {}) {
  console.log(`Hello, ${name}! You are ${age} years old.`);
}

// 呼叫時有傳入值
greetUser({ name: "Alice", age: 25 }); // 輸出: Hello, Alice! You are 25 years old.

// 呼叫時未傳入 name 和 age，使用預設值
greetUser({}); // 輸出: Hello, Guest! You are 18 years old.

---

展開物件 (Spread Syntax for Objects)

可以使用展開運算符（...）來創建一個新的物件並合併其他物件的屬性。

const A = { A: "a" };

// 使用展開運算符合併物件
const updatedA = { ...A, B: "new key value" };

console.log(updatedA); // 输出 { A: "a", B: "new key value" }

---

陣列解構 (Array Destructuring)

陣列解構賦值允許從陣列中提取出值並賦給變數。

const arr = [1, 2, 3];
const [a, b, c] = arr;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

交換變數值 (Swapping Variables)

使用解構可以簡單地交換兩個變數的值：

let left = 5;
let right = 10;

// 交換變數值
[right, left] = [left, right];

console.log(left);  // 10
console.log(right); // 5

JSON

JSON.stringify() //將 JavaScript 物件轉換為 JSON 字串
JSON.parse() //將 JavaScript 字串 轉換為 JSON 物件

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 30,
};

//將 JavaScript 物件 轉換為 JSON 字串
const jsonString = JSON.stringify(person);
console.log(typeof(jsonString) + jsonString);

//將 JavaScript 字串 轉換為 JSON 物件
const parsedObject = JSON.parse(jsonString);
console.log(typeof(parsedObject) +  parsedObject);

Document Object Model

透過classList可以在Element中添加class，再透過物件導向程式語言和Css可以實現動態渲染。

const item =  document.createElement("div")
item.classList.add("oen")
item.classList.remove("one")

ES Module

ES Module是JavaScript的技術，將物件類別模組化，可以導出到不同的檔案中，使專案更具結構

主要分為export default

export 導出

一個檔案中可以有多個export導出，原因是該導出(import)物件類別必須是相同名稱，因此可以很清楚的導入對應的物件類別

重點: export導出多個物件、變數、函式

//page1.js
export const object1 = "1"
export function HomeFuction() {
    return (
        <div>...</div>
    )
}

//page2.js
import { HomeFuction, object1 } from './page1.js' //選擇導出
import * as all from './page1.js' //導入全部

export default 導出

一個檔案中只可以有一個默認導出，可以自訂導出類別的名稱，

重點: export default導出單個類別

//page.js
export default function HomePage() {
    return (
        <div>...</div>
    )
}

//page2.js
import HomePage from './page.js'//導出唯一默認

await

await 是用於等待 Promise 解析的關鍵字，通常與 async 函數一起使用。async 函數允許你使用 await 在 Promise 解析後繼續執行代碼，而不必使用回調函數。

技術文件參考 連結

async function fetchData() {
    try {
        const response = await fetch('<https://api.example.com/data>');
        const data = await response.json();
        return data;
    } catch (error) {
        console.error("Error fetching data", error);
    }
}

其他

TypeScript (升級成強型別語言) (待編輯)

npm install typescript @types/node ts-node tsconfig-paths --save-dev

• typescript：TypeScript 編譯器。
• @types/node：Node.js 的類型定義。
• ts-node：直接運行 TypeScript 文件的工具（開發環境）。
• tsconfig-paths：支持基於 TypeScript 路徑別名的模組加載（可選）。

npx tsc --init

類型斷言（Type Assertion）

Type

type Data = {
    name : String
    age : number
}

function getDataAge(props : Data){
    return props.age;
}

const data: {} = {} as any;

TypeScript Key

• Tuple

Browser Storage

sessionStorage.setItem()
sessionStorage.removeItem()