JavaScript 基础构成与语法详解

JavaScript 是前端开发的核心语言，掌握其基础构成和语法是深入学习的必经之路。本文系统梳理了 JavaScript 的三大组成部分、基本语法、数据类型、运算符、流程控制及 BOM 基础，助你夯实根基。

一、JavaScript 的三大组成部分

JavaScript 并非单一整体，而是由以下三个核心部分组成：

• ECMAScript：JavaScript 的基本语法和核心功能规范。
• DOM（文档对象模型）：处理网页内容的方法和接口。
• BOM（浏览器对象模型）：与浏览器交互的方法和接口。

二、基本语法

2.1 引入 JavaScript 文件

在 HTML 中通过 <script> 标签引入外部 JS 文件：

<script src="文件路径"></script>

2.2 变量声明

使用 var 关键字声明变量（ES6 之后推荐使用 let 和 const）：

var 变量名 = 值;

示例：

var list = 11;

命名规则：

• 可包含数字、字母、下划线、美元符号 $。
• 不能以数字开头。
• 推荐使用骆驼峰命名法（camelCase），如：myVariableName。

三、数据类型

JavaScript 包含以下基本数据类型：

3.1 类型检测

使用 typeof 操作符检测变量类型：

console.log(typeof variable);

3.2 特殊值判断

• isNaN()：判断是否为非数字，返回布尔值。
• null 与任何值都不相等（除了严格相等比较 null === null）。

四、运算符

4.1 算术运算符

👋 注意：浮点数运算可能存在精度问题，例如 0.1 + 0.2 !== 0.3。

4.2 比较运算符

4.3 赋值运算符

4.4 三元运算符（条件运算符）

语法：条件 ? 值1 : 值2

var a = 9;
var result = a > 10 ? "大于10" : "小于等于10";

五、流程控制

5.1 条件语句

• if...else：基于条件执行不同代码块。
• switch：多条件分支选择。

5.2 循环语句

5.3 循环控制

• break：跳出当前循环。
• continue：跳过本次迭代，继续下一轮循环。

六、函数

函数是执行特定任务的代码块，支持参数传递和返回值。

定义语法：

function 函数名(形参1, 形参2) {
    // 函数体
    return 返回值; // 退出函数并返回值
}

• 形参：函数定义时的参数。
• 实参：函数调用时传入的实际参数。

七、浏览器对象模型（BOM）

BOM 提供了与浏览器交互的一系列方法和属性。

// 页面跳转
location.href = 'http://www.baidu.com';

// 修改 URL 中的 hash 部分（锚点）
location.hash = '#section';

// 重新加载当前页面
location.reload();

// 获取 URL 中的查询参数（? 之后的部分）
console.log(location.search);

八、调试工具

使用 console.log() 在浏览器开发者工具的控制台中输出信息，是前端开发最常用的调试手段。

console.log(60 > 66); // 输出：false

九、数值表示补充

• 八进制：以 0 开头（如 012 表示十进制的 10）。
• 十进制：常规数字表示。
• 浮点数：带小数点的数字。

结语
JavaScript 是一门功能强大的脚本语言。通过变量存储和操作数据，利用各种运算符进行逻辑判断与数学运算，借助流程控制实现复杂业务逻辑，而函数则赋予了代码复用与模块化的能力。掌握本文所述的基础知识，将为后续深入学习 DOM 操作、BOM 交互及现代前端框架打下坚实基础。