JavaScript Cheat Sheet

JavaScript Cheat Sheet

1. 變數與常量

let name = 'Alice';  // 可以改變
const age = 25;      // 常量，不可改變
var isStudent = true; // 全域變數

2. 資料型別

• String: 'Hello'
• Number: 42
• Boolean: true or false
• Array: [1, 2, 3]
• Object: {name: 'Alice', age: 25}
• Null: null
• Undefined: undefined

3. 運算符

• 數學運算: +, -, *, /, % (取餘)
• 遞增/遞減: ++, --
• 賦值: =, +=, -=, *=, /=
• 比較: ==, ===, !=, !==, <, >, <=, >=
• 邏輯運算: && (且), || (或), ! (非)

4. 條件判斷

if (condition) {
    // do something
} else if (anotherCondition) {
    // do something else
} else {
    // fallback
}

5. 迴圈

// for 迴圈
for (let i = 0; i < 10; i++) {
    console.log(i);
}

// while 迴圈
let i = 0;
while (i < 10) {
    console.log(i);
    i++;
}

6. 函數

// 定義函數
function greet(name) {
    return 'Hello, ' + name;
}

// 箭頭函數 (Arrow Function)
const greet = (name) => 'Hello, ' + name;

7. 陣列

let fruits = ['Apple', 'Banana', 'Cherry'];

// 訪問元素
console.log(fruits[0]); // 'Apple'

// 新增元素
fruits.push('Mango');

// 陣列長度
console.log(fruits.length); // 4

// 迭代陣列
fruits.forEach(function(fruit) {
    console.log(fruit);
});

8. 物件 (Object)

let person = {
    name: 'Alice',
    age: 25,
    isStudent: true
};

// 訪問屬性
console.log(person.name); // 'Alice'

// 修改屬性
person.age = 26;

9. DOM 操作

// 獲取元素
let element = document.getElementById('myElement');
let elements = document.querySelectorAll('.myClass');

// 修改內容
element.textContent = '新的內容';

// 新增事件監聽
element.addEventListener('click', function() {
    alert('元素被點擊了！');
});

10. 事件處理

document.getElementById('btn').addEventListener('click', function() {
    alert('Button clicked');
});

11. JSON

// 將物件轉換成 JSON 字串
let jsonString = JSON.stringify(person);

// 將 JSON 字串解析成物件
let jsonObject = JSON.parse(jsonString);

12. 錯誤處理

try {
    // 可能出錯的程式碼
    let result = riskyFunction();
} catch (error) {
    console.error(error);
} finally {
    // 無論如何都會執行
    console.log('Done');
}

13. 日期與時間

let now = new Date();
console.log(now); // 當前時間

14. 條件 (三元運算符)

let age = 20;
let canVote = (age >= 18) ? 'Yes' : 'No';

15. 陣列方法

let numbers = [1, 2, 3, 4, 5];

// Map
let doubled = numbers.map(n => n * 2);

// Filter
let evens = numbers.filter(n => n % 2 === 0);

// Reduce
let sum = numbers.reduce((acc, n) => acc + n, 0);

16. 模板字串

let name = 'Alice';
let greeting = `Hello, ${name}!`; // 使用反引號 ``

17. ES6 模組化 (import/export)

// 定義
export function greet() {
    console.log('Hello!');
}

// 使用
import { greet } from './greet.js';
greet();

這張 Cheat Sheet 涵蓋了 JavaScript 中最常用的語法和功能，適合快速查閱和參考。