JavaScript基础体系｜前端交互语言核心入门

HTML搭建页面结构，CSS负责视觉渲染，而JavaScript赋予网页动态交互能力。三者共同构成前端页面的铁三角。

很多初学者误以为JS只是简单的点击弹窗、修改文字。实际上它是一门完整的解释型编程语言，拥有变量、类型、分支、循环、函数等整套编程体系。既能在浏览器操作页面DOM，也可以借助Node.js在服务端运行。

本文开启JS专栏第一篇，系统梳理JavaScript基础核心体系，建立完整的语言认知框架。

一、JavaScript三大组成部分

完整JS由三块模块构成，分工边界清晰：

• ECMAScript（语言核心）：JS语法本身，变量、数据类型、循环、函数、对象等。脱离浏览器依然可以运行，是JS的本体。

• DOM（文档对象模型）：操作HTML页面元素的API。可以增删标签、修改内容、样式，实现页面变化。

• BOM（浏览器对象模型）：操作浏览器窗口，获取浏览器信息、定时器、页面跳转、本地存储等能力。

二、JS代码书写位置

三种书写位置，业务开发优先外部js文件。

<!– 1.行内JS（极少使用，不利于结构与代码分离） –> <!– 2.内嵌script标签 –> <!– 3.外部JS文件，开发首选 –>

⚠️ script标签默认会阻塞页面解析，放在body底部可以避免页面渲染卡顿。

三、变量：存储数据的容器

变量本质是内存空间的别名，用来存放各类数据。JS有三个声明关键字：var、let、const。

// const：常量，一旦赋值不能修改，推荐优先使用 const username = "前端学习"; // let：变量，后续值可以修改，块级作用域 let age = 20; // var：旧时代声明方式，存在很多缺陷，现代项目不推荐使用 var gender = "男";

• const：声明常量，必须初始化，不能重新赋值；引用类型可以修改内部属性

• let：可变变量，块级作用域，不能重复声明，存在暂时性死区

• var：函数级作用域，允许重复声明，存在变量提升，容易引发bug

✅ 开发规范：优先const，需要修改值的时候使用let，尽量摒弃var。

四、JS两大数据类型

分为简单数据类型（基本类型）和引用数据类型。

基本数据类型（值拷贝）

• string 字符串：文本，引号包裹

• number 数字：整数、小数

• boolean 布尔：true / false

• undefined：未定义，变量声明没有赋值

• null：空值，代表不存在对象

• symbol（ES6）：唯一标识

引用数据类型（地址拷贝）

Object 对象、Array 数组、Function 函数。变量保存的是内存地址，多个变量指向同一个对象时，修改会互相影响。

五、控制台输出与注释

// 单行注释 /* 多行注释 */ // 控制台打印，调试最常用 console.log('打印内容'); console.error('错误信息');

六、标识符命名规范

• 只能由字母、数字、下划线、$组成，不能以数字开头

• 区分大小写，Name 和 name 是两个变量

• 不能使用JS关键字：let、const、var、function等

• 推荐小驼峰命名：userName、userInfo

七、基础运算符简述

// 算术运算符 + – * / % ++ — let a = 10 + 20; // 赋值运算符 = += -= *= let num = 1; num += 5; // 比较运算符 > < >= <= == === != !== console.log(10 === "10"); // false 全等，值+类型一起判断 // 逻辑运算符 && 并且 || 或者 !取反

推荐使用=== 全等判断，避免 == 自动类型转换带来的隐性bug。