JavaScript Cheat Sheet
JavaScript Cheat Sheet
1. 變數與常量
let name = 'Alice'; // 可以改變 const age = 25; // 常量,不可改變 var isStudent = true; // 全域變數
2. 資料型別
String
:'Hello'
Number
:42
Boolean
:true
orfalse
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 中最常用的語法和功能,適合快速查閱和參考。