JavaScript 作为前端开发的基石语言，其基础语法和核心特性直接决定了代码的正确性、效率和可维护性。本文将围绕变量定义、流程控制、函数、对象、JSON、异步处理、BOM/DOM 以及原型等核心基础知识点，结合实例代码进行详细拆解，帮助初学者快速掌握 JS 核心逻辑。

一、变量定义与作用域：变量的"生存规则"

变量是 JS 中存储数据的基本单元，不同的声明方式决定了变量的作用域、提升行为和可修改性，这是避免变量污染和逻辑错误的关键。

1. 三种声明方式对比

声明关键字 作用域 提升行为 可修改性 重复声明
var 函数级/全局 变量提升（初始值 undefined） 可修改 允许
let 块级（{} 内） 暂存死区（TDZ），不允许提前访问 可修改 不允许
const 块级（{} 内） 暂存死区（TDZ），不允许提前访问 不可修改（引用类型内部可改） 不允许

2. 实例解析

// var：全局作用域，可重复声明
var a = 1;
var a = 10; // 允许重复声明，覆盖原有值
console.log(a); // 输出 10

// let：块级作用域，不可重复声明
let b = 2;
b = 123; // 允许修改值
// let b = 4; // 报错：Identifier 'b' has already been declared

// const：块级作用域，声明时必须赋值且不可修改
const c = 3;
// c = 5; // 报错：Assignment to constant variable.
const obj = { x: 1 };
obj.x = 2; // 允许修改引用类型内部属性（仅禁止修改引用地址）

3. 核心注意点

  • 块级作用域：let/const 仅在 if、for、{} 等代码块内有效，避免了 var 带来的全局污染问题；
  • const 优先原则：若变量的值不需要修改，优先使用 const，增强代码可读性和稳定性；
  • 全局作用域差异：var 声明的全局变量会挂载到 window（浏览器环境）/global（Node 环境），let/const 不会。

二、基本数据类型：JS 的"数据积木"

JS 有 6 种基本数据类型，是构建复杂数据结构的基础：

  • 整型（Number）：数字类型（包括整数、浮点数、NaN、Infinity），如 1、3.14、1/0（Infinity）；
  • 字符串（String）：文本类型，用单引号、双引号或反引号包裹，如 'hello'、"JS"；
  • 布尔值（Boolean）：逻辑判断类型，仅 true（真）和 false（假）两个值；
  • null：表示"空对象"，主动声明变量为空（typeof 检测为 object，属于历史bug）；
  • undefined：表示"未定义"，变量声明未赋值或函数无返回值时的默认值；
  • Symbol（ES6+）：唯一标识符（本文暂不展开）。

实例解析

// 数据类型转换示例：undefined 转字符串
console.log('' + undefined); // 输出 "undefined"（字符串拼接时自动转换类型）

// 特殊值说明
console.log(typeof null); // 输出 "object"（历史bug，需记住实际类型是null）
console.log(typeof undefined); // 输出 "undefined"

三、流程控制：代码的"执行路线"

流程控制用于控制代码的执行顺序，核心包括条件判断（if-else）和循环（for/while），是实现复杂逻辑的基础。

1. 条件判断：if-else/else if

根据条件是否成立执行不同代码块，适用于分支逻辑：

var a = 5;
// 基础 if-else
if (a > 0) {
    console.log('a > 0'); // 条件成立，执行此句
} else {
    console.log('a <= 0');
}

// 多分支 else if
if (a > 10) {
    console.log('a > 10');
} else if (a < 0) {
    console.log('a < 0');
} else {
    console.log('0 <= a <= 10'); // 条件成立，执行此句
}

2. 循环：for/while

用于重复执行同一代码块，适用于批量处理数据、遍历等场景：

// for 循环：适用于已知循环次数的场景
for (let i = 0; i < 10; i++) {
    console.log(i); // 输出 0-9（let 声明的 i 仅在循环块内有效）
}

// while 循环：适用于未知循环次数，依赖条件终止的场景
let count = 0;
while (count < 5) {
    console.log(count); // 输出 0-4
    count += 1; // 等价于 count = count + 1，避免死循环的关键
}

核心注意点

  • 循环中使用 let 声明循环变量（如 for 循环的 i），避免循环结束后变量泄露；
  • while 循环必须确保条件最终会变为 false，否则会导致死循环（如遗漏 count += 1）。

四、函数：代码的"复用模块"

函数是封装可复用代码的核心方式，JS 中函数是一等公民（可作为参数、返回值），常见声明方式有函数表达式、函数声明、箭头函数和匿名函数。

1. 四种函数声明方式

（1）函数表达式（var 声明）
var func1 = function (a, b) {
    return a + b; // return 语句返回函数结果，无 return 则返回 undefined
};
console.log(func1(2, 3)); // 输出 5
（2）函数声明（function 关键字）
function func2(a, b) {
    return a + b;
}
console.log(func2(3, 4)); // 输出 7
（3）箭头函数（ES6+）

简洁语法，无自己的 this，继承外层作用域的 this，适用于简单逻辑：

// 简写形式：单表达式无需大括号和 return
var func4 = (a, b) => a + b;
console.log(func4(1, 2)); // 输出 3

// 完整形式：多语句需大括号和 return
var func5 = (a, b) => {
    console.log(a + b); // 输出 314
    return a + b;
};
console.log(func5(2, 312)); // 输出 314
（4）匿名函数（立即执行函数 IIFE）

无函数名，通过 !、() 等运算符触发立即执行，避免全局污染：

// 立即执行函数（IIFE）：声明后立即执行
!function () {
    console.log('匿名函数'); // 输出 "匿名函数"
    // 内部函数可通过外部变量暴露
    function func3() {
        console.log('this is func3');
    }
    ps = func3; // 将内部函数赋值给全局变量 ps
}();
ps(); // 输出 "this is func3"

2. 函数声明 vs 函数表达式

  • 函数声明：存在函数提升，可在声明前调用（如 func2(3,4) 写在 function func2 之前仍有效）；
  • 函数表达式：不存在提升，必须先声明后调用（否则报错 func1 is not a function）。

五、对象：JS 的"数据容器"

对象是存储键值对（属性和方法）的复杂数据类型，是 JS 中最核心的数据结构之一，常见创建方式有对象字面量和 new Object()。

1. 对象创建与属性访问

// 1. 对象字面量（推荐，简洁高效）
var obj = {
    name: 'zhangsan', // 字符串属性名
    age: 18, // 数字属性
    'func': function (a, b) { // 函数属性（方法）
        return a + b + 1;
    },
    "object": { // 嵌套对象
        name: 'lisi'
    }
};

// 2. new Object() 创建
var obj1 = new Object({ name: 'lisi' });

// 3. 属性访问方式
console.log(obj.name); // 点语法（推荐，简洁），输出 "zhangsan"
console.log(obj['age']); // 方括号语法（适用于属性名含特殊字符或变量），输出 18
console.log(obj.object.name); // 嵌套对象访问，输出 "lisi"

2. 函数方法的 call/apply 调用

call 和 apply 用于改变函数的 this 指向，差异在于参数传递方式：

  • call：第一个参数是 this 指向的对象，后续参数逐个传入；
  • apply：第一个参数是 this 指向的对象，后续参数以数组形式传入。
// 直接调用：this 指向 obj
console.log(obj.func(1, 2)); // 输出 4（1+2+1）

// call 调用：this 指向 obj，参数逐个传入
console.log(obj.func.call(obj, 1, 2)); // 输出 4

// apply 调用：this 指向 null（非严格模式下指向 window），参数以数组传入
console.log(obj.func.apply(null, [1, 2])); // 输出 4

六、JSON：数据的"传输格式"

JSON（JavaScript Object Notation）是轻量级数据交换格式，与 JS 对象语法相似，但本质是字符串，常用于前后端数据传输。

1. 核心方法

  • JSON.stringify(obj)：将 JS 对象转为 JSON 字符串（排除函数、undefined 等不可序列化属性）；
  • JSON.parse(str)：将 JSON 字符串转为 JS 对象（若字符串格式非法则报错）。

2. 实例解析

// 对象转 JSON 字符串
var jsonStr = JSON.stringify(obj);
console.log(jsonStr); 
// 输出：{"name":"zhangsan","age":18,"object":{"name":"lisi"}}（无 func 方法，已被排除）

// JSON 字符串转对象
var jsonStr2 = '{"name":"zhangsan","age":18,"object":{"name":"lisi"}}';
var jsonObj = JSON.parse(jsonStr2);
console.log(jsonObj.name); // 输出 "zhangsan"

实际应用场景

  • 表单提交：将表单数据转为 JSON 字符串后发送给后端；
  • 接口响应：后端返回的 JSON 字符串转为 JS 对象后渲染页面；
  • 数据存储：将复杂对象转为 JSON 字符串后存入 localStorage（仅支持字符串存储）。

七、异步处理与错误捕获：代码的"稳健性保障"

1. 异步处理：Promise 基础

JS 是单线程语言，异步处理用于避免阻塞主线程（如接口请求、定时器），Promise 是处理异步的核心方案：

// Promise.resolve(1) 创建一个成功状态的 Promise
Promise.resolve(1)
    .then(res => {
        console.log(res); // 异步执行，输出 1（then 处理成功结果）
    })
    .catch(err => {
        console.log(err); // 捕获异步过程中的错误
    });

2. 错误捕获：try-catch

用于捕获代码执行过程中的同步错误，避免程序崩溃：

try {
    console.log(1/0); // 不会报错（1/0 结果为 Infinity）
    // console.log(notDefinedVar); // 未声明变量，会触发错误
} catch (err) {
    console.log(err); // 捕获错误并输出：ReferenceError: notDefinedVar is not defined
}

核心注意点

  • try-catch 无法捕获异步错误（如 Promise 内部错误，需用 .catch 捕获）；
  • 异步代码不会阻塞后续同步代码执行（如 Promise.then 内的代码会在同步代码执行完后执行）。

八、BOM 与 DOM：JS 操作浏览器和页面的桥梁

1. BOM（Browser Object Model）：浏览器对象模型

操作浏览器相关功能，核心对象 window（全局对象，所有全局变量和函数都是其属性）：

  • window：浏览器窗口（如 window.alert() 弹出提示框）；
  • navigator：浏览器信息（如 navigator.userAgent 获取浏览器型号）；
  • location：页面地址（如 location.href 获取/设置当前 URL）；
  • history：浏览器历史记录（如 history.back() 后退）；
  • sessionStorage/localStorage：本地存储（sessionStorage 会话级，关闭页面失效；localStorage 持久化，除非手动删除）。

2. DOM（Document Object Model）：文档对象模型

操作 HTML 页面元素，核心对象 document：

// 创建元素
var div = document.createElement('div');

// 查询元素
var elem1 = document.getElementById('id'); // 通过 ID 查询（唯一）
var elem2 = document.getElementsByTagName('div'); // 通过标签名查询（返回集合）
var elem3 = document.querySelector('.class'); // 通过选择器查询（返回第一个匹配元素）

九、原型（prototype）：JS 继承的"核心机制"

原型是 JS 实现继承的基础，每个函数（构造函数）都有 prototype 属性，每个对象都有 __proto__ 属性（指向其原型对象），原型上的属性和方法可被所有实例共享。

1. 原型链基础

// 普通对象的原型关联
var obj = { name: 'zhangsan' };
var obj2 = {};
obj2.__proto__ = obj; // 将 obj2 的原型指向 obj（原型链关联）
console.log(obj2.name); // 输出 "zhangsan"（obj2 自身无 name，从原型 obj 继承）

2. 构造函数与原型继承

// 构造函数（首字母大写，用于创建实例）
function Person(name) {
    this.name = name; // 实例属性（每个实例单独拥有）
}

// 原型对象上添加方法（所有实例共享，节省内存）
Person.prototype.sayHello = function() {
    console.log("Hello, my name is " + this.name);
};

// 创建实例（new 关键字触发构造函数执行，生成实例）
let alice = new Person("Alice");
alice.sayHello(); // 输出：Hello, my name is Alice（从原型继承 sayHello 方法）

// 原型链关系：alice.__proto__ === Person.prototype
console.log(alice.__proto__ === Person.prototype); // 输出 true

核心意义

  • 原型共享：避免每个实例重复创建相同的方法，节省内存；
  • 原型链查找：实例访问属性/方法时，先查自身，若无则沿 __proto__ 向上查找，直到原型链顶端（Object.prototype）。

总结

JS 基础知识点环环相扣，变量作用域决定了变量的"生存范围"，流程控制定义了代码的"执行路线"，函数和对象是代码复用与数据存储的核心，JSON 是数据传输的标准格式，原型是继承的基础，BOM/DOM 是 JS 与浏览器和页面交互的桥梁。

掌握这些基础知识点后，不仅能写出规范、高效的 JS 代码，还能为后续学习闭包、异步编程（async/await）、框架（Vue/React）等高级内容打下坚实基础。实践是掌握的关键，建议结合本文实例，多动手编写代码，深入理解每个知识点的应用场景和边界情况。

# javascript # 前端 # 开发语言
Logo
AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

cover

KMP全栈开发：从Android到AI Agent

avatar AI Agent技术社区

AI Agent可观测性：破解多步推理黑盒的技术实践

初创团队：最小可行可观测性（MVP）清单成熟团队：构建企业级可观测性平台的关键考量开源贡献者：可扩展性与社区生态建设。

avatar AI Agent技术社区
cover

解析 Agent 系统架构：从 ReAct 循环到核心组件调用

avatar AI Agent技术社区