JavaScript 关键字全解析（定义 + 语法 + 示例）

一、核心语法关键字

1. 变量/常量声明

• var
  定义：ES5变量声明关键字，函数级作用域，支持变量提升、重复声明/赋值。
  语法格式：var 变量名 [= 初始值];
  示例：

  var name = "张三"; // 声明并赋值
  var age; // 仅声明
  var name = "李四"; // 重复声明（无报错）
  

• let
  定义：ES6变量声明关键字，块级作用域，无变量提升，不可重复声明，可赋值。
  语法格式：let 变量名 [= 初始值];
  示例：

  let score = 90; // 声明并赋值
  let flag; // 仅声明
  // let score = 80; // 重复声明（报错）
  if (true) {
    let num = 10; // 块级作用域，外部不可访问
  }
  

• const
  定义：ES6常量声明关键字，块级作用域，无变量提升，不可重复声明/修改指向（引用类型内部可改）。
  语法格式：const 常量名 = 初始值;
  示例：

  const PI = 3.1415; // 声明常量
  // const PI = 3.14; // 重复赋值（报错）
  const obj = { name: "张三" };
  obj.name = "李四"; // 引用类型内部属性可改
  

2. 函数/类相关

• function
  定义：声明普通函数的核心关键字，支持命名/匿名函数，有函数提升特性。
  语法格式：function 函数名(参数1, 参数2) { 函数体 [return 返回值]; }
  示例：

  // 命名函数
  function sum(a, b) {
    return a + b;
  }
  // 匿名函数
  const fn = function (x) {
    return x * 2;
  };
  

• return
  定义：函数内返回值并终止执行，无return默认返回undefined。
  语法格式：return [值];
  示例：

  function getAge() {
    return 18; // 返回值
  }
  function emptyFn() {
    return; // 等价于return undefined
  }
  

• class
  定义：ES6类声明关键字，JS面向对象语法糖（底层基于原型）。
  语法格式：class 类名 { constructor(参数) { 初始化逻辑 } 方法名() { 方法体 } }
  示例：

  class Person {
    constructor(name) {
      this.name = name; // 初始化实例属性
    }
    say() {
      console.log(`我是${this.name}`); // 类方法
    }
  }
  

• extends
  定义：类继承关键字，让子类继承父类属性/方法。
  语法格式：class 子类名 extends 父类名 { constructor(参数) { super(参数); 子类初始化 } }
  示例：

  class Student extends Person {
    constructor(name, grade) {
      super(name); // 调用父类构造器
      this.grade = grade;
    }
  }
  

• super
  定义：子类内调用父类构造器/方法的关键字，子类构造器必须先调用super()。
  语法格式：super([参数]); // 调用父类构造器 / super.方法名([参数]); // 调用父类方法
  示例：

  class Student extends Person {
    constructor(name) {
      super(name); // 初始化父类属性
    }
    say() {
      super.say(); // 调用父类say方法
      console.log("我是学生");
    }
  }
  

• constructor
  定义：类的构造函数，创建实例时自动执行，用于初始化属性。
  语法格式：constructor(参数1, 参数2) { this.属性 = 参数; }
  示例：

  class Car {
    constructor(brand, price) {
      this.brand = brand;
      this.price = price;
    }
  }
  const car = new Car("宝马", 300000);
  

• async
  定义：声明异步函数，返回值为Promise对象，可配合await使用。
  语法格式：async function 函数名(参数) { 函数体; }
  示例：

  async function getData() {
    return await fetch("/api/data"); // 异步请求
  }
  

• await
  定义：等待Promise完成，仅在async函数内使用，暂停执行直到Promise返回结果。
  语法格式：await Promise对象;
  示例：

  async function getInfo() {
    const res = await fetch("/api/user"); // 等待请求结果
    const data = await res.json(); // 等待解析JSON
    console.log(data);
  }
  

• function*
  定义：声明生成器函数，返回迭代器，可通过yield暂停/恢复执行。
  语法格式：function* 生成器名(参数) { yield 值; }
  示例：

  function* gen() {
    yield 1;
    yield 2;
    yield 3;
  }
  const iterator = gen();
  console.log(iterator.next().value); // 1
  

• yield
  定义：生成器内暂停执行并返回值，调用next()可恢复执行。
  语法格式：yield 值;
  示例：

  function* count() {
    let i = 0;
    while (true) {
      yield i++; // 每次next()返回递增的i
    }
  }
  const c = count();
  console.log(c.next().value); // 0
  console.log(c.next().value); // 1
  

• 箭头函数(=>)
  定义：ES6函数简写，无自有this/arguments，不可作为构造函数。
  语法格式：(参数) => { 函数体 } / 参数 => 返回值（单参数/单返回值简写）
  示例：

  const add = (a, b) => a + b; // 简写版
  const fn = () => {
    console.log(this); // 继承外层this
  };
  

3. 流程控制

• if
  定义：单条件判断，条件为true执行代码块。
  语法格式：if (条件) { 代码块; }
  示例：

  const age = 20;
  if (age > 18) {
    console.log("成年");
  }
  

• else
  定义：if的补充分支，条件为false时执行。
  语法格式：if (条件) { 代码块1; } else { 代码块2; }
  示例：

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

• else if
  定义：多条件分支，在if和else之间增加判断。
  语法格式：if (条件1) { 代码块1; } else if (条件2) { 代码块2; } [else { 代码块3; }]
  示例：

  const score = 85;
  if (score >= 90) {
    console.log("优秀");
  } else if (score >= 80) {
    console.log("良好");
  } else {
    console.log("及格");
  }
  

• for
  定义：计数循环，适合已知循环次数的场景。
  语法格式：for (初始化; 循环条件; 更新操作) { 循环体; }
  示例：

  // 遍历数组
  const arr = [1, 2, 3];
  for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
  }
  

• while
  定义：条件循环，先判断条件再执行，条件为true持续循环。
  语法格式：while (条件) { 循环体; }
  示例：

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

• do
  定义：与while配合，先执行循环体再判断条件，至少执行一次。
  语法格式：do { 循环体; } while (条件);
  示例：

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

• break
  定义：终止循环/switch，立即跳出当前代码块。
  语法格式：break;
  示例：

  // 终止循环
  for (let i = 0; i < 5; i++) {
    if (i === 3) break; // i=3时终止循环
    console.log(i);
  }
  // 终止switch
  switch (1) {
    case 1:
      console.log("1");
      break; // 跳出switch
    case 2:
      console.log("2");
  }
  

• continue
  定义：跳过当前循环，仅跳过本次，后续循环继续。
  语法格式：continue;
  示例：

  for (let i = 0; i < 5; i++) {
    if (i % 2 === 0) continue; // 跳过偶数
    console.log(i); // 输出1,3
  }
  

• switch
  定义：多分支值匹配，比多层if-else简洁。
  语法格式：switch (值) { case 匹配值1: 代码块1; break; case 匹配值2: 代码块2; break; default: 默认代码块; }
  示例：

  const status = 200;
  switch (status) {
    case 200:
      console.log("成功");
      break;
    case 404:
      console.log("未找到");
      break;
    default:
      console.log("未知错误");
  }
  

• case
  定义：switch内的分支匹配，匹配指定值执行代码。
  语法格式：case 匹配值: 代码块; [break;]
  示例：

  switch ("apple") {
    case "apple":
      console.log("苹果");
      break;
    case "banana":
      console.log("香蕉");
  }
  

• default
  定义：switch内默认分支，无匹配case时执行。
  语法格式：default: 代码块;
  示例：

  switch ("orange") {
    case "apple":
      console.log("苹果");
      break;
    default:
      console.log("未知水果");
  }
  

• 三元运算符(?😃
  定义：简写if-else，条件为真返回真值，否则返回假值。
  语法格式：条件 ? 真值 : 假值;
  示例：

  const age = 18;
  const res = age >= 18 ? "成年" : "未成年";
  console.log(res); // 成年
  

4. 异常处理

• try
  定义：包裹可能抛出异常的代码，配合catch/finally使用。
  语法格式：try { 风险代码; } catch (e) { 异常处理; } finally { 最终代码; }
  示例：

  try {
    const obj = null;
    console.log(obj.name); // 触发异常
  } catch (e) {
    console.log(e.message); // 输出错误信息
  } finally {
    console.log("必执行");
  }
  

• catch
  定义：捕获try的异常，接收异常对象并处理。
  语法格式：catch (异常变量) { 异常处理逻辑; }
  示例：

  try {
    JSON.parse("{a:1}"); // 无效JSON，抛异常
  } catch (err) {
    console.log("解析失败：", err.message);
  }
  

• finally
  定义：异常处理最终块，无论是否抛异常都执行。
  语法格式：finally { 代码块; }
  示例：

  try {
    console.log("执行代码");
  } catch (e) {
    console.log("处理异常");
  } finally {
    console.log("释放资源"); // 始终执行
  }
  

• throw
  定义：主动抛出异常，可抛任意类型（推荐Error对象）。
  语法格式：throw 异常值;
  示例：

  function checkParam(val) {
    if (!val) {
      throw new Error("参数不能为空"); // 抛自定义异常
    }
  }
  try {
    checkParam("");
  } catch (e) {
    console.log(e.message);
  }
  

5. 模块相关

• import
  定义：ES6模块导入，从其他文件加载变量/函数/类。
  语法格式：import { 成员1, 成员2 } from "模块路径"; / import 别名 from "模块路径";
  示例：

  // 命名导入
  import { sum, PI } from "./math.js";
  // 默认导入
  import utils from "./utils.js";
  

• export
  定义：ES6模块命名导出，向外暴露多个成员。
  语法格式：export const 变量 = 值; / export function 函数名() {}; / export { 成员1, 成员2 };
  示例：

  // 直接导出
  export const PI = 3.14;
  export function sum(a, b) {
    return a + b;
  }
  // 批量导出
  const name = "工具库";
  export { name };
  

• export default
  定义：ES6模块默认导出，一个文件仅一个默认导出。
  语法格式：export default 变量/函数/类;
  示例：

  // 默认导出函数
  export default function () {
    console.log("默认导出");
  }
  // 默认导出对象
  export default { name: "张三" };
  

• from
  定义：import配套关键字，指定模块路径。
  语法格式：import ... from "模块路径";
  示例：

  import { add } from "./math.js"; // 从math.js导入add
  

• as
  定义：导入/导出别名，避免命名冲突。
  语法格式：import { 成员 as 别名 } from "路径"; / export { 成员 as 别名 };
  示例：

  // 导入别名
  import { sum as add } from "./math.js";
  // 导出别名
  export { PI as PI_VALUE };
  

6. 基础操作/类型检测

• new
  定义：实例化构造函数/类，创建对象实例。
  语法格式：new 构造函数(参数);
  示例：

  // 内置构造函数
  const arr = new Array(1, 2, 3);
  // 自定义类
  class Person {}
  const p = new Person();
  

• this
  定义：上下文对象，指向当前执行环境的对象（不同场景指向不同）。
  语法格式：this.属性/方法;
  示例：

  // 类中this指向实例
  class Car {
    constructor(brand) {
      this.brand = brand; // this=Car实例
    }
  }
  // 普通函数this指向调用者
  const obj = {
    name: "张三",
    say() {
      console.log(this.name); // this=obj
    },
  };
  

• typeof
  定义：检测值的类型，返回字符串（"string"/"number"等）。
  语法格式：typeof 值;
  示例：

  console.log(typeof "abc"); // "string"
  console.log(typeof 123); // "number"
  console.log(typeof null); // "object"（历史bug）
  

• instanceof
  定义：检测实例是否属于某个构造函数（基于原型链）。
  语法格式：实例 instanceof 构造函数;
  示例：

  const arr = [];
  console.log(arr instanceof Array); // true
  console.log(arr instanceof Object); // true（数组继承自Object）
  

• delete
  定义：删除对象属性/数组元素，删除后属性为undefined。
  语法格式：delete 对象.属性; / delete 数组[索引];
  示例：

  const obj = { name: "张三", age: 18 };
  delete obj.age; // 删除age属性
  console.log(obj); // { name: "张三" }
  
  const arr = [1, 2, 3];
  delete arr[1]; // 删除索引1的元素
  console.log(arr); // [1, empty, 3]
  

• in
  定义：检测对象是否有指定属性/数组是否有指定索引。
  语法格式："属性名" in 对象; / 索引 in 数组;
  示例：

  const obj = { name: "张三" };
  console.log("name" in obj); // true
  console.log("age" in obj); // false
  
  const arr = [1, 2];
  console.log(1 in arr); // true（索引1存在）
  

• void
  定义：执行表达式但返回undefined。
  语法格式：void(表达式); / void 表达式;
  示例：

  const res = void (console.log("测试"));
  console.log(res); // undefined
  

• debugger
  定义：调试断点，执行到此处暂停代码（浏览器/编辑器调试）。
  语法格式：debugger;
  示例：

  function fn() {
    debugger; // 执行到此处暂停
    console.log("调试代码");
  }
  fn();
  

• with
  定义：扩展作用域链，可直接访问对象属性（不推荐使用）。
  语法格式：with (对象) { 访问属性的代码; }
  示例：

  const obj = { a: 1, b: 2 };
  with (obj) {
    console.log(a + b); // 直接访问a、b，等价于obj.a + obj.b
  }
  

• eval
  定义：执行字符串形式的JS代码，有安全/性能风险。
  语法格式：eval(字符串代码);
  示例：

  const code = 'let a=1; let b=2; console.log(a+b);';
  eval(code); // 执行代码，输出3
  

7. 基础值

• null
  定义：表示空引用的原始值，类型为object。
  语法格式：let 变量 = null;
  示例：

  const obj = null; // 初始化空对象引用
  console.log(obj === null); // true
  

• undefined
  定义：表示未定义的原始值，变量声明未赋值/函数无返回值时默认值。
  语法格式：let 变量; / 函数无return;
  示例：

  let a;
  console.log(a); // undefined
  function fn() {}
  console.log(fn()); // undefined
  

• true
  定义：布尔类型的"真"值。
  语法格式：let 变量 = true;
  示例：

  const flag = true;
  if (flag) {
    console.log("条件成立");
  }
  

• false
  定义：布尔类型的"假"值。
  语法格式：let 变量 = false;
  示例：

  const flag = false;
  if (!flag) {
    console.log("条件不成立");
  }
  

• NaN
  定义：非数值（Not a Number），属于number类型，与自身不相等。
  语法格式：let 变量 = NaN; / 数值转换失败返回NaN;
  示例：

  const num = Number("abc"); // NaN
  console.log(num === NaN); // false
  console.log(isNaN(num)); // true
  

• Infinity
  定义：正无穷大数值，超出JS数值范围时返回。
  语法格式：let 变量 = Infinity; / 1/0 = Infinity;
  示例：

  const max = 1 / 0;
  console.log(max); // Infinity
  console.log(max > 1000000); // true
  

• -Infinity
  定义：负无穷大数值。
  语法格式：let 变量 = -Infinity; / -1/0 = -Infinity;
  示例：

  const min = -1 / 0;
  console.log(min); // -Infinity
  console.log(min < -1000000); // true
  

• arguments
  定义：普通函数内的伪数组，包含所有调用参数。
  语法格式：arguments[索引]; / arguments.length;
  示例：

  function sum() {
    let total = 0;
    for (let i = 0; i < arguments.length; i++) {
      total += arguments[i]; // 遍历所有参数求和
    }
    return total;
  }
  console.log(sum(1, 2, 3)); // 6
  

二、运算符/逻辑关键字

1. 赋值运算符

• =
  定义：基础赋值，右侧值赋给左侧变量。
  语法格式：变量 = 值;
  示例：

  let a = 10;
  const obj = { name: "张三" };
  

• +=
  定义：加赋值，等价于变量 = 变量 + 值（支持数字/字符串）。
  语法格式：变量 += 值;
  示例：

  let a = 1;
  a += 2; // a = 1 + 2 = 3
  let str = "hello";
  str += " world"; // str = "hello world"
  

• -=
  定义：减赋值，等价于变量 = 变量 - 值。
  语法格式：变量 -= 值;
  示例：

  let a = 5;
  a -= 2; // a = 5 - 2 = 3
  

• *=
  定义：乘赋值，等价于变量 = 变量 * 值。
  语法格式：变量 *= 值;
  示例：

  let a = 2;
  a *= 3; // a = 2 * 3 = 6
  

• /=
  定义：除赋值，等价于变量 = 变量 / 值。
  语法格式：变量 /= 值;
  示例：

  let a = 10;
  a /= 2; // a = 10 / 2 = 5
  

• %=
  定义：模赋值，等价于变量 = 变量 % 值。
  语法格式：变量 %= 值;
  示例：

  let a = 10;
  a %= 3; // a = 10 % 3 = 1
  

• ??=
  定义：空值合并赋值，仅当变量为null/undefined时赋值。
  语法格式：变量 ??= 值;
  示例：

  let a = null;
  a ??= "默认值"; // a = "默认值"
  let b = 0;
  b ??= 10; // b = 0（非null/undefined，不赋值）
  

• &&=
  定义：逻辑与赋值，变量为真时赋值。
  语法格式：变量 &&= 值;
  示例：

  let a = true;
  a &&= 10; // a = 10（a为真，赋值）
  let b = false;
  b &&= 20; // b = false（a为假，不赋值）
  

• ||=
  定义：逻辑或赋值，变量为假时赋值。
  语法格式：变量 ||= 值;
  示例：

  let a = 0;
  a ||= 10; // a = 10（a为假，赋值）
  let b = 20;
  b ||= 30; // b = 20（a为真，不赋值）
  

2. 比较运算符

• ==
  定义：松散相等，自动转换类型后比较值。
  语法格式：值1 == 值2;
  示例：

  console.log(10 == "10"); // true（类型转换）
  console.log(null == undefined); // true
  

• ===
  定义：严格相等，值和类型都相等才返回true（推荐使用）。
  语法格式：值1 === 值2;
  示例：

  console.log(10 === "10"); // false（类型不同）
  console.log(10 === 10); // true
  

• !=
  定义：松散不等，自动转换类型后比较值是否不等。
  语法格式：值1 != 值2;
  示例：

  console.log(10 != "10"); // false
  console.log(10 != 20); // true
  

• !==
  定义：严格不等，值或类型不同则返回true。
  语法格式：值1 !== 值2;
  示例：

  console.log(10 !== "10"); // true
  console.log(10 !== 10); // false
  

3. 算术运算符

• +
  定义：加法（数字）/拼接（字符串）。
  语法格式：值1 + 值2;
  示例：

  console.log(1 + 2); // 3（加法）
  console.log("a" + "b"); // "ab"（拼接）
  console.log(1 + "2"); // "12"（类型转换后拼接）
  

• -
  定义：减法（数字）/取负（单值）。
  语法格式：值1 - 值2; / -值;
  示例：

  console.log(5 - 2); // 3（减法）
  console.log(-10); // -10（取负）
  console.log("5" - 2); // 3（类型转换后减法）
  

• *
  定义：乘法，计算数字乘积。
  语法格式：值1 * 值2;
  示例：

  console.log(3 * 4); // 12
  console.log("3" * 4); // 12（类型转换）
  

• /
  定义：除法，计算数字商。
  语法格式：值1 / 值2;
  示例：

  console.log(10 / 2); // 5
  console.log(10 / 3); // 3.333...
  

• %
  定义：取模/取余，返回除法余数。
  语法格式：值1 % 值2;
  示例：

  console.log(10 % 3); // 1
  console.log(7 % 2); // 1（判断奇偶）
  

• ++
  定义：自增，前置（++a）先加后用，后置（a++）先用后加。
  语法格式：++变量; / 变量++;
  示例：

  let a = 1;
  console.log(a++); // 1（后置，先用后加）
  console.log(a); // 2
  
  let b = 1;
  console.log(++b); // 2（前置，先加后用）
  console.log(b); // 2
  

• –
  定义：自减，前置（--a）先减后用，后置（a--）先用后减。
  语法格式：--变量; / 变量--;
  示例：

  let a = 2;
  console.log(a--); // 2（后置）
  console.log(a); // 1
  
  let b = 2;
  console.log(--b); // 1（前置）
  console.log(b); // 1
  

4. 逻辑运算符

• &&
  定义：逻辑与，短路求值：第一个值为假返回假值，否则返回第二个值。
  语法格式：值1 && 值2;
  示例：

  console.log(true && false); // false
  console.log(1 && 2); // 2（都为真，返回第二个）
  console.log(0 && 2); // 0（第一个为假，返回）
  // 短路执行
  const flag = true;
  flag && console.log("执行"); // 输出"执行"
  

• ||
  定义：逻辑或，短路求值：第一个值为真返回真值，否则返回第二个值。
  语法格式：值1 || 值2;
  示例：

  console.log(true || false); // true
  console.log(0 || 2); // 2（第一个为假，返回第二个）
  console.log("a" || "b"); // "a"（第一个为真，返回）
  // 设置默认值
  const name = "";
  console.log(name || "匿名"); // "匿名"
  

• !
  定义：逻辑非，取反布尔值（非布尔值先转布尔再取反）。
  语法格式：!值;
  示例：

  console.log(!true); // false
  console.log(!0); // true（0转布尔为false，取反为true）
  console.log(!!"abc"); // true（双重取反转布尔）
  

• ??
  定义：空值合并，仅当第一个值为null/undefined时返回第二个值。
  语法格式：值1 ?? 值2;
  示例：

  console.log(null ?? "默认"); // "默认"
  console.log(0 ?? "默认"); // 0（非null/undefined，返回自身）
  console.log(undefined ?? 10); // 10
  

5. 位运算符

• &
  定义：按位与，二进制逐位与（都为1则为1）。
  语法格式：数值1 & 数值2;
  示例：

  // 5 = 101, 3 = 011 → 001 = 1
  console.log(5 & 3); // 1
  

• |
  定义：按位或，二进制逐位或（有一个1则为1）。
  语法格式：数值1 | 数值2;
  示例：

  // 5 = 101, 3 = 011 → 111 = 7
  console.log(5 | 3); // 7
  

• ^
  定义：按位异或，二进制逐位异或（不同则为1）。
  语法格式：数值1 ^ 数值2;
  示例：

  // 5 = 101, 3 = 011 → 110 = 6
  console.log(5 ^ 3); // 6
  // 数值交换
  let a = 1, b = 2;
  a ^= b;
  b ^= a;
  a ^= b;
  console.log(a, b); // 2, 1
  

• ~
  定义：按位非，二进制逐位取反，等价于-(n+1)。
  语法格式：~数值;
  示例：

  console.log(~5); // -6（等价于-(5+1)）
  // 查找索引时判断
  const arr = [1,2,3];
  console.log(~arr.indexOf(2)); // -3（非-1，存在）
  console.log(~arr.indexOf(4)); // 0（-(-1+1)=0，不存在）
  

• <<
  定义：左移，二进制左移，末尾补0，等价于数值 * 2^n。
  语法格式：数值 << 位数;
  示例：

  // 1 = 001 → 左移2位 → 100 = 4
  console.log(1 << 2); // 4
  

• >>
  定义：有符号右移，二进制右移，符号位补位，等价于数值 / 2^n（向下取整）。
  语法格式：数值 >> 位数;
  示例：

  // 4 = 100 → 右移2位 → 001 = 1
  console.log(4 >> 2); // 1
  // -4 = 111...1100 → 右移2位 → 111...1111 = -1
  console.log(-4 >> 2); // -1
  

• >>>
  定义：无符号右移，二进制右移，补0，负数转正数。
  语法格式：数值 >>> 位数;
  示例：

  // -4 >>> 2 = 1073741823
  console.log(-4 >>> 2); // 1073741823
  

三、DOM/BOM常用关键字

• document
  定义：浏览器文档对象，操作DOM的入口。
  语法格式：document.属性/方法;
  示例：

  // 获取元素
  const box = document.getElementById("box");
  // 创建元素
  const div = document.createElement("div");
  

• window
  定义：浏览器全局对象，所有全局变量/函数都是其属性。
  语法格式：window.属性/方法;
  示例：

  // 弹窗
  window.alert("提示");
  // 定时器
  const timer = window.setTimeout(() => {}, 1000);
  // 全局变量
  window.name = "张三";
  console.log(name); // "张三"（全局变量等价于window.name）
  

• console
  定义：浏览器控制台对象，用于调试输出。
  语法格式：console.方法(参数);
  示例：

  console.log("普通日志"); // 普通输出
  console.error("错误日志"); // 错误输出
  console.table([{ name: "张三" }, { name: "李四" }]); // 表格输出
  

• log
  定义：console.log方法，输出日志到控制台。
  语法格式：console.log(内容1, 内容2, ...);
  示例：

  const name = "张三";
  const age = 18;
  console.log("姓名：", name, "年龄：", age); // 输出多个内容
  console.log(`姓名：${name}，年龄：${age}`); // 模板字符串
  

• alert
  定义：window.alert方法，弹出提示弹窗（阻塞执行）。
  语法格式：alert(提示内容);
  示例：

  alert("操作成功！"); // 弹出提示框
  

• prompt
  定义：window.prompt方法，弹出输入弹窗，返回用户输入值（取消返回null）。
  语法格式：prompt(提示内容[, 默认值]);
  示例：

  const name = prompt("请输入姓名：", "匿名");
  console.log(name); // 输出用户输入的姓名
  

• confirm
  定义：window.confirm方法，弹出确认弹窗，返回true/false。
  语法格式：confirm(提示内容);
  示例：

  const res = confirm("确定删除吗？");
  if (res) {
    console.log("执行删除");
  } else {
    console.log("取消删除");
  }
  

• location
  定义：window.location对象，操作浏览器地址栏。
  语法格式：location.属性/方法;
  示例：

  console.log(location.href); // 获取当前URL
  location.href = "https://www.baidu.com"; // 跳转页面
  location.reload(); // 刷新页面
  

• href
  定义：location.href属性，获取/设置URL。
  语法格式：location.href; / location.href = URL;
  示例：

  // 获取URL
  const currentUrl = location.href;
  console.log(currentUrl);
  // 跳转URL
  location.href = "https://github.com";
  

• reload
  定义：location.reload方法，刷新页面（参数true强制从服务器加载）。
  语法格式：location.reload([forceGet]);
  示例：

  location.reload(); // 普通刷新
  location.reload(true); // 强制刷新（不使用缓存）
  

• history
  定义：window.history对象，操作浏览器历史记录。
  语法格式：history.方法;
  示例：

  history.back(); // 返回上一页
  history.forward(); // 前进一页
  history.pushState({}, "", "/new-page"); // 新增历史记录（无刷新）
  

• pushState
  定义：history.pushState方法，新增历史记录，实现前端路由（无刷新跳转）。
  语法格式：history.pushState(状态对象, 标题, URL);
  示例：

  // 新增历史记录，URL变为 /user/1
  history.pushState({ id: 1 }, "", "/user/1");
  // 监听popstate事件（返回/前进时触发）
  window.addEventListener("popstate", (e) => {
    console.log(e.state); // 输出{ id: 1 }
  });
  

• back
  定义：history.back方法，返回上一页（等价于history.go(-1)）。
  语法格式：history.back();
  示例：

  // 点击按钮返回上一页
  document.querySelector("#backBtn").addEventListener("click", () => {
    history.back();
  });
  

• forward
  定义：history.forward方法，前进一页（等价于history.go(1)）。
  语法格式：history.forward();
  示例：

  document.querySelector("#forwardBtn").addEventListener("click", () => {
    history.forward();
  });
  

• getElementById
  定义：document.getElementById方法，通过ID获取唯一DOM元素。
  语法格式：document.getElementById(id);
  示例：

  // HTML: <div id="box"></div>
  const box = document.getElementById("box");
  box.style.color = "red"; // 修改元素样式
  

• getElementsByClassName
  定义：document.getElementsByClassName方法，通过类名获取元素集合（HTMLCollection）。
  语法格式：document.getElementsByClassName(类名);
  示例：

  // HTML: <div class="item"></div><div class="item"></div>
  const items = document.getElementsByClassName("item");
  // 遍历集合
  for (let i = 0; i < items.length; i++) {
    items[i].textContent = "项目" + (i + 1);
  }
  

• getElementsByTagName
  定义：document.getElementsByTagName方法，通过标签名获取元素集合。
  语法格式：document.getElementsByTagName(标签名);
  示例：

  // 获取所有div元素
  const divs = document.getElementsByTagName("div");
  console.log(divs.length); // 输出div数量
  

• querySelector
  定义：document.querySelector方法，通过CSS选择器获取第一个匹配元素。
  语法格式：document.querySelector(选择器);
  示例：

  // 获取第一个.item元素
  const firstItem = document.querySelector(".item");
  // 获取#box下的p元素
  const p = document.querySelector("#box p");
  

• querySelectorAll
  定义：document.querySelectorAll方法，通过CSS选择器获取所有匹配元素（NodeList）。
  语法格式：document.querySelectorAll(选择器);
  示例：

  // 获取所有.item元素
  const items = document.querySelectorAll(".item");
  // 遍历NodeList（forEach）
  items.forEach((item, index) => {
    item.textContent = "第" + (index + 1) + "项";
  });
  

• addEventListener
  定义：DOM元素添加事件监听，支持多个监听、可移除。
  语法格式：元素.addEventListener(事件类型, 回调函数[, 选项]);
  示例：

  const btn = document.querySelector("#btn");
  // 绑定点击事件
  btn.addEventListener("click", () => {
    console.log("按钮被点击");
  });
  // 绑定滚动事件
  window.addEventListener("scroll", () => {
    console.log("页面滚动了");
  });
  

• removeEventListener
  定义：移除addEventListener绑定的事件（需相同回调函数）。
  语法格式：元素.removeEventListener(事件类型, 回调函数);
  示例：

  const btn = document.querySelector("#btn");
  // 定义回调函数（必须具名，否则无法移除）
  function handleClick() {
    console.log("点击");
  }
  // 添加监听
  btn.addEventListener("click", handleClick);
  // 移除监听
  btn.removeEventListener("click", handleClick);
  

• click
  定义：点击事件类型，配合addEventListener绑定。
  语法格式：元素.addEventListener("click", 回调);
  示例：

  document.querySelector("#submitBtn").addEventListener("click", (e) => {
    e.preventDefault(); // 阻止默认行为（如表单提交）
    console.log("提交按钮点击");
  });
  

• change
  定义：值改变事件（表单元素失焦后触发）。
  语法格式：元素.addEventListener("change", 回调);
  示例：

  // 下拉框值改变
  document.querySelector("#select").addEventListener("change", (e) => {
    console.log("选中值：", e.target.value);
  });
  // 输入框失焦后值改变
  document.querySelector("#input").addEventListener("change", (e) => {
    console.log("输入值：", e.target.value);
  });
  

• input
  定义：实时输入事件（表单元素输入时触发）。
  语法格式：元素.addEventListener("input", 回调);
  示例：

  // 实时监听输入框内容
  document.querySelector("#search").addEventListener("input", (e) => {
    console.log("实时输入：", e.target.value);
  });
  

• load
  定义：加载完成事件（页面/图片加载完成）。
  语法格式：window/元素.addEventListener("load", 回调);
  示例：

  // 页面加载完成
  window.addEventListener("load", () => {
    console.log("页面加载完成");
  });
  // 图片加载完成
  const img = new Image();
  img.src = "image.jpg";
  img.addEventListener("load", () => {
    console.log("图片加载完成");
  });
  

• unload
  定义：页面卸载事件（关闭/跳转前触发）。
  语法格式：window.addEventListener("unload", 回调);
  示例：

  window.addEventListener("unload", () => {
    console.log("页面即将卸载");
    // 保存数据到localStorage
    localStorage.setItem("lastVisit", new Date().toString());
  });
  

• scroll
  定义：滚动事件（页面/元素滚动时触发）。
  语法格式：window/元素.addEventListener("scroll", 回调);
  示例：

  // 监听页面滚动
  window.addEventListener("scroll", () => {
    // 获取滚动距离
    const scrollTop = document.documentElement.scrollTop;
    console.log("滚动距离：", scrollTop);
    // 滚动到一定位置显示回到顶部按钮
    if (scrollTop > 300) {
      document.querySelector("#topBtn").style.display = "block";
    }
  });
  

• innerHTML
  定义：DOM元素属性，获取/设置HTML内容（解析标签）。
  语法格式：元素.innerHTML; / 元素.innerHTML = HTML字符串;
  示例：

  const box = document.querySelector("#box");
  // 设置HTML内容
  box.innerHTML = "<h1>标题</h1><p>段落</p>";
  // 获取HTML内容
  console.log(box.innerHTML); // 输出设置的HTML字符串
  

• innerText
  定义：DOM元素属性，获取/设置纯文本内容（不解析标签）。
  语法格式：元素.innerText; / 元素.innerText = 文本;
  示例：

  const box = document.querySelector("#box");
  // 设置纯文本
  box.innerText = "<h1>标题</h1>"; // 不会解析<h1>，直接显示文本
  // 获取纯文本
  console.log(box.innerText); // 输出"<h1>标题</h1>"
  

• outerHTML
  定义：DOM元素属性，获取/设置包含元素自身的HTML内容。
  语法格式：元素.outerHTML; / 元素.outerHTML = HTML字符串;
  示例：

  // HTML: <div id="box">原内容</div>
  const box = document.querySelector("#box");
  // 获取outerHTML
  console.log(box.outerHTML); // <div id="box">原内容</div>
  // 替换整个元素
  box.outerHTML = "<p id='newBox'>新内容</p>";
  

• value
  定义：表单元素属性，获取/设置值（input/select/textarea）。
  语法格式：表单元素.value; / 表单元素.value = 值;
  示例：

  // 输入框
  const input = document.querySelector("#input");
  input.value = "默认值"; // 设置值
  console.log(input.value); // 获取值
  
  // 下拉框
  const select = document.querySelector("#select");
  select.value = "option2"; // 选中值为option2的选项
  

• style
  定义：DOM元素属性，操作行内样式（CSSStyleDeclaration对象）。
  语法格式：元素.style.样式属性 = 值;
  示例：

  const box = document.querySelector("#box");
  // 设置行内样式（驼峰命名）
  box.style.color = "red";
  box.style.fontSize = "16px";
  box.style.backgroundColor = "#f5f5f5";
  // 获取行内样式
  console.log(box.style.color); // "red"
  

• className
  定义：DOM元素属性，获取/设置class属性（字符串）。
  语法格式：元素.className; / 元素.className = 类名字符串;
  示例：

  const box = document.querySelector("#box");
  // 设置类名
  box.className = "active box"; // 多个类名用空格分隔
  // 获取类名
  console.log(box.className); // "active box"
  

• setAttribute
  定义：DOM元素方法，设置任意属性（原生/自定义）。
  语法格式：元素.setAttribute(属性名, 属性值);
  示例：

  const img = document.querySelector("img");
  // 设置原生属性
  img.setAttribute("src", "image.jpg");
  img.setAttribute("alt", "图片");
  // 设置自定义属性
  img.setAttribute("data-id", "123");
  

• getAttribute
  定义：DOM元素方法，获取任意属性值。
  语法格式：元素.getAttribute(属性名);
  示例：

  const img = document.querySelector("img");
  // 获取原生属性
  console.log(img.getAttribute("src")); // "image.jpg"
  // 获取自定义属性
  console.log(img.getAttribute("data-id")); // "123"
  

• removeAttribute
  定义：DOM元素方法，移除指定属性。
  语法格式：元素.removeAttribute(属性名);
  示例：

  const img = document.querySelector("img");
  // 移除alt属性
  img.removeAttribute("alt");
  // 移除自定义属性
  img.removeAttribute("data-id");
  

四、数组/对象常用方法关键字

• Array
  定义：数组构造函数（推荐用字面量[]）。
  语法格式：new Array(长度/元素); / Array(元素1, 元素2);
  示例：

  // 创建指定长度的数组
  const arr1 = new Array(3); // [empty × 3]
  // 创建带元素的数组
  const arr2 = new Array(1, 2, 3); // [1,2,3]
  const arr3 = Array(4,5); // [4,5]
  

• Object
  定义：对象构造函数（推荐用字面量{}）。
  语法格式：new Object(); / Object({ 键: 值 });
  示例：

  // 创建空对象
  const obj1 = new Object();
  // 创建带属性的对象
  const obj2 = new Object({ name: "张三", age: 18 });
  const obj3 = Object({ id: 1 });
  

• length
  定义：数组/字符串长度属性（数组可修改，字符串只读）。
  语法格式：数组/字符串.length; / 数组.length = 新长度;
  示例：

  // 数组length
  const arr = [1,2,3];
  console.log(arr.length); // 3
  arr.length = 2; // 截断数组 → [1,2]
  arr.length = 4; // 扩容数组 → [1,2, empty × 2]
  
  // 字符串length（只读）
  const str = "abc";
  console.log(str.length); // 3
  // str.length = 2; // 报错（只读）
  

• push
  定义：数组尾部添加元素，返回新长度。
  语法格式：数组.push(元素1, 元素2, ...);
  示例：

  const arr = [1,2];
  const len = arr.push(3,4); // 添加3、4
  console.log(arr); // [1,2,3,4]
  console.log(len); // 4（新长度）
  

• pop
  定义：数组尾部删除元素，返回被删除的元素。
  语法格式：数组.pop();
  示例：

  const arr = [1,2,3];
  const del = arr.pop(); // 删除3
  console.log(arr); // [1,2]
  console.log(del); // 3（被删除的元素）
  

• shift
  定义：数组头部删除元素，返回被删除的元素。
  语法格式：数组.shift();
  示例：

  const arr = [1,2,3];
  const del = arr.shift(); // 删除1
  console.log(arr); // [2,3]
  console.log(del); // 1
  

• unshift
  定义：数组头部添加元素，返回新长度。
  语法格式：数组.unshift(元素1, 元素2, ...);
  示例：

  const arr = [2,3];
  const len = arr.unshift(0,1); // 添加0、1
  console.log(arr); // [0,1,2,3]
  console.log(len); // 4
  

• splice
  定义：数组增删改（修改原数组），返回被删除元素数组。
  语法格式：数组.splice(起始索引, 删除数量, 新增元素1, 新增元素2...);
  示例：

  const arr = [1,2,3,4];
  // 删除：从索引1删除2个元素
  const del1 = arr.splice(1, 2); // 删除2、3
  console.log(arr); // [1,4]
  console.log(del1); // [2,3]
  
  // 插入：从索引1删除0个，插入2、3
  arr.splice(1, 0, 2, 3);
  console.log(arr); // [1,2,3,4]
  
  // 替换：从索引2删除1个，插入5
  const del2 = arr.splice(2, 1, 5); // 删除3，插入5
  console.log(arr); // [1,2,5,4]
  console.log(del2); // [3]
  

• slice
  定义：数组/字符串截取（不修改原数据），返回新数组/字符串。
  语法格式：数组.slice(起始索引[, 结束索引]);（结束索引不包含）
  示例：

  // 数组slice
  const arr = [1,2,3,4];
  const newArr = arr.slice(1, 3); // 截取索引1-2（不包含3）
  console.log(newArr); // [2,3]
  console.log(arr); // [1,2,3,4]（原数组不变）
  
  // 字符串slice
  const str = "abcdef";
  const newStr = str.slice(2, 5); // 截取索引2-4
  console.log(newStr); // "cde"
  

• concat
  定义：数组合并（不修改原数组），返回新数组。
  语法格式：数组1.concat(数组2/元素1, 数组3/元素2...);
  示例：

  const arr1 = [1,2];
  const arr2 = [3,4];
  // 合并数组
  const newArr1 = arr1.concat(arr2); // [1,2,3,4]
  // 合并数组+元素
  const newArr2 = arr1.concat(arr2, 5, 6); // [1,2,3,4,5,6]
  console.log(arr1); // [1,2]（原数组不变）
  

• join
  定义：数组转字符串，用分隔符拼接（默认,）。
  语法格式：数组.join([分隔符]);
  示例：

  const arr = [1,2,3];
  // 默认分隔符
  console.log(arr.join()); // "1,2,3"
  // 自定义分隔符
  console.log(arr.join("-")); // "1-2-3"
  // 无分隔符
  console.log(arr.join("")); // "123"
  

• split
  定义：字符串转数组，按分隔符拆分（可指定最大长度）。
  语法格式：字符串.split(分隔符[, 最大长度]);
  示例：

  const str = "1-2-3-4";
  // 按-拆分
  const arr1 = str.split("-"); // ["1","2","3","4"]
  // 指定最大长度
  const arr2 = str.split("-", 2); // ["1","2"]
  // 按空字符串拆分（每个字符）
  const arr3 = "abc".split(""); // ["a","b","c"]
  

• forEach
  定义：数组遍历，执行回调（无返回值，不可中断）。
  语法格式：数组.forEach((元素, 索引, 原数组) => { 回调逻辑 });
  示例：

  const arr = [1,2,3];
  arr.forEach((item, index) => {
    console.log(`索引${index}：${item}`);
    // 输出：索引0：1 → 索引1：2 → 索引2：3
  });
  

• map
  定义：数组映射，遍历执行回调，返回新数组（原数组不变）。
  语法格式：数组.map((元素, 索引, 原数组) => { 返回新值 });
  示例：

  const arr = [1,2,3];
  // 每个元素×2
  const newArr = arr.map(item => item * 2);
  console.log(newArr); // [2,4,6]
  console.log(arr); // [1,2,3]（原数组不变）
  

• filter
  定义：数组过滤，返回符合条件的新数组。
  语法格式：数组.filter((元素, 索引, 原数组) => { 返回布尔值 });
  示例：

  const arr = [1,2,3,4,5];
  // 过滤偶数
  const evenArr = arr.filter(item => item % 2 === 0);
  console.log(evenArr); // [2,4]
  // 过滤大于2的数
  const gt2Arr = arr.filter(item => item > 2);
  console.log(gt2Arr); // [3,4,5]
  

• reduce
  定义：数组归并，遍历执行回调，最终返回单个值。
  语法格式：数组.reduce((累加器, 元素, 索引, 原数组) => { 返回累加值 }, 初始值);
  示例：

  const arr = [1,2,3,4];
  // 求和（初始值0）
  const sum = arr.reduce((total, item) => total + item, 0);
  console.log(sum); // 10
  
  // 数组转对象
  const userArr = [
    { id: 1, name: "张三" },
    { id: 2, name: "李四" }
  ];
  const userObj = userArr.reduce((obj, item) => {
    obj[item.id] = item.name;
    return obj;
  }, {});
  console.log(userObj); // { 1: "张三", 2: "李四" }
  

• find
  定义：数组查找，返回第一个符合条件的元素（无则undefined）。
  语法格式：数组.find((元素, 索引, 原数组) => { 返回布尔值 });
  示例：

  const arr = [
    { id: 1, name: "张三" },
    { id: 2, name: "李四" }
  ];
  // 查找id=2的元素
  const user = arr.find(item => item.id === 2);
  console.log(user); // { id: 2, name: "李四" }
  
  // 查找不存在的元素
  const noUser = arr.find(item => item.id === 3);
  console.log(noUser); // undefined
  

• findIndex
  定义：数组查找，返回第一个符合条件的元素索引（无则-1）。
  语法格式：数组.findIndex((元素, 索引, 原数组) => { 返回布尔值 });
  示例：

  const arr = [1,2,3,4];
  // 查找值为3的索引
  const index1 = arr.findIndex(item => item === 3);
  console.log(index1); // 2
  
  // 查找大于5的索引（不存在）
  const index2 = arr.findIndex(item => item > 5);
  console.log(index2); // -1
  

• includes
  定义：检测数组/字符串是否包含指定值，返回布尔值。
  语法格式：数组/字符串.includes(值[, 起始索引]);
  示例：

  // 数组includes
  const arr = [1,2,3];
  console.log(arr.includes(2)); // true
  console.log(arr.includes(4)); // false
  console.log(arr.includes(2, 2)); // false（从索引2开始找）
  
  // 字符串includes
  const str = "abcdef";
  console.log(str.includes("cd")); // true
  console.log(str.includes("xyz")); // false
  

• indexOf
  定义：查找指定值的首次索引（无则-1），支持数组/字符串。
  语法格式：数组/字符串.indexOf(值[, 起始索引]);
  示例：

  // 数组indexOf
  const arr = [1,2,3,2];
  console.log(arr.indexOf(2)); // 1（首次出现的索引）
  console.log(arr.indexOf(2, 2)); // 3（从索引2开始找）
  
  // 字符串indexOf
  const str = "abac";
  console.log(str.indexOf("a")); // 0
  console.log(str.indexOf("ac")); // 2
  

• lastIndexOf
  定义：查找指定值的末次索引（无则-1），仅支持数组。
  语法格式：数组.lastIndexOf(值[, 起始索引]);
  示例：

  const arr = [1,2,3,2,4];
  // 查找2的末次索引
  console.log(arr.lastIndexOf(2)); // 3
  // 从索引2开始向前找
  console.log(arr.lastIndexOf(2, 2)); // 1
  

• keys
  定义：返回键/索引的迭代器（Object/Array）。
  语法格式：Object.keys(对象); / 数组.keys();
  示例：

  // Object.keys
  const obj = { name: "张三", age: 18 };
  const keys = Object.keys(obj);
  console.log(keys); // ["name", "age"]
  
  // Array.keys
  const arr = [1,2,3];
  const arrKeys = Array.from(arr.keys()); // 转为数组
  console.log(arrKeys); // [0,1,2]
  

• values
  定义：返回值的迭代器（Object/Array）。
  语法格式：Object.values(对象); / 数组.values();
  示例：

  // Object.values
  const obj = { name: "张三", age: 18 };
  const values = Object.values(obj);
  console.log(values); // ["张三", 18]
  
  // Array.values
  const arr = [1,2,3];
  const arrValues = Array.from(arr.values());
  console.log(arrValues); // [1,2,3]
  

• entries
  定义：返回键值对/索引值对的迭代器（Object/Array）。
  语法格式：Object.entries(对象); / 数组.entries();
  示例：

  // Object.entries
  const obj = { name: "张三", age: 18 };
  const entries = Object.entries(obj);
  console.log(entries); // [["name","张三"], ["age",18]]
  
  // Array.entries
  const arr = [1,2,3];
  const arrEntries = Array.from(arr.entries());
  console.log(arrEntries); // [[0,1], [1,2], [2,3]]
  

• hasOwnProperty
  定义：检测属性是否为对象自有属性（非原型继承）。
  语法格式：对象.hasOwnProperty(属性名);
  示例：

  const obj = { name: "张三" };
  // 自有属性
  console.log(obj.hasOwnProperty("name")); // true
  // 原型链属性（toString）
  console.log(obj.hasOwnProperty("toString")); // false
  

• isArray
  定义：检测值是否为数组（比instanceof更可靠）。
  语法格式：Array.isArray(值);
  示例：

  console.log(Array.isArray([])); // true
  console.log(Array.isArray({})); // false
  console.log(Array.isArray("abc"))