1. 變量與數(shù)據(jù)類型

變量聲明

JavaScript 提供了三種方式來聲明變量：

• var（全局或函數(shù)作用域，不推薦）
• let（塊級作用域，推薦）
• const（常量，塊級作用域，推薦）

var a = 10;  // 可重新賦值，函數(shù)作用域
let b = 20;  // 可重新賦值，塊級作用域
const c = 30; // 不能重新賦值，塊級作用域

數(shù)據(jù)類型

• 基本數(shù)據(jù)類型（值類型）：
  • Number（數(shù)字）
  • String（字符串）
  • Boolean（布爾值）
  • Undefined（未定義）
  • Null（空值）
  • Symbol（獨特值）
  • BigInt（大整數(shù)）

let num = 42; // Number
let str = "Hello"; // String
let bool = true; // Boolean
let notDefined; // Undefined
let emptyValue = null; // Null
let uniqueKey = Symbol("key"); // Symbol
let bigIntNum = 9007199254740991n; // BigInt

• 引用數(shù)據(jù)類型：
  • Object（對象）
  • Array（數(shù)組）
  • Function（函數(shù)）

let obj = { name: "Alice", age: 25 };
let arr = [1, 2, 3, 4, 5];
let func = function() { return "Hello"; };

---

2. 運算符

JavaScript 提供了多種運算符：

• 算術(shù)運算符（+, -, *, /, %, ++, --）
• 賦值運算符（=, +=, -=, *=, /=）
• 比較運算符（==, ===, !=, !==, >, <, >=, <=）
• 邏輯運算符（&&, ||, !）
• 三元運算符（條件 ? 值1 : 值2）

let x = 10;
let y = 5;console.log(x + y);  // 15
console.log(x > y);  // true
console.log(x === "10"); // false（嚴(yán)格相等）
console.log(x == "10"); // true（類型轉(zhuǎn)換后相等）
console.log(x > 0 && y > 0); // true

---

3. 條件語句

let age = 18;if (age >= 18) {console.log("Adult");
} else if (age >= 13) {console.log("Teenager");
} else {console.log("Child");
}

switch 語句：

let fruit = "apple";switch (fruit) {case "apple":console.log("Apple selected");break;case "banana":console.log("Banana selected");break;default:console.log("Unknown fruit");
}

---

4. 循環(huán)

// for 循環(huán)
for (let i = 0; i < 5; i++) {console.log(i);
}// while 循環(huán)
let i = 0;
while (i < 5) {console.log(i);i++;
}// do-while 循環(huán)
let j = 0;
do {console.log(j);j++;
} while (j < 5);

---

5. 函數(shù)

// 普通函數(shù)
function add(a, b) {return a + b;
}// 箭頭函數(shù)
const multiply = (a, b) => a * b;console.log(add(2, 3)); // 5
console.log(multiply(2, 3)); // 6

---

6. 數(shù)組操作

let arr = [1, 2, 3, 4, 5];// 添加元素
arr.push(6);  // [1, 2, 3, 4, 5, 6]// 刪除最后一個元素
arr.pop();  // [1, 2, 3, 4, 5]// 遍歷數(shù)組
arr.forEach((num) => console.log(num));// 映射數(shù)組（每個元素乘以 2）
let newArr = arr.map(num => num * 2);
console.log(newArr); // [2, 4, 6, 8, 10]

---

7. 對象

let person = {name: "Alice",age: 25,greet: function() {console.log("Hello, " + this.name);}
};console.log(person.name); // Alice
person.greet(); // Hello, Alice

---

8. 作用域與閉包

function outer() {let count = 0;return function inner() {count++;console.log(count);};
}const counter = outer();
counter(); // 1
counter(); // 2

閉包 允許內(nèi)部函數(shù)訪問外部函數(shù)的變量，即使外部函數(shù)已經(jīng)執(zhí)行完畢。

---

9. 異步編程

Promise

function fetchData() {return new Promise((resolve) => {setTimeout(() => resolve("Data loaded"), 2000);});
}fetchData().then((data) => console.log(data)); // 2秒后輸出 "Data loaded"

async/await

async function getData() {let result = await fetchData();console.log(result);
}
getData();

---

10. ES6+ 語法

解構(gòu)賦值

let [a, b] = [1, 2];
console.log(a, b); // 1 2let { name, age } = { name: "Alice", age: 25 };
console.log(name, age); // Alice 25

展開運算符

let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5];
console.log(arr2); // [1, 2, 3, 4, 5]let obj1 = { a: 1, b: 2 };
let obj2 = { ...obj1, c: 3 };
console.log(obj2); // {a: 1, b: 2, c: 3}

---

11. DOM 操作

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

---

12. 模塊化

在現(xiàn)代 JavaScript 中，import 和 export 用于模塊化：

// 導(dǎo)出
export function greet() {return "Hello!";
}// 導(dǎo)入
import { greet } from "./module.js";
console.log(greet()); // Hello!

---

總結(jié)

概念	關(guān)鍵點
變量	var、let、const
數(shù)據(jù)類型	數(shù)值、字符串、對象、數(shù)組
運算符	+, -, *, /, ===, &&
條件語句	if-else, switch
循環(huán)	for, while, do-while
函數(shù)	普通函數(shù)、箭頭函數(shù)
數(shù)組	push(), pop(), map(), forEach()
對象	this 關(guān)鍵字、方法調(diào)用
作用域	塊級作用域、閉包
異步	Promise、async/await
ES6+	解構(gòu)、展開運算符
DOM 操作	document.getElementById