JavaScript

变量声明

let - 块级作用域，可以重新赋值


let name = "张三";
let age = 25;
age = 26; // 可以修改

const - 块级作用域，不能重新赋值


const PI = 3.14;
const city = "Paris";
// PI = 3.15; // 报错！

var - 函数作用域（旧语法，不推荐）


var oldStyle = "避免使用";

数据类型

基本类型


let str = "文本";           // 字符串
let num = 42;              // 数字
let bool = true;           // 布尔值 (true/false)
let empty = null;          // 空值
let notDefined;            // undefined

对象和数组


// 对象
let person = {
  name: "李四",
  age: 30,
  city: "上海"
};

// 数组
let colors = ["红", "绿", "蓝"];
let numbers = [1, 2, 3, 4, 5];

运算符

算术运算


let a = 10 + 5;   // 加法 = 15
let b = 10 - 5;   // 减法 = 5
let c = 10 * 5;   // 乘法 = 50
let d = 10 / 5;   // 除法 = 2
let e = 10 % 3;   // 取余 = 1

比较运算


5 == "5"    // true (值相等)
5 === "5"   // false (值和类型都要相等)
5 != "5"    // false
5 !== "5"   // true
5 > 3       // true
5 < 3       // false
5 >= 5      // true

逻辑运算


true && false   // 与 = false
true || false   // 或 = true
!true          // 非 = false

条件语句

if / else


if (age >= 18) {
  console.log("成年人");
} else if (age >= 13) {
  console.log("青少年");
} else {
  console.log("儿童");
}

三元运算符


let status = age >= 18 ? "成年" : "未成年";

switch


switch (day) {
  case 1:
    console.log("星期一");
    break;
  case 2:
    console.log("星期二");
    break;
  default:
    console.log("其他");
}

循环

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++;
}

遍历数组


let fruits = ["苹果", "香蕉", "橙子"];

// forEach
fruits.forEach(function(fruit) {
  console.log(fruit);
});

// for...of
for (let fruit of fruits) {
  console.log(fruit);
}

函数

函数声明


function greet(name) {
  return "你好, " + name;
}

let message = greet("Julien"); // "你好, Julien"

箭头函数（简洁写法）


const add = (a, b) => {
  return a + b;
};

// 更简洁（单行自动返回）
const multiply = (a, b) => a * b;

默认参数


function greet(name = "朋友") {
  return "你好, " + name;
}

greet();          // "你好, 朋友"
greet("李明");    // "你好, 李明"

字符串

拼接和模板字符串


// 传统拼接
let name = "Julien";
let msg = "你好, " + name + "!";

// 模板字符串（推荐）
let msg2 = `你好, ${name}!`;
let calc = `2 + 2 = ${2 + 2}`; // "2 + 2 = 4"

常用方法


let str = "Hello World";
str.length;              // 11
str.toLowerCase();       // "hello world"
str.toUpperCase();       // "HELLO WORLD"
str.includes("World");   // true
str.startsWith("Hello"); // true
str.split(" ");          // ["Hello", "World"]
str.slice(0, 5);         // "Hello"

数组

常用方法


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

// 添加/删除
arr.push(6);        // 末尾添加 [1,2,3,4,5,6]
arr.pop();          // 删除末尾 [1,2,3,4,5]
arr.unshift(0);     // 开头添加 [0,1,2,3,4,5]
arr.shift();        // 删除开头 [1,2,3,4,5]

// 查找
arr.indexOf(3);     // 2 (索引)
arr.includes(3);    // true

// 转换
arr.map(x => x * 2);        // [2,4,6,8,10]
arr.filter(x => x > 3);     // [4,5]
arr.reduce((sum, x) => sum + x, 0); // 15

// 其他
arr.length;         // 5
arr.join(", ");     // "1, 2, 3, 4, 5"

对象

访问和修改


let user = {
  name: "张三",
  age: 25,
  city: "北京"
};

// 访问属性
console.log(user.name);      // "张三"
console.log(user["age"]);    // 25

// 修改属性
user.age = 26;
user.email = "zhang@example.com"; // 添加新属性

// 删除属性
delete user.city;

对象方法


let person = {
  name: "李四",
  greet: function() {
    return "你好, 我是 " + this.name;
  },
  // ES6 简写
  bye() {
    return "再见!";
  }
};

person.greet(); // "你好, 我是 李四"

DOM 操作（网页交互）

选择元素


// 通过 ID
let element = document.getElementById("myId");

// 通过 class
let elements = document.getElementsByClassName("myClass");

// 通过选择器（推荐）
let item = document.querySelector(".myClass");
let items = document.querySelectorAll("div.item");

修改内容


element.textContent = "新文本";
element.innerHTML = "<strong>加粗文本</strong>";
element.style.color = "red";
element.classList.add("active");

事件监听


let button = document.querySelector("#myButton");

button.addEventListener("click", function() {
  alert("按钮被点击了!");
});

常用技巧

控制台输出


console.log("调试信息");      // 普通输出
console.error("错误信息");    // 错误输出
console.table([1, 2, 3]);   // 表格形式

类型转换


// 转数字
Number("123");     // 123
parseInt("123");   // 123
+"123";            // 123

// 转字符串
String(123);       // "123"
123.toString();    // "123"

// 转布尔
Boolean(1);        // true
Boolean(0);        // false
Boolean("");       // false

解构赋值


// 数组解构
let [a, b, c] = [1, 2, 3];

// 对象解构
let {name, age} = {name: "王五", age: 28};

展开运算符


let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5]; // [1,2,3,4,5]

let obj1 = {a: 1, b: 2};
let obj2 = {...obj1, c: 3}; // {a:1, b:2, c:3}

💡

学习建议

打开浏览器的开发者工具（F12），在 Console 里实验这些代码

从变量、函数、条件、循环开始练习

多写多练，不要只看不做

遇到问题善用 console.log() 调试