【WEB】JavaScript基础语法从运行机制到核心概念全解析-CSDN博客

本文链接：https://blog.csdn.net/2501_90752941/article/details/149313489

JavaScript 作为 Web 前端开发的核心语言，早已渗透到互联网应用的方方面面。从简单的页面交互到复杂的前端框架，其灵活的语法和强大的功能让开发者能轻松构建丰富的用户体验。
本文将从 JavaScript 的运行环境讲起，系统梳理其基础语法知识，帮助初学者快速入门。

一、浏览器引擎解析机制

要理解 JavaScript 的运行原理，首先需要了解浏览器的工作机制。浏览器对代码的处理主要依赖两大核心引擎：

1.1 渲染引擎

渲染引擎（俗称 “内核”）是浏览器解析 HTML 和 CSS 的核心组件。它的主要工作是将 HTML 标签转化为 DOM 树，将 CSS 样式解析为 CSSOM 树，再将两者结合生成渲染树，最终计算元素布局并绘制到屏幕上。不同浏览器的渲染引擎各有差异，比如 Chrome 使用 Blink 引擎，Safari 使用 WebKit 引擎，这也是同一份代码在不同浏览器中可能出现显示差异的原因之一。

1.2 JS 引擎

JS 引擎（即 JavaScript 解释器）是执行 JavaScript 代码的核心。它的工作流程类似于 “实时翻译”：逐行读取 JS 代码，将人类可读的代码解析为计算机能理解的二进制指令，再交由 CPU 执行。
目前最知名的 JS 引擎是 Chrome 内置的 V8 引擎，它凭借即时编译（JIT）技术大幅提升了代码执行效率，也是 Node.js 能在服务器端高效运行 JavaScript 的关键。

二、JavaScript 的三大组成部分

JavaScript 并非单一的语法规范，而是由三个核心部分协同工作的体系：

2.1 ECMAScript（ES）

ECMAScript 是 JavaScript 的语法标准，定义了语言的核心语法、数据类型、运算符、函数等基础规则。我们常说的 ES6、ES7 等，就是该标准的不同版本（2015 年起以年份命名，如 ES2015 对应 ES6）。它确保了不同环境（浏览器、Node.js）下 JavaScript 语法的一致性。

2.2 DOM

DOM（文档对象模型）是浏览器将 HTML 文档解析后生成的对象树。每个 HTML 标签（如<div> 、<p>）都是树中的一个节点，开发者可以通过 DOM 提供的 API 操作这些节点：修改内容、调整样式、绑定事件等。例如通过 document.getElementById('app')可以获取页面中 id 为 “app” 的元素，进而对其进行修改。

2.3 BOM

BOM（浏览器对象模型）提供了操作浏览器窗口的接口，包括控制窗口大小、操作地址栏、弹出对话框等。常见的 BOM 对象有window（浏览器窗口本身）、location（当前页面 URL 信息）、history（浏览历史记录）等。例如通过window.alert('Hello World')可以弹出提示框，通过location.href = 'https://example.com'可以跳转到指定网址。

三、JavaScript 的书写形式

根据使用场景的不同，JavaScript 代码有三种常见的书写形式，各有其适用场景：

3.1 行内式：嵌入 HTML 标签的 “极简写法”

行内式是将 JS 代码直接写在 HTML 标签的事件属性中（如onclick、onload），语法为：

<button onclick="alert('点击成功')">按钮</button>

特点：写法简单，适合单一、简单的交互逻辑；但代码与 HTML 耦合度高，不利于维护，不推荐在复杂项目中使用。

3.2 内嵌式：包裹在`<script>`标签中的 “集中写法”

内嵌式是将 JS 代码放在 HTML 文档的<script>标签内，通常位于<body>底部（避免因代码执行时 DOM 未加载而报错）：

<body>
  <script>
    // 这里写JS代码
  </script>
</body>

特点：代码与 HTML 在同一文档中，适合中小型页面；但当代码量过大时，会导致 HTML 文档臃肿。

3.3 外部式：独立文件的 “模块化写法”

外部式是将 JS 代码单独放在.js文件中，再通过<script>标签的src属性引入 HTML：

<!-- HTML文件 -->
<script src="./index.js"> </script>

特点：代码与 HTML 完全分离，可复用性高，便于多人协作和版本管理，是大型项目的首选方式。

注意：
css的外部式写法为：

<link rel="stylesheet" href="./style.css">

JavaScript为双标签，且利用src引入。而css为单标签<link>,通过href引入。

四、变量

4.1 变量的声明与初始化

声明变量时需指定变量名，并可同时赋值（初始化）：

// 声明并初始化变量
var name = "Daisy"; // 使用var声明
let age = 30; // 使用let声明

4.2 var与let的核心区别

let是 ES6 新增的声明方式，相比var更符合现代编程习惯：

作用域：let具有块级作用域（仅在{ }内有效），而var是函数级作用域（在函数内有效，无块级概念）。

if (true) {
  var a = 10; // 函数级作用域，外部可访问
  let b = 20; // 块级作用域，外部不可访问
}
console.log(a); // 10（正常输出）
console.log(b); // 报错（b未定义）

变量提升：var会发生 “变量提升”（声明被提升到作用域顶部，赋值保留在原地），而let不会。

console.log(c); // undefined（var声明的变量提升）
var c = 30;

console.log(d); // 报错（let无变量提升）
let d = 40;

重复声明：var允许重复声明同一变量，而let不允许。

var e = 50;
var e = 60; // 不报错，e最终为60

let f = 70;
let f = 80; // 报错（已声明f）

因此，开发中建议优先使用let，避免var的特性导致意外 bug。

五、数据类型

JavaScript 是弱类型且动态类型语言：

弱类型：不同类型变量赋值时无需强制转换（如let x = 10; x = "hello"合法）。
动态类型：变量类型可在运行中随时变化（同一变量可从数字变为字符串）。
其数据类型分为基本数据类型和引用数据类型（本文重点讲解基本数据类型）。

5.1 基本数据类型

在这里插入图片描述

5.1.1 number：数字型

JavaScript 中数字不区分整数和小数，统一用number类型表示：

let intNum = 100; // 整数
let floatNum = 3.14; // 小数

转为数字型的四种常见方式：

parseInt() 将字符串转换为整数
parseFloat() 将字符串转化为浮点数
Number() 将字符串转化为数字型
利用算数运算符（-、*、/）隐式转化。在运算中，true等效于 1，false等效于 0：

let a = true;
a = a + 1; // true转为1，结果为2
console.log(a); // 2

5.1.2 boolean：布尔型

boolean仅包含两个值：true（真）和 false（假），常用于条件判断：

let isDone = true;
let hasError = false;

转换为布尔型使用 Boolean（） 。转化时，代表空、否定的值转化为false，如 空字符串、0、NaN、null、undefined ，其余的值转化为true
例如：

console.log(Boolean("")); //false
console.log(Boolean(0)); //false
console.log(Boolean(NaN)); //false
console.log(Boolean(null)); //false
console.log(Boolean(undefined)); //false
console.log(Boolean("daisy")); //true
console.log(Boolean(18)); //true

5.1.3 string：字符串型

字符串用于表示文本，可用单引号 ’ 或双引号 " 包裹，两者功能一致。

嵌套规则：单引号内可嵌套双引号，双引号内可嵌套单引号，但不可交叉嵌套：

let str1 = 'He said "Hello"'; // 合法（单引号内嵌套双引号）
let str2 = "She's happy"; // 合法（双引号内嵌套单引号）
let str3 = 'He said 'Hello''; // 报错（交叉嵌套）

转义字符：当需要在字符串中使用与包裹符相同的引号或特殊符号时，需用转义字符（以\开头）：

转义字符	含义
\n	换行
\\	表示一个\
\’	单引号
\"	双引号
\t	制表符（类似 Tab 键）

长度：通过length属性获取字符串长度：

let a = "hahaha";
console.log(a.length); // 6（"hahaha"包含6个字符）

拼接：使用+运算符，数字与字符串拼接会自动转为字符串：

let num = 10;
let str = "20";
console.log(num + str); // "1020"（数字10转为字符串后拼接）
console.log(10 + 20); // 30（纯数字相加为计算结果）

5.1.4 undefined：未定义型

当变量声明但未初始化时，其值为undefined：

let g;
console.log(g); // undefined

与字符串拼接：结果为字符串拼接（undefined转为字符串）：

console.log(g + "10"); // "undefined10"

与数字运算：结果为NaN（非数字）：

console.log(g + 10); // NaN

5.1.5 null：空型

null表示 “空值”，通常用于主动释放变量的引用（如对象不再使用时）：

let obj = { name: "Tom" };
obj = null; // 释放obj对原对象的引用

与其他类型相加时，null等效于 0：

console.log(null + 5); // 5（null转为0后相加）
console.log(null + "5"); // "null5"（null转为字符串后拼接）

利用typeof 可以进行数据检测

console.log(typeof 12);  //输出 number
console.log(typeof null);  //输出 object  

let a = "daisy";
console.log(typeof a == "string") //输出 true

5.2 特殊数字值

number类型中存在几个特殊值，用于表示边界情况：

Infinity：无穷大，大于任何数字（当数值超出 JS 可表示范围时出现）：

console.log(10 / 0); // Infinity（正数除以0）

-Infinity：无穷小，小于任何数字：

console.log(-10 / 0); // -Infinity（负数除以0）

NaN：非数字（Not a Number），表示运算结果不是有效数字：

console.log("abc" - 10); // NaN（字符串减数字无意义）

六、运算符

6.1 相等运算符：== 与 === 的区别

==：比较值是否相等，会进行隐式类型转换：

console.log(1 == "1"); // true（"1"转为数字1后比较）
console.log(true == 1); // true（true转为1后比较）

=== ：比较值和数据类型是否都相等，不进行隐式转换（推荐使用，避免类型转换导致的意外）：

console.log(1 === "1"); // false（数字1与字符串"1"类型不同）
console.log(true === 1); // false（boolean 与 number类型不同）

6.2 其他常用运算符补充

算术运算符：+ ，- ，* ， %等。
赋值运算符：= 、+= 、*= 等。
逻辑运算符：&& 、|| 、! ，用于条件判断。

JavaScript 基础语法是构建复杂应用的基石，从变量声明到类型转换，从运算符特性到运行环境，每一个细节都影响着代码的正确性和效率。掌握这些基础后，再深入学习函数、对象、DOM 操作等内容，就能逐步解锁 JavaScript 的强大功能。后续将继续探讨更进阶的语法知识，敬请关注！