JavaScript 基础语法

基础部分

1. JavaScript 简介

JavaScript（简称 JS）是一种轻量级、解释型、基于原型的脚本语言，主要用于网页开发，但也可用于服务器端（Node.js）和移动端（React Native）。

• 特点：
  • 跨平台（浏览器、服务器、桌面应用）。
  • 动态类型（变量类型在运行时确定）。
  • 单线程但支持异步（通过事件循环机制）。
  • 基于原型继承（而非传统的类继承）。

2. 变量与数据类型

(1) 变量声明

• var（旧标准，存在变量提升）

  var name = "John";

• let（ES6+，块级作用域）

  let age = 25;

• const（ES6+，不可重新赋值）

  const PI = 3.14;

(2) 数据类型

JavaScript 有 7 种基本数据类型 和 1 种引用类型：

• 基本类型（Primitive Types）：
  • number（数字）：42, 3.14, NaN（非数字）
  • string（字符串）："hello", 'world'
  • boolean（布尔值）：true, false
  • undefined（未定义）：变量声明但未赋值
  • null（空值）：表示空对象指针
  • symbol（ES6，唯一标识符）：Symbol('id')
  • bigint（大整数）：123n
• 引用类型（Object）：
  • object（对象）：{ name: "John" }
  • array（数组）：[1, 2, 3]
  • function（函数）：function() {}

(3) 类型检测

• typeof：返回数据类型（"string", "number", "boolean", "object" 等）

  typeof 42; // "number"
  typeof []; // "object"（数组也是对象）

• instanceof：检测对象是否属于某个类

  [] instanceof Array; // true

---

3. 运算符与表达式

(1) 算术运算符

运算符	描述	示例
+	加法	3 + 2 → 5
-	减法	5 - 2 → 3
*	乘法	2 * 3 → 6
/	除法	6 / 2 → 3
%	取余	5 % 2 → 1
**	幂运算	2 ** 3 → 8

(2) 比较运算符

运算符	描述	示例
==	松散相等（自动类型转换）	"5" == 5 → true
===	严格相等（类型+值）	"5" === 5 → false
!=	不相等	5 != "5" → false
!==	严格不相等	5 !== "5" → true
>	大于	10 > 5 → true
<	小于	3 < 2 → false

(3) 逻辑运算符

运算符	描述	示例
&&	逻辑与	true && false → false
`		`	逻辑或	`true		false→true`
!	逻辑非	!true → false

(4) 三目运算符

let age = 18;
let canVote = age >= 18 ? "Yes" : "No"; // "Yes"

---

4. 流程控制

(1) if-else 条件判断

if (age >= 18) {
  console.log("Adult");
} else {
  console.log("Minor");
}

(2) switch-case 多条件

switch (day) {
  case "Monday":
    console.log("Work day");
    break;
  case "Saturday":
    console.log("Weekend");
    break;
  default:
    console.log("Unknown day");
}

(3) 循环结构

• for 循环

  for (let i = 0; i < 5; i++) {
    console.log(i); // 0, 1, 2, 3, 4
  }

• while 循环

  let i = 0;
  while (i < 5) {
    console.log(i);
    i++;
  }

• do-while 循环

  let i = 0;
  do {
    console.log(i);
    i++;
  } while (i < 5);

---

5. 函数

(1) 函数定义

function greet(name) {
  return "Hello, " + name;
}
console.log(greet("John")); // "Hello, John"

(2) 箭头函数（ES6）

const greet = (name) => `Hello, ${name}`;

(3) 默认参数

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

6. DOM 操作

// 获取元素
const btn = document.getElementById("myButton");
// 修改内容
btn.innerHTML = "Click Me";
// 绑定事件
btn.addEventListener("click", () => {
  alert("Button clicked!");
});

7. 数组操作

const arr = [1, 2, 3];
arr.push(4); // [1, 2, 3, 4]
arr.pop();   // [1, 2, 3]
arr.map(x => x * 2); // [2, 4, 6]

8. 异步编程

// Promise
fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

// async/await
async function fetchData() {
  try {
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

9. 面向对象编程

class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    return `Hello, ${this.name}`;
  }
}
const john = new Person("John");
console.log(john.greet()); // "Hello, John"

10. 模块化（ES6 Modules）

// math.js
export const add = (a, b) => a + b;

// main.js
import { add } from "./math.js";
console.log(add(2, 3)); // 5