JavaScript 全面教程：从基础到高级实践

JavaScript 全面教程：从基础到高级实践

---

---

2. JavaScript 基础语法

2.1 变量与数据类型

2.1.1 变量声明

// ES5: var（函数作用域，易污染全局）
var x = 10;

// ES6: let 和 const（块级作用域）
let y = 20;
const PI = 3.1415;

2.1.2 数据类型

类型	说明	示例
原始类型	不可变类型	number, string, boolean, null, undefined, symbol
引用类型	可变类型（对象）	object, array, function

---

2.2 条件语句与循环

2.2.1 条件语句

let age = 18;
if (age >= 18) {
  console.log("成年人");
} else {
  console.log("未成年人");
}

2.2.2 循环

// for 循环
for (let i = 0; i < 5; i++) {
  console.log(i);
}

// while 循环
let count = 0;
while (count < 3) {
  console.log(count++);
}

---

2.3 函数

2.3.1 函数定义

// ES5 函数
function add(a, b) {
  return a + b;
}

// ES6 箭头函数
const multiply = (a, b) => a * b;

2.3.2 参数默认值

function greet(name = "Guest") {
  return `Hello, ${name}!`;
}
console.log(greet()); // 输出 "Hello, Guest!"

---

3. 对象与数组

3.1 对象

const person = {
  name: "Alice",
  age: 25,
  sayHello() {
    return `Hello, my name is ${this.name}`;
  }
};
console.log(person.sayHello()); // 输出 "Hello, my name is Alice"

3.2 数组

const fruits = ["Apple", "Banana", "Orange"];
fruits.push("Grape"); // 添加元素
console.log(fruits[3]); // 输出 "Grape"

---

4. 高级特性与最佳实践

4.1 作用域与闭包

4.1.1 闭包示例

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

4.2 事件循环（Event Loop）

console.log("Start");

setTimeout(() => console.log("Timeout"), 0);
Promise.resolve().then(() => console.log("Promise"));
console.log("Sync");

// 输出顺序：Start → Sync → Promise → Timeout

---

4.3 ES6+ 新特性

4.3.1 解构赋值

const { name, age } = person;
console.log(name); // "Alice"

4.3.2 模板字符串

const message = `姓名：${name}, 年龄：${age}`;
console.log(message); // "姓名：Alice, 年龄：25"

---

4.4 异步编程

4.4.1 Promise

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve("Data"), 1000);
  });
};

fetchData()
  .then((data) => console.log(data)) // 输出 "Data"
  .catch((err) => console.error(err));

4.4.2 async/await

async function fetchDataAsync() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (err) {
    console.error(err);
  }
}
fetchDataAsync();

---