文章目录一、浏览器引擎解析机制1.1 渲染引擎1.2 JS 引擎二、JavaScript 的三大组成部分2.1 ECMAScriptES2.2 DOM2.3 BOM三、JavaScript 的书写形式3.1 行内式嵌入 HTML 标签的 “极简写法”3.2 内嵌式包裹在script标签中的 “集中写法”3.3 外部式独立文件的 “模块化写法”四、变量4.1 变量的声明与初始化4.2 var与let的核心区别五、数据类型5.1 基本数据类型5.1.1 number数字型5.1.2 boolean布尔型5.1.3 string字符串型5.1.4 undefined未定义型5.1.5 null空型5.2 特殊数字值六、运算符6.1 相等运算符\\ 与 \\ 的区别6.2 其他常用运算符补充一、浏览器引擎解析机制要理解 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 ECMAScriptESECMAScript 是 JavaScript 的语法标准定义了语言的核心语法、数据类型、运算符、函数等基础规则。我们常说的 ES6、ES7 等就是该标准的不同版本2015 年起以年份命名如 ES2015 对应 ES6。它确保了不同环境浏览器、Node.js下 JavaScript 语法的一致性。2.2 DOMDOM文档对象模型是浏览器将 HTML 文档解析后生成的对象树。每个 HTML 标签如div 、p都是树中的一个节点开发者可以通过 DOM 提供的 API 操作这些节点修改内容、调整样式、绑定事件等。例如通过document.getElementById(app)可以获取页面中 id 为 “app” 的元素进而对其进行修改。2.3 BOMBOM浏览器对象模型提供了操作浏览器窗口的接口包括控制窗口大小、操作地址栏、弹出对话框等。常见的 BOM 对象有window浏览器窗口本身、location当前页面 URL 信息、history浏览历史记录等。例如通过window.alert(Hello World)可以弹出提示框通过location.href https://example.com可以跳转到指定网址。三、JavaScript 的书写形式根据使用场景的不同JavaScript 代码有三种常见的书写形式各有其适用场景3.1 行内式嵌入 HTML 标签的 “极简写法”行内式是将 JS 代码直接写在 HTML 标签的事件属性中如onclick、onload语法为buttononclickalert(点击成功)按钮/button特点写法简单适合单一、简单的交互逻辑但代码与 HTML 耦合度高不利于维护不推荐在复杂项目中使用。3.2 内嵌式包裹在script标签中的 “集中写法”内嵌式是将 JS 代码放在 HTML 文档的script标签内通常位于body底部避免因代码执行时 DOM 未加载而报错bodyscript// 这里写JS代码/script/body特点代码与 HTML 在同一文档中适合中小型页面但当代码量过大时会导致 HTML 文档臃肿。3.3 外部式独立文件的 “模块化写法”外部式是将 JS 代码单独放在.js文件中再通过script标签的src属性引入 HTML!-- HTML文件 --scriptsrc./index.js/script特点代码与 HTML 完全分离可复用性高便于多人协作和版本管理是大型项目的首选方式。注意css的外部式写法为linkrelstylesheethref./style.cssJavaScript为双标签且利用src引入。而css为单标签link,通过href引入。四、变量4.1 变量的声明与初始化声明变量时需指定变量名并可同时赋值初始化// 声明并初始化变量varnameDaisy;// 使用var声明letage30;// 使用let声明4.2 var与let的核心区别let是 ES6 新增的声明方式相比var更符合现代编程习惯作用域let具有块级作用域仅在{ }内有效而var是函数级作用域在函数内有效无块级概念。if(true){vara10;// 函数级作用域外部可访问letb20;// 块级作用域外部不可访问}console.log(a);// 10正常输出console.log(b);// 报错b未定义变量提升var会发生 “变量提升”声明被提升到作用域顶部赋值保留在原地而let不会。console.log(c);// undefinedvar声明的变量提升varc30;console.log(d);// 报错let无变量提升letd40;重复声明var允许重复声明同一变量而let不允许。vare50;vare60;// 不报错e最终为60letf70;letf80;// 报错已声明f因此开发中建议优先使用let避免var的特性导致意外 bug。五、数据类型JavaScript 是弱类型且动态类型语言弱类型不同类型变量赋值时无需强制转换如let x 10; x hello合法。动态类型变量类型可在运行中随时变化同一变量可从数字变为字符串。其数据类型分为基本数据类型和引用数据类型本文重点讲解基本数据类型。5.1 基本数据类型5.1.1 number数字型JavaScript 中数字不区分整数和小数统一用number类型表示letintNum100;// 整数letfloatNum3.14;// 小数转为数字型的四种常见方式parseInt()将字符串转换为整数parseFloat()将字符串转化为浮点数Number()将字符串转化为数字型利用算数运算符-、*、/隐式转化。在运算中true等效于 1false等效于 0letatrue;aa1;// true转为1结果为2console.log(a);// 25.1.2 boolean布尔型boolean仅包含两个值true真和 false假常用于条件判断letisDonetrue;lethasErrorfalse;转换为布尔型使用Boolean。转化时代表空、否定的值转化为false如空字符串、0、NaN、null、undefined其余的值转化为true例如console.log(Boolean());//falseconsole.log(Boolean(0));//falseconsole.log(Boolean(NaN));//falseconsole.log(Boolean(null));//falseconsole.log(Boolean(undefined));//falseconsole.log(Boolean(daisy));//trueconsole.log(Boolean(18));//true5.1.3 string字符串型字符串用于表示文本可用单引号 ’ 或双引号 包裹两者功能一致。嵌套规则单引号内可嵌套双引号双引号内可嵌套单引号但不可交叉嵌套letstr1He said Hello;// 合法单引号内嵌套双引号letstr2Shes happy;// 合法双引号内嵌套单引号letstr3He said Hello;// 报错交叉嵌套转义字符当需要在字符串中使用与包裹符相同的引号或特殊符号时需用转义字符以\开头转义字符含义\n换行\\表示一个\\’单引号\双引号\t制表符类似 Tab 键长度通过length属性获取字符串长度letahahaha;console.log(a.length);// 6hahaha包含6个字符拼接使用运算符数字与字符串拼接会自动转为字符串letnum10;letstr20;console.log(numstr);// 1020数字10转为字符串后拼接console.log(1020);// 30纯数字相加为计算结果5.1.4 undefined未定义型当变量声明但未初始化时其值为undefinedletg;console.log(g);// undefined与字符串拼接结果为字符串拼接undefined转为字符串console.log(g10);// undefined10与数字运算结果为NaN非数字console.log(g10);// NaN5.1.5 null空型null表示 “空值”通常用于主动释放变量的引用如对象不再使用时letobj{name:Tom};objnull;// 释放obj对原对象的引用与其他类型相加时null等效于 0console.log(null5);// 5null转为0后相加console.log(null5);// null5null转为字符串后拼接利用typeof可以进行数据检测console.log(typeof12);//输出 numberconsole.log(typeofnull);//输出 objectletadaisy;console.log(typeofastring)//输出 true5.2 特殊数字值number类型中存在几个特殊值用于表示边界情况Infinity无穷大大于任何数字当数值超出 JS 可表示范围时出现console.log(10/0);// Infinity正数除以0-Infinity无穷小小于任何数字console.log(-10/0);// -Infinity负数除以0NaN非数字Not a Number表示运算结果不是有效数字console.log(abc-10);// NaN字符串减数字无意义六、运算符6.1 相等运算符 与 的区别比较值是否相等会进行隐式类型转换console.log(11);// true1转为数字1后比较console.log(true1);// truetrue转为1后比较比较值和数据类型是否都相等不进行隐式转换推荐使用避免类型转换导致的意外console.log(11);// false数字1与字符串1类型不同console.log(true1);// falseboolean 与 number类型不同6.2 其他常用运算符补充算术运算符 - * %等。赋值运算符 、 、* 等。逻辑运算符 、|| 、! 用于条件判断。JavaScript 基础语法是构建复杂应用的基石从变量声明到类型转换从运算符特性到运行环境每一个细节都影响着代码的正确性和效率。掌握这些基础后再深入学习函数、对象、DOM 操作等内容就能逐步解锁 JavaScript 的强大功能。后续将继续探讨更进阶的语法知识敬请关注