前置知识: HTML5、CSS

JavaScript 语法速查

1 minBeginner
javascriptcheatsheet

常用 JavaScript 语法速查表，含使用场景、常见错误，支持搜索和复制

学习指引

前置知识

  • 了解编程的基本概念
  • 了解 HTML 和 CSS 基础

推荐学习顺序

  1. 先学习【基础语法】分组，掌握变量、函数和数组方法
  2. 再学习【DOM 操作】分组，掌握页面元素操作与事件处理
▼

基础语法

JavaScript 编程的核心基础。本组内容涵盖变量声明、函数定义、条件判断、循环和数组方法，是编写任何 JS 程序的前提。

变量声明

const name = "张三";
let age = 25;
age = 26; // let 可重新赋值
// name = "李四"; // TypeError: Assignment to constant variable
输出: name 为 '张三'，age 为 26
场景: const 声明常量（不可重新赋值），let 声明变量（可重新赋值）。现代 JavaScript 中优先使用 const，只在需要重新赋值时使用 let，避免使用 var。

常见错误

  • 错误: const list = [1, 2, 3]; list = [4, 5, 6]; -- 解决: const 禁止重新赋值，但允许修改内容：list.push(4) 或 list[0] = 4
  • 错误: console.log(x); let x = 10; -- 解决: let/const 存在暂时性死区（TDZ），必须先声明后使用
进阶: var 存在变量提升和函数作用域问题，let/const 是块级作用域。const 声明的对象和数组仍可修改内部属性，如需完全冻结可使用 Object.freeze()。

函数定义

// 函数声明
function greet(name) {
  return `你好, ${name}!`;
}

// 箭头函数
const add = (a, b) => a + b;

// 默认参数
function createUser(name, role = "用户") {
  return { name, role };
}
输出: greet('张三') 返回 '你好, 张三!'，add(1, 2) 返回 3
场景: 函数是 JavaScript 中的核心构建块。函数声明有提升特性，箭头函数更简洁且不绑定 this，默认参数简化了参数处理。

常见错误

  • 错误: const obj = { name: '张三', greet: () => { return `你好, ${this.name}`; } }; -- 解决: 对象方法使用普通函数：greet() { return `你好, ${this.name}`; }
  • 错误: function sum(a, b,) {}（尾随逗号在某些旧环境报错） -- 解决: 现代 JavaScript 支持参数尾随逗号，但旧环境可能不支持
进阶: 箭头函数适合回调函数和简短逻辑，不适合作为对象方法和构造函数。剩余参数 ...args 可收集多余参数。

条件判断

const score = 85;

if (score >= 90) {
  console.log("优秀");
} else if (score >= 60) {
  console.log("及格");
} else {
  console.log("不及格");
}

// 三元运算符
const result = score >= 60 ? "通过" : "未通过";
输出: 及格 result 为 '通过'
场景: 根据条件执行不同逻辑。if-else 适合多条件分支，三元运算符适合简单的条件赋值。注意 JavaScript 的 falsy 值：0, '', null, undefined, NaN, false。

常见错误

  • 错误: if (score = 85) { ... } -- 解决: 比较使用 ===：if (score === 85)，避免误用 = 赋值
  • 错误: if (value === null) { ... }（期望同时判断 null 和 undefined） -- 解决: 使用 value == null 可同时判断 null 和 undefined（宽松等于）
进阶: 推荐使用 === 严格等于而非 == 宽松等于，避免隐式类型转换带来的意外行为。可选链 ?. 和空值合并 ?? 可简化条件判断。

循环

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

// for...of 遍历数组
const fruits = ["苹果", "香蕉", "橙子"];
for (const fruit of fruits) {
  console.log(fruit);
}

// for...in 遍历对象键
const user = { name: "张三", age: 25 };
for (const key in user) {
  console.log(`${key}: ${user[key]}`);
}
输出: 0 1 2 3 4 苹果 香蕉 橙子 name: 张三 age: 25
场景: for 循环用于指定次数的迭代，for...of 用于遍历可迭代对象（数组、字符串等），for...in 用于遍历对象的可枚举属性。

常见错误

  • 错误: for (const key in array) { ... }（对数组使用 for...in） -- 解决: 遍历数组使用 for...of，遍历对象使用 for...in
  • 错误: for (var i = 0; i < 3; i++) { setTimeout(() => console.log(i), 100); } -- 解决: 使用 let 声明循环变量：for (let i = 0; ...)，let 的块级作用域确保每次迭代有独立的 i
进阶: forEach、map、filter 等数组方法通常比 for 循环更简洁，但 forEach 无法使用 break/continue。

数组方法

const nums = [1, 2, 3, 4, 5];

// map - 映射新数组
const doubled = nums.map(n => n * 2);

// filter - 过滤
const evens = nums.filter(n => n % 2 === 0);

// reduce - 累积
const sum = nums.reduce((acc, n) => acc + n, 0);

// find - 查找第一个匹配
const found = nums.find(n => n > 3);

// some/every - 判断
const hasEven = nums.some(n => n % 2 === 0);
输出: doubled: [2, 4, 6, 8, 10] evens: [2, 4] sum: 15 found: 4 hasEven: true
场景: 数组方法是 JavaScript 函数式编程的核心。map 映射、filter 过滤、reduce 累积是最常用的三个方法，配合箭头函数可简洁地处理数据。

常见错误

  • 错误: const result = nums.forEach(n => n * 2);（期望返回新数组） -- 解决: 需要返回新数组使用 map：const result = nums.map(n => n * 2)
  • 错误: nums.map(n => { n * 2 });（箭头函数使用花括号但无 return） -- 解决: 去掉花括号：n => n * 2，或添加 return：n => { return n * 2; }
进阶: 链式调用可组合多个操作：nums.filter(n => n > 2).map(n => n * 2)。flat() 和 flatMap() 可处理嵌套数组。
▼

DOM 操作

JavaScript 与网页交互的核心。本组内容涵盖元素查询、创建、事件绑定和样式操作，是前端开发的基本功。

查询元素

// 查询单个元素
const btn = document.querySelector('.submit-btn');
const title = document.querySelector('#page-title');

// 查询多个元素
const items = document.querySelectorAll('.list-item');
items.forEach(item => console.log(item.textContent));
输出: btn 为匹配的第一个 .submit-btn 元素，items 为所有匹配元素的 NodeList
场景: 从 DOM 中查找元素。querySelector 返回第一个匹配元素，querySelectorAll 返回所有匹配元素的 NodeList。支持 CSS 选择器语法。

常见错误

  • 错误: const items = document.querySelectorAll('.item'); items.map(item => ...); -- 解决: querySelectorAll 返回 NodeList 而非数组，使用 forEach 或先转换：[...items].map(...)
  • 错误: const el = document.querySelector('.nonexistent'); el.textContent = 'hello'; -- 解决: 查询结果可能为 null，操作前应判断：if (el) { el.textContent = 'hello'; }
进阶: closest() 方法可向上查找最近的匹配祖先元素：btn.closest('.form-container')。matches() 可判断元素是否匹配选择器。

创建与插入元素

// 创建元素
const li = document.createElement('li');
li.textContent = '新项目';
li.setAttribute('class', 'list-item');

// 插入到页面
const list = document.querySelector('.list');
list.appendChild(li);

// 在指定位置插入
list.insertBefore(li, list.firstChild);
输出: 页面中新增一个 li 元素，内容为 '新项目'
场景: 动态创建 DOM 元素并插入到页面中。createElement 创建新元素，appendChild 追加到末尾，insertBefore 在指定节点前插入。

常见错误

  • 错误: const el = document.createElement('div'); document.body.appendChild(el); document.body.appendChild(el); -- 解决: 如需多处插入，使用 cloneNode(true) 创建副本：el.cloneNode(true)
  • 错误: document.querySelector('.container').innerHTML += '<p>新内容</p>'; -- 解决: 使用 createElement + appendChild 代替 innerHTML 拼接，避免破坏已有 DOM
进阶: insertAdjacentHTML/insertAdjacentElement 可在元素的指定位置插入内容：beforebegin、afterbegin、beforeend、afterend。

事件监听

const btn = document.querySelector('.btn');

function handleClick(event) {
  console.log('按钮被点击', event.target);
}

btn.addEventListener('click', handleClick);

// 移除事件监听
btn.removeEventListener('click', handleClick);
输出: 点击按钮时输出 '按钮被点击' 和被点击的元素
场景: 为元素添加事件监听器。addEventListener 比 onclick 属性更灵活，支持同一事件绑定多个处理函数，且可控制冒泡和捕获阶段。

常见错误

  • 错误: btn.addEventListener('click', () => { ... }); btn.removeEventListener('click', () => { ... }); -- 解决: 使用具名函数引用：function handler() { ... }; addEventListener('click', handler); removeEventListener('click', handler)
  • 错误: btn.addEventListener('click', handler); // 元素被移除后未清理事件监听 -- 解决: 元素移除前调用 removeEventListener 清理，或使用 AbortController 统一管理
进阶: 事件委托：将监听器绑定到父元素，通过 event.target 判断实际触发的子元素，减少监听器数量，适合动态列表。

classList 样式操作

const el = document.querySelector('.box');

// 添加类名
el.classList.add('active');

// 移除类名
el.classList.remove('hidden');

// 切换类名
el.classList.toggle('dark-mode');

// 判断是否包含类名
if (el.classList.contains('active')) {
  console.log('元素处于激活状态');
}
输出: 元素的类名被动态添加、移除或切换
场景: 操作元素的 CSS 类名。classList 提供了 add、remove、toggle、contains 等方法，比直接操作 className 字符串更方便和安全。

常见错误

  • 错误: el.className = 'active'; -- 解决: 使用 classList.add('active') 添加类名，不会影响其他已有类名
  • 错误: el.classList.toggle('active', false);（不理解第二个参数） -- 解决: toggle 的第二个参数是布尔值：true 添加，false 移除，不传则切换
进阶: classList.add/remove 支持同时操作多个类名：el.classList.add('a', 'b', 'c')。replace('old', 'new') 可替换类名。