JavaScript 超详细整理（上篇）

本篇为 JS 教程上篇，覆盖 PPT 前半全部核心内容：Web 三层架构、JS 整体介绍、JS 两种引入方式、变量与常量、数据类型、模板字符串、三种函数写法、自定义对象、JSON 数据转换，配套完整代码示例、知识点小结，适合零基础自学、课堂预习、期末基础复习；下篇会讲解 DOM、事件、表格实战、模块化相关内容。

一、Web 标准与 JavaScript 整体介绍

1.1 W3C 网页三层架构

万维网联盟 W3C 制定网页统一开发标准，三层分工明确：

HTML（结构层）：搭建页面骨架，存放文字、图片、按钮等页面元素；
CSS（表现层）：控制页面样式，包含颜色、尺寸、布局、字体外观；
JavaScript（行为层）：实现页面交互、动态效果，是页面交互核心脚本语言。

1.2 JS 基础定义与三大组成

JavaScript 简称 JS，跨平台、面向对象弱类型脚本语言，语法和 Java 有相似之处，但二者是完全独立的两种编程语言。JS 由三大部分组成：

ECMAScript：JS 统一语法标准，规定变量、数据类型、函数、对象等基础核心语法，当前最新标准 ES2024；
BOM（浏览器对象模型）：专门操作浏览器窗口，实现弹窗、地址栏跳转、窗口关闭等功能；
DOM（文档对象模型）：专门操作 HTML 页面标签，修改文字、样式、增删页面元素。

ECMA 国际协会负责制定 ECMAScript 规范，所有浏览器厂商都遵循这套标准实现 JS 引擎。

1.3 小节小结

HTML 搭结构、CSS 做样式、JS 实现交互；JS 分为 ES 核心语法、BOM 浏览器操作、DOM 页面操作三部分。

二、JS 两种引入方式

2.1 内部脚本（内嵌在 HTML 页面）

使用<script>标签包裹 JS 代码，页面任意位置都可以放置，行业最佳实践是放在</body>结束标签前。优势：浏览器先加载渲染页面内容，再执行 JS，页面展示速度更快。代码示例：

复制代码

<body>
    <!-- 页面所有HTML内容 -->
    <script>
        alert('Hello World');
    </script>
</body>

2.2 外部独立 JS 文件

将 JS 代码抽离为.js后缀独立文件，多个 HTML 页面可以共用同一份代码，减少冗余。

新建 demo.js 文件，写入逻辑：

alert('外部JS文件测试');
HTML 页面通过 src 属性引入外部文件：

2.3 JS 书写规范

代码末尾分号;可写可省略，行业规范建议每行代码结尾加分号，避免解析异常。

2.4 小节小结

少量临时交互逻辑用内部 script；多页面复用代码统一抽离外部 JS 文件，script 标签推荐放在 body 末尾。

三、变量与常量、输出语句

3.1 let 声明变量

JS 属于弱类型语言，同一个变量可以随时存储数字、字符串等不同类型数据。变量命名规范：仅允许字母、数字、下划线_、美元符$，不能以数字开头；严格区分大小写；禁止使用 if、let、for 等关键字。示例代码：

复制代码

let a = 20;
a = "Hello JS";
alert(a);

3.2 const 声明常量

常量定义完成后，不允许重新赋值，常用于圆周率、接口地址等固定不变的数据。

复制代码

const PI = 3.14;
// PI = 3.5; 此行代码会直接报错，常量不可修改

补充：var 是早期旧语法，存在变量提升、作用域缺陷，现代开发不推荐使用。

3.3 JS 三种输出方式

方法	作用	使用场景
alert ("内容")	浏览器弹出提示框	给用户弹窗提示
console.log ("内容")	控制台打印信息	开发调试、查看变量
document.write ("文字")	直接写入页面 body	简单静态文字输出

3.4 小节小结

let 可变、const 不可变；开发调试优先使用 console.log 打印查看数据。

四、JS 数据类型与模板字符串

4.1 数据分类

分为基本数据类型、引用（对象）类型，5 种核心基础类型：

number：整数、小数、NaN（非数字）
boolean：布尔值，只有 true、false
string：字符串，单引号 / 双引号 / 反引号都支持
null：空对象标识
undefined：变量声明但未赋值的默认值

4.2 typeof 判断数据类型

通过 typeof 运算符可以检测变量存储的数据类型：

复制代码

let num = 20;
alert(typeof num); // 输出number

4.3 模板字符串（反引号 `````）

使用反引号包裹字符串，通过${变量}嵌入数据，不需要大量+拼接，可读性大幅提升。

复制代码

let name = "Tom";
let age = 18;
// 传统拼接方式
console.log("大家好，我是"+name+"，今年"+"岁");
// 模板字符串简化写法
console.log(`大家好，我是${name}，今年${age}岁`);

4.4 小节小结

日常数据存储优先使用 5 种基础类型，反引号模板字符串是拼接字符串首选写法。

五、JS 三种函数定义方式

函数是封装重复业务代码的代码块，实现代码复用，JS 弱类型不需要声明形参、返回值类型。

5.1 标准命名函数

复制代码

function add(a, b) {
    return a + b;
}
let res = add(10, 20);
alert(res);

5.2 函数表达式（匿名函数赋值）

复制代码

let add = function(a, b) {
    return a + b;
}

5.3 箭头函数（简化匿名函数）

复制代码

let add = (a, b) => {
    return a + b;
}

5.4 小节小结

简单短逻辑用箭头函数，完整复杂业务逻辑使用标准命名函数。

六、自定义对象与 JSON 转换

6.1 自定义对象

JS 对象使用键值对存储属性与方法，提供两种书写格式：

复制代码

// 完整写法
let user = {
    name: "Tom",
    age: 20,
    sing: function () {
        alert("唱歌");
    }
}
// 方法简写（推荐）
let user2 = {
    name: "Jack",
    sing() {
        alert("唱歌");
    }
}
// 对象调用
console.log(user.name);
user.sing();

6.2 JSON 介绍

JSON 全称 JS 对象标记法，是前后端网络数据传输标准格式：

JS 对象：key 可以不加双引号，支持方法；
JSON 字符串：所有 key 必须双引号，只能存基础数据，不能写函数；

6.3 JSON 互转核心 API

JSON.stringify(对象)：JS 对象转为 JSON 字符串JSON.parse(json字符串)：JSON 字符串转回 JS 对象

复制代码

let obj = {name:"小李",age:20};
let jsonStr = JSON.stringify(obj);
let newObj = JSON.parse(jsonStr);

6.4 小节小结

JS 对象用于本地存储数据，JSON 专门用于接口前后端数据交互。

七、上篇全文总结

网页三层架构：HTML 结构、CSS 样式、JS 交互；JS 分为 ES 语法、BOM、DOM 三大模块；2 JS 引入：内部 script 标签、外部独立 JS 文件，推荐写在 body 末尾；3 变量常量：let 可修改，const 固定不可重赋值，var 老旧语法弃用；4 5 大基础数据类型，typeof 检测类型，反引号模板字符串简化拼接；5 三种函数写法，封装重复代码实现复用；6 自定义对象存储属性方法，JSON 是网络传输标准，掌握两个转换方法。

上篇拓展练习

使用普通拼接、模板字符串两种方式输出个人信息；
分别编写普通函数、箭头函数实现两数相加；
自定义用户对象，完成对象与 JSON 互相转换打印测试。

上篇入门面试高频考点

1 HTML、CSS、JavaScript 三者各自作用；2 let 与 const 的核心区别；3 JS 三种函数写法区别；4 JS 对象和 JSON 的差异，两个转换 API。

当前文件内容过长，豆包只阅读了前 52%。