一文彻底理解JavaScript中的关键字

JavaScript有许多关键字,这些关键字会被JavaScript所用到,是组成JavaScript的一部分,如var 、 function都是关键字,这篇文章主要介绍了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"))
  

总结 

到此这篇关于JavaScript中关键字的文章就介绍到这了,更多相关js中关键字内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

• js中的this关键字详解
• javascript 常用关键字列表集合
• 关于js里的this关键字的理解
• javascript中new关键字详解
• Javascript this关键字使用分析
• 理解javascript中的with关键字
• 一个对于js this关键字的问题