小封鸭

JavaScript常用API-更新中

Sun, 18 Oct 2026 07:13:35 GMT

记录一些JavaScript中经常用到的一些API，方便后续可以快速查看，如字符串、数组的方法，对象的遍历，还有后续ES6的常用API

字符串方法#

方法	功能
`charAt()`	得到指定位置的字符
`substring()`	提取子串，从a开始到b
`substr()`	提取子串，从a开始，长度为b
`slice()`	提取子串，从a开始到b结束（不包括b处）
`toUpperCase()`	将字符串转换为大写
`toLowerCase()`	将字符串转换为小写
`indexOf()`	检索字符串，返回指定内容首次出现的位置

charAt()方法

charAt()方法可以得到指定位置的字符

1
'我喜欢JS，我也喜欢HTML'.charAt(0) // '我'
2
'我喜欢JS，我也喜欢HTML'.charAt(11) // 'T'
3
'我喜欢JS，我也喜欢HTML'.charAt(74) // ''

substring()、substr()和slice()

substring(a, b) 方法得到从a开始到b结束（不包括b处）的子串

1
'我喜欢JS，我也喜欢HTML'.substring(3, 5) // 'JS'
2
'我喜欢JS，我也喜欢HTML'.substring(10, 14) // 'HTML'

substring(a) 方法如果省略第二个参数，返回的子串会一直到字符串的结尾
```
1
'我喜欢JS，我也喜欢HTML'.substring(6) // '我也喜欢HTML'
```
substring(a, b) 中，a可以大于b，数字顺序将自动调整为小数在前
```
1
'我喜欢JS，我也喜欢HTML'.substring(5, 3) // 'JS'
```
substr (a, b)中，将得到从a开始的长度为b的子串
```
1
'我喜欢JS，我也喜欢HTML'.substr(3, 2) // 'JS'
```

substr(a, b)中，b可以省略，表示到字符串结尾

1
'我喜欢JS，我也喜欢HTML'.substr(3) // 'JS，我也喜欢HTML

substr (a, b)中，a可以是负数，表示倒数位置

1
'我喜欢JS，我也喜欢HTML'.substr(-4, 2) // HT'

slice(a, b)方法得到从a开始到b结束（不包括b处）的子串
```
1
'我喜欢JS，我也喜欢HTML'.slice(3, 5) // 'JS'
```

slice(a, b)的参数a可以是负数

1
'我喜欢JS，我也喜欢HTML'.slice(-4, -1) // 'HTM'

slice(a, b)中，参数a必须小于参数b

1
'我喜欢JS，我也喜欢HTML'.slice(5, 2) // ''

对比总结

substring(a, b)和slice(a, b)功能基本一致，都是得到从a开始到b 结束（不包括b）的子串，区别：

① substring()可以自动交换两个参数位置，而slice()不行；

②slice()的参数a可以是负数，而substring()不行。
substr(a, b)中参数b是子串长度，而不是位置编号

toUpperCase()和toLowerCase()

toUpperCase() 转为大写

toLowerCase() 转为小写

1
'i love you'.toUpperCase(); // 'I LOVE YOU'
2
'IMOOC'.toLowerCase(); // 'imooc'

indexOf()

indexOf()方法返回某个指定的字符串值在字符串中首次出现的位置

如果要检索的字符串值没有出现，则该返回 -1

1
'abcdeb'.indexOf('b') // 1
2
'abcdeb'.indexOf('de') // 3
3
'abcdeb'.indexOf('m') // -1

数组的常用方法#

数组提供大量内置方法，主要包括添加、删除、查找、遍历、排序和转换。这里只列举一些常用的，在ES6语法中会再增加一些（slice、splice、split这三个英文非常像，初学很可能弄混，这三个是完全不一样功能的，split是字符串的方法，数组可以通过join转字符串，字符串可以使用split转为数组）

添加与删除：这5个是最基础的，splice是功能最多的，push和pop是开发中最常用的

方法	作用	是否修改原数组
`push()`	末尾添加元素	是
`pop()`	删除末尾元素	是
`unshift()`	开头添加元素	是
`shift()`	删除开头元素	是
`splice()`	添加、删除或替换指定位置元素	是

push()方法：（末尾追加）

push()方法用来在数组末尾推入新项，参数就是要推入的项
如果要推入多项，可以用逗号隔开

调用push()方法后，数组会立即改变，不需要赋值

1
var arr = [1, 2, 3];
2

3
arr.push(4);
4
console.log(arr); // [1, 2, 3, 4]
5

6
arr.push(5, 6);
7
console.log(arr); // [1, 2, 3, 4, 5, 6]

pop()方法：（删除末尾）

与push()相反，pop()方法用来删除数组中的最后一项

pop()方法不仅会删除数组末项，而且会返回被删除的项

1
var arr = [1, 2, 3, 4];
2

3
var item = arr.pop();
4

5
console.log(arr);  // [1, 2, 3]
6
console.log(item);  // 4

unshift()方法：（头部插入）

unshift()方法用来在数组头尾插入新项，参数就是要插入的项
如果要插入多项，可以用逗号隔开

调用unshift()方法后，数组会立即改变，不需要赋值

1
var arr = [2, 3, 4];
2

3
arr.unshift(1);
4
console.log(arr); // [1, 2, 3, 4]
5

6
arr.unshift(-1, 0);
7
console.log(arr); // [-1, 0, 1, 2, 3, 4]

shift()方法：（删除头部）

与unshift()相反，shift()方法用来删除数组中下标为0 的项

shift()方法不仅会删除数组末项，而且会返回被删除的项

1
var arr = [10, 20, 30];
2

3
var item = arr.shift();
4

5
console.log(arr); // [20, 30]
6
console.log(item); // 10

splice()方法

splice()方法第一个参数是从哪个下标开始，第二个参数是删除多少个项

1
arr.splice(起始下标, 删除个数)

1
var arr = ['A','B','C','D','E','F','G'];
2
arr.splice(3,2,'X','Y','Z');
3
console.log(arr);
4
// 下标3开始，连续替换2项；这种说法错误的
5
// 准确是：下标3开始，连续删除2项，然后插入新元素
6
// [ 'A', 'B', 'C', 'X', 'Y', 'Z','F', 'G']

splice()方法可以用于在指定位置插入新项（第二个参数设置0，就没有删除项）

1
arr.splice(起始下标, 0, 新元素)

1
var arr = [1, 2, 5, 6];
2
arr.splice(2, 0, 3, 4);
3
console.log(arr); // [1, 2, 3, 4, 5, 6]

splice()方法可以用于删除指定项；result返回被删除的项

1
arr.splice(起始下标, 删除个数)

1
var arr = [10, 20, 30, 40];
2
var result = arr.splice(1, 1);
3
console.log(arr);    // [10, 30, 40]
4
console.log(result); // [20]

splice()方法会以数组形式返回被删除的项

查找与判断：

方法	作用	返回值
`indexOf()`	查找元素首次出现的位置	下标或 -1
`lastIndexOf()`	查找元素最后出现的位置	下标或 -1
`includes()`	判断是否包含元素	布尔值
`find()`	查找第一个符合条件的元素	元素或 undefined
`findIndex()`	查找第一个符合条件的元素下标	下标或 -1
`some()`	是否至少一个元素符合条件	布尔值
`every()`	是否所有元素符合条件	布尔值

indexOf()方法的功能是搜索数组中的元素，并返回它所在的位置，如果元素不存在，则返回-1

1
var arr = ['A', 'B', 'C', 'D'];
2

3
console.log(arr.indexOf('B')); // 1
4
console.log(arr.indexOf('Z')); // -1

includes()方法的功能是判断一个数组是否包含一个指定的值，返回布尔值

1
var arr = ['A', 'B', 'C'];
2
console.log(arr.includes('B')); // true
3
console.log(arr.includes('Z')); // false

截取、合并与转换

方法	作用	是否修改原数组
`slice()`	截取数组片段	否
`concat()`	合并数组	否
`join()`	将数组连接成字符串	否
`reverse()`	反转数组	是
`sort()`	对数组排序	是
`flat()`	展平嵌套数组	否

slice()方法：slice()方法用于得到子数组，slice(a, b)截取的子数组从下标为a的项开始，到下标为 b（但不包括下标为b的项）结束

标准写法

1
var arr = ['A','B','C','D','E','F'];
2

3
var result = arr.slice(1, 4);
4

5
console.log(result); // ['B','C','D'] 从下标 1 开始；（B）到下标 4 结束（不包含4）所以是：B、C、D
6
console.log(arr);    // ['A','B','C','D','E','F']

slice()如果不提供第二个参数，则表示从指定项开始，提取所有后续所有项作为子数组

1
var arr = ['A','B','C','D','E','F'];
2

3
var result = arr.slice(2);
4

5
console.log(result); // ['C','D','E','F']

slice(a, b)方法不会更改原有数组，返回的是截取的数组

1
var arr = [1, 2, 3, 4];
2

3
var result = arr.slice(1, 3);
4

5
console.log(result); // [2, 3]
6
console.log(arr);    // [1, 2, 3, 4]  ✔ 原数组不变

slice()方法的参数允许为负数，表示数组的倒数第几项

1
var arr = ['A','B','C','D','E','F'];
2

3
var result = arr.slice(-3);
4

5
console.log(result); // ['D','E','F']

concat()方法

concat()方法可以合并连结多个数组

concat()方法不会改变原数组

1
var arr1 = [1, 2, 3, 4];
2
var arr2 = [5, 6, 7, 8];
3
var arr3 = [9, 10, 11];
4
var arr = arr1.concat(arr2 , arr3);
5
console.log(arr);
6
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]

join()方法

数组的join()方法可以使数组转为字符串；字符串的split() 方法可以使字符串转为数组。
join()的参数表示以什么字符作为连接符，如果留空则默认以逗号分隔，如同调用toString()方法
```
1
var arr = ['A', 'B', 'C'];
2

3
var str = arr.join('-');
4

5
console.log(str); // "A-B-C"
```

split()的参数表示以什么字符拆分字符串，一般不能留空

1
var str = "A-B-C";
2
var arr = str.split('-');
3
console.log(arr); // ["A", "B", "C"]

reverse()方法

reverse()方法用来将一个数组中的全部项顺序置反

1
var arr = ["A","B","C","D"];
2
arr.reverse();
3
console.log(arr); // ["D","C","B","A"]

Vue.js初识

Sun, 25 Oct 2026 07:58:27 GMT

sass基础语法

Sun, 25 Oct 2026 06:57:41 GMT

Sass 是一种 CSS 预处理器，在 CSS 基础上提供了变量、嵌套、模块化、Mixin（混入）、运算和条件判断等功能，能够提高 CSS 的开发效率与可维护性。Sass 代码需要经过编译，最终转换为浏览器能够识别的普通 CSS。

Sass 环境搭建#

Sass 与 SCSS 的区别#

Sass 提供两种语法格式：推荐使用 SCSS，因为它与普通 CSS 的语法基本一致。

对比	SCSS	Sass
文件后缀	`.scss`	`.sass`
大括号 `{}`	需要	不需要
分号 `;`	需要	不需要
CSS 语法兼容性	兼容 CSS	使用缩进语法
推荐程度	推荐	较少使用

安装 Sass#

首先需要安装 Node.js，然后通过 npm 安装 Sass。

1
npm install -d sass

编译 SCSS 文件#

创建两个文件：

1
project/
2
├── index.html
3
├── style.scss
4
└── style.css

编写 style.scss：

1
$primary-color: #409eff;
2

3
.box {
4
  width: 200px;
5
  height: 200px;
6
  background-color: $primary-color;
7
}

执行编译：

1
npx sass style.scss style.css

生成的 style.css：

1
.box {
2
  width: 200px;
3
  height: 200px;
4
  background-color: #409eff;
5
}

在 HTML 中引入：

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

浏览器只能直接使用编译后的 CSS。

自动监听文件变化#

1
npx sass --watch style.scss:style.css

修改 SCSS 文件后，Sass 会自动重新编译 CSS。

如果需要监听整个目录：

1
npx sass --watch scss:css

将 scss 目录中的样式编译到 css 目录。

基本语法#

注释#

1
// 单行注释，不会输出到 CSS
2

3
/* 多行注释，通常会输出到非压缩 CSS */

基本嵌套#

普通 CSS：

1
.nav {
2
  background: #333;
3
}
4
.nav a {
5
  color: white;
6
}
7
.nav a:hover {
8
  color: red;
9
}

SCSS：

1
.nav {
2
  background: #333;
3
  a {
4
    color: white;
5
    &:hover {
6
      color: red;
7
    }
8
  }
9
}

其中 & 表示当前嵌套规则的父选择器。

父选择器 `&`#

1
.button {
2
  color: #333;
3

4
  &:hover {
5
    color: red;
6
  }
7

8
  &.active {
9
    color: blue;
10
  }
11

12
  &--primary {
13
    background: #409eff;
14
  }
15

16
  .icon {
17
    width: 20px;
18
  }
19
}

展开收起

编译后的选择器：

SCSS	CSS
`&:hover`	`.button:hover`
`&.active`	`.button.active`
`&--primary`	`.button--primary`
`.icon`	`.button .icon`

属性嵌套#

SCSS 还支持对具有相同前缀的 CSS 属性进行嵌套。实际开发中，普通属性写法通常更直观，按需使用即可。

1
.box {
2
  font: {
3
    size: 16px;
4
    weight: bold;
5
    family: Arial;
6
  }
7

8
  margin: {
9
    top: 10px;
10
    bottom: 20px;
11
  }
12
}

编译后：

1
.box {
2
  font-size: 16px;
3
  font-weight: bold;
4
  font-family: Arial;
5
  margin-top: 10px;
6
  margin-bottom: 20px;
7
}

变量入门#

定义与使用变量#

Sass 使用 $ 定义变量。

1
$primary-color: #409eff;
2
$font-size: 16px;
3
$border-radius: 8px;
4

5
.button {
6
  background: $primary-color;
7
  font-size: $font-size;
8
  border-radius: $border-radius;
9
}

编译后：

1
.button {
2
  background: #409eff;
3
  font-size: 16px;
4
  border-radius: 8px;
5
}

变量适合统一管理项目中的颜色、字体大小、间距和圆角等属性。

变量作用域#

局部变量通常只在当前作用域内有效。

1
$color: red; // 全局变量
2
.box {
3
  $color: blue; // 局部变量
4

5
  color: $color;
6
}
7
.title {
8
  color: $color;
9
}

编译后：

1
.box {
2
  color: blue;
3
}
4
.title {
5
  color: red;
6
}

变量运算#

1
$width: 200px;
2
$gap: 20px;
3

4
.box {
5
  width: $width + $gap;
6
  padding: $gap * 2;
7
  margin: $gap - 5px;
8
}

编译后：

1
.box {
2
  width: 220px;
3
  padding: 40px;
4
  margin: 15px;
5
}

Sass 变量与 CSS 变量#

对比	Sass 变量	CSS 变量
声明	`$color: red;`	`--color: red;`
使用	`$color`	`var(--color)`
生效阶段	编译时	浏览器运行时
JS 动态修改	不支持直接修改	支持
主要用途	样式复用、编译配置	动态主题、实时样式变化

嵌套，代码拆分及引入#

当项目样式较多时，可以将 SCSS 拆分为多个文件，按照功能管理。

文件拆分#

1
project/
2
├── index.html
3
├── scss/
4
│   ├── _variables.scss
5
│   ├── _mixins.scss
6
│   ├── _reset.scss
7
│   ├── _index.scss
8
│   └── main.scss
9
└── css/
10
    └── main.css

以 _ 开头的 SCSS 文件称为 Partial（局部文件），一般作为模块供其他文件加载，不单独编译成 CSS。

@use 加载模块#

1
_variables.scss
2
$primary-color: #409eff;
3
$font-size: 16px;
4
main.scss
5
@use "variables";
6

7
.box {
8
  color: variables.$primary-color;
9
  font-size: variables.$font-size;
10
}

可以使用 as 定义别名：

1
@use "variables" as v;
2

3
.box {
4
  color: v.$primary-color;
5
}

也可以使用 as *，省略命名空间：

1
@use "variables" as *;
2

3
.box {
4
  color: $primary-color;
5
}

实际开发中推荐保留命名空间，避免不同模块之间出现命名冲突。

@forward 转发模块#

假设存在两个模块：

1
_variables.scss
2
$primary-color: #409eff;
3
_mixins.scss
4
@mixin flex-center {
5
  display: flex;
6
  justify-content: center;
7
  align-items: center;
8
}

可以通过 _index.scss 统一转发：

1
@forward "variables";
2
@forward "mixins";

然后在 main.scss 中使用：

1
@use "index" as s;
2

3
.box {
4
  color: s.$primary-color;
5
  @include s.flex-center;
6
}

@use、@forward 和 @import 的区别#

指令	功能	推荐情况
`@use`	加载模块并使用其成员	推荐
`@forward`	转发模块的公共成员	推荐
`@import`	旧式模块导入方式	已废弃

新项目应当使用 @use 和 @forward 管理 SCSS 模块。

Mixin混入的使用#

Mixin 用于定义可以重复使用的样式代码块，类似于函数，可以传递参数。

定义和调用 Mixin#

使用 @mixin 定义，使用 @include 调用。

1
@mixin flex-center {
2
  display: flex;
3
  justify-content: center;
4
  align-items: center;
5
}
6

7
.box {
8
  @include flex-center;
9
}
10

11
.container {
12
  @include flex-center;
13
}

编译后：

1
.box {
2
  display: flex;
3
  justify-content: center;
4
  align-items: center;
5
}
6

7
.container {
8
  display: flex;
9
  justify-content: center;
10
  align-items: center;
11
}

带参数的 Mixin#

1
@mixin flex-center($gap) {
2
  display: flex;
3
  justify-content: center;
4
  align-items: center;
5
  gap: $gap;
6
}
7

8
.box {
9
  @include flex-center(10px);
10
}
11

12
.container {
13
  @include flex-center(20px);
14
}

默认参数#

1
@mixin box-style(
2
  $color: #409eff,
3
  $radius: 8px
4
) {
5
  background: $color;
6
  border-radius: $radius;
7
}
8

9
.box1 {
10
  @include box-style;
11
}
12

13
.box2 {
14
  @include box-style(red, 12px);
15
}

展开收起

也可以通过参数名指定传参：

1
.box3 {
2
  @include box-style($radius: 20px);
3
}

@content 插入样式代码块#

@content 是 Mixin 中的重要语法，表示接收并插入调用时传入的样式代码块。

1
@mixin hover {
2
  &:hover {
3
    @content;
4
  }
5
}
6

7
.button {
8
  color: #333;
9
  @include hover {
10
    color: red;
11
    background: #eee;
12
  }
13
}

编译后：

1
.button {
2
  color: #333;
3
}
4

5
.button:hover {
6
  color: red;
7
  background: #eee;
8
}

@content 常用于封装媒体查询、伪类等需要传入不同样式的场景。

媒体查询与Mixin 的配合使用#

使用 Mixin 可以将媒体查询中的断点统一封装，避免在多个地方重复编写断点。

普通媒体查询#

1
.container {
2
  width: 100%;
3
  padding: 10px;
4

5
  @media (min-width: 768px) {
6
    padding: 20px;
7
  }
8

9
  @media (min-width: 1200px) {
10
    padding: 30px;
11
  }
12
}

这种写法可以直接使用，但当项目中的媒体查询较多时，可以使用 Mixin 统一管理。

封装媒体查询 Mixin#

_mixins.scss

1
@mixin respond($device) {
2
  @if $device == tablet {
3
    @media (min-width: 768px) {
4
      @content;
5
    }
6
  } @else if $device == desktop {
7
    @media (min-width: 1200px) {
8
      @content;
9
    }
10
  }
11
}

核心语法：

语法	功能
`@mixin`	定义混入
`@include`	调用混入
`@if`	条件判断
`@else if`	多条件判断
`@content`	插入调用时传入的样式

使用媒体查询 Mixin#

main.scss

1
@use "mixins" as m;
2

3
.container {
4
  width: 100%;
5
  padding: 10px;
6

7
  @include m.respond(tablet) {
8
    padding: 20px;
9
  }
10

11
  @include m.respond(desktop) {
12
    padding: 30px;
13
  }
14
}

编译后：

1
.container {
2
  width: 100%;
3
  padding: 10px;
4
}
5

6
@media (min-width: 768px) {
7
  .container {
8
    padding: 20px;
9
  }
10
}
11

12
@media (min-width: 1200px) {
13
  .container {
14
    padding: 30px;
15
  }
16
}

展开收起

实际案例：响应式网格布局#

HTML：

1
<div class="card-list">
2
  <div class="card">卡片1</div>
3
  <div class="card">卡片2</div>
4
  <div class="card">卡片3</div>
5
  <div class="card">卡片4</div>
6
</div>

SCSS：

1
@use "mixins" as m;
2

3
.card-list {
4
  display: grid;
5
  grid-template-columns: 1fr;
6
  gap: 16px;
7

8
  // 平板：两列
9
  @include m.respond(tablet) {
10
    grid-template-columns: repeat(2, 1fr);
11
  }
12

13
  // 桌面：四列
14
  @include m.respond(desktop) {
15
    grid-template-columns: repeat(4, 1fr);
16
  }
17
}
18

19
.card {
20
  padding: 20px;
21
  color: white;
22
  background: #409eff;
23
  border-radius: 8px;
24
  text-align: center;
25
}

展开收起

微信小程序常用Api

Fri, 23 Oct 2026 13:12:56 GMT

本文学习微信小程序的常用API，内容整体分为配置、逻辑、样式、结构4个部分，也可以分为全局和页面级别

目录结构#

小程序项目可以分为两个级别：全局和页面级别，全局可以配置小程序整体信息，页面级别主要由配置、逻辑、样式、结构4个部分组成，详细：官方文档

全局配置文件#

使用全局配置制作菜单栏

app.json

1
  "tabBar": {
2
    "list": [{
3
      "pagePath": "pages/index/index",
4
      "text": "首页"
5
    }, {
6
      "pagePath": "pages/logs/logs",
7
      "text": "日志"
8
    }]
9
  },

详细的全局配置文件：官方文档，总体的配置也很简单，文档可以这样看，配置项就是整体可以配置的内容，可以配置什么功能，常用的有entryPagePath、pages、window、tabBar和networkTimeout，下面的就是对配置项的详细描述

页面级别配置文件#

每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

1
{
2
  "navigationBarBackgroundColor": "#ffffff",
3
  "navigationBarTextStyle": "black",
4
  "navigationBarTitleText": "微信接口功能演示",
5
  "backgroundColor": "#eeeeee",
6
  "backgroundTextStyle": "light"
7
}

完整配置项说明请参考小程序页面配置。

全局逻辑中的生命周期函数#

关于全局逻辑中的生命周期函数可以参考文档，除了生命周期函数的说明外，文档也列举了一些推荐和不推荐写法，如现在并不推荐使用 App() 中的参数，而是使用对应的 wx 调用来代替。文档地址

onLaunch：小程序启动的时候自动执行，带一个参数；小程序初始化完成时触发，全局只触发一次。这里需要注意，如果短时间内多次打开是执行一次，如果长时间再打开，这时候onLaunch就会重新执行一次

app.js

1
App({
2
  onLaunch(options){
3
    console.log('onLaunch',options);
4
  }
5
})

参数值可以参考：官方文档，也可以使用 wx.getLaunchOptionsSync 获取

onShow：小程序启动，或从后台进入前台显示时触发。一样也会带一个参数，onShow只要是退出重新进入小程序都会执行的一个函数，无论时间间隔的长短，这是与onLaunch区别，注意：onShow是onLaunch后的一个函数，也就是onLaunch是先执行，后才执行onShow

1
 onShow(options){
2
    console.log('onShow',options);
3
  },

参数值可以参考：官方文档，也可以使用 wx.onAppShow 获取

onHide：小程序从前台进入后台时触发。一样也有一个参数，这个参数可以了解用户退出后的去向，可以和onShow配对理解。一个显示一个退出

1
 onHide(options){
2
  console.log('onHide',options);
3
 }

onError：小程序发生脚本错误或 API 调用报错时触发。

1
// 不推荐的写法
2
App({
3
  onLaunch(options) {
4
    // 在启动时执行
5
  },
6
  onError(msg) {
7
    // 发生脚本错误时执行
8
    console.log(msg)
9
  },
10
})
11
// 推荐的写法
12
App()
13

14
wx.onError(function () {
15
  // 发生脚本错误时执行
16
  console.log(msg)
17
})
18

19
// 在启动时执行
20
var options = wx.getLaunchOptionsSync()

展开收起

推荐写法中，原来放在 onLaunch() 里的初始化代码，可以直接放在 app.js 顶层执行，也可以封装成初始化函数后主动调用。

app.js展开收起

1
App();
2

3
// 监听全局错误
4
wx.onError((msg) => {
5
  console.log('全局错误：', msg);
6
});
7
// 获取启动参数
8
const options = wx.getLaunchOptionsSync();
9
// 初始化用户信息
10
function initUser() {
11
  console.log('初始化用户信息');
12
}
13
// 封装启动逻辑
14
function initApp() {
15
  console.log('小程序启动了');
16
  const token = wx.getStorageSync('token');
17
  initUser();
18
  console.log('启动参数', options);
19
}
20

21
// 主动执行初始化
22
initApp();

展开收起

全局方法及数据的定义及调用方式#

全局的方法，怎么在页面级别的js中调用呢，小程序提供了一个getApp的接口，需要注意的是，这里的sayHello需要写在App内，也就是不能用推荐写法，当然现在这种写法也不推荐了，可以通过模块化来实现同样功能，文档地址

app.js

1
App({
2
   sayHello(){
3
    console.log('hello word');
4
  }
5
});

pages\index\index.js

1
const app = getApp()
2
Page({
3
onLoad(){
4
  app.sayHello()
5
}
6
})

页面级别的生命周期函数#

在页面运行的某个时刻执行的函数，其实页面级别的生命周期函数和全局的差不多，只不过语义上有差别，页面级别有6个生命周期函数，具体可以参考文档：官方文档

onLoad：页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。

onShow：页面显示/切入前台时触发。

onReady：页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互

onHide：页面隐藏/切入后台时触发。如 wx.navigateTo 或底部 tab 切换到其他页面，小程序切入后台等。

onUnload：页面卸载时触发。如wx.redirectTo或wx.navigateBack到其他页面时

onRouteDone：路由动画完成时触发。如 wx.navigateTo 页面完全推入后或 wx.navigateBack 页面完全恢复时。

除了上面6个外，还有很多其他在特定操作下自动触发的函数，如下拉刷新、用户点击右上角转发，用户点击右上角转发到朋友圈等等

页面逻辑层数据的定义及与页面的串联#

事件的文档：官方文档

数据绑定：

1
Page({
2
  data:{
3
    num:'1'
4
  },
5
})

1
<view>{{num}}</view>

点击事件：

1
changename(){
2
    console.log('changename');
3
  }

1
<view class="container" bind:tap="changename">{{num}}</view>

点击改变数据

1
Page({
2
  data:{
3
    num:'1'
4
  },
5
  changename(){
6
    console.log('changename');
7
   this.setData({
8
    num:'2'
9
   })
10
  }
11
})

1
<view class="container" bind:tap="changename">{{num}}</view>

逻辑层中的 API#

官方API文档：文档 api调用一般都是通过wx.调用的

1
wx.showModal({
2
    title: '提示',
3
    content: '这是一个模态弹窗',
4
})
5
wx.request({
6
    url:'https://www.fastmock.site/mock/fdf9557ad5613aec6428d08d90f25b45/weixin/api/getDate',
7
    success(res){
8
        console.log(res);
9
    }
10
})

视图层的数据绑定#

视图层包括WXML和WXSS，可以理解为HTML5和CSS3，只不过一些属性可能不支持；

在小程序没有DOM的概念，有组件的概念，view是最小的组件，可以理解为div

实现判断，点击显示隐藏功能：

1
<view class="flex">
2
 <button  bind:tap="changename">{{msg}}</button>
3
  <view wx:if="{{!show}}">hello</view>
4
  <view hidden="{{show}}">hidden</view>
5
  <checkbox checked="{{true}}">选择框</checkbox>
6
</view>

1
Page({
2
  data:{
3
    msg:'点击显示',
4
    show:true
5
  },
6
  changename(){
7
    if(!this.data.show){
8
      this.setData({
9
        msg:'点击显示',
10
        show:true
11
         })
12
         return
13
    }
14
 this.setData({
15
  msg:'点击隐藏',
16
  show:false
17
   })
18
  }
19
})

展开收起

1
.flex{
2
  display: flex;
3
  flex-direction: column;
4
  justify-content: center;
5
  align-items: center;
6
}

wx，但是hidden是隐藏的意思，true就是隐藏，这个和vue的逻辑是相反的

视图层循环展示内容#

循环语句

1
<view class="flex">
2
 <view wx:for="{{list}}">
3
 {{item.title}}
4
 {{item.dec}}
5
 </view>
6

7
</view>

1
Page({
2
  data:{
3

4
    list:[
5
      {
6
        title:'我是标题1',
7
        dec:'描述1'
8
      },
9
      {
10
        title:'我是标题2',
11
        dec:'描述2'
12
      }, {
13
        title:'我是标题3',
14
        dec:'描述3'
15
      }
16
    ]
17
  },
18
})

展开收起

视图层代码的拆分#

这里是页面嵌入：include 不推荐

1
<view class="flex">
2
 <view>header</view>
3
<include src="./content.wxml" />
4
<view>footer</view>
5
</view>

1
<view>content1</view>
2
<view>{{content}}</view>

include其实就把页面嵌入到另外页面中，这里{{content}}也是可以正常使用index.js定义的数据的

引入其他文件中的子模板：<template> 和 <import> 推荐

1
<view class="flex">
2
 <view>header</view>
3
<import src="./content.wxml"/>
4
<template is="content" data="{{ content }}"/>
5
<view>footer</view>
6
</view>

1
<template name="content">
2
  <view>content1</view>
3
<view>{{content}}</view>
4
</template>

组件&样式#

页面是由一个一个组件组成的，对于一些样式基本相同的组件，就可以封装成一个组件，供其他页面使用文档地址：自定义组件

样式尺寸单位：

布局：使用 %、rpx、vw 等相对单位，实现自适应。
字体：优先使用 px，保证字体大小稳定。
媒体查询：针对平板、PC 等大屏幕，适当调整字体大小和布局。
Flex / Grid：配合相对单位，实现更加灵活的响应式布局。

HTML、CSS和JS中的性能优化

Fri, 23 Oct 2026 05:47:15 GMT

图片优化#

图片通常是网页中体积较大的资源，优化图片可以减少网络传输量，提高页面加载速度。

1. 选择合适的图片格式#

格式	特点	适用场景
JPEG / JPG	有损压缩，兼容性好	照片、复杂图片
PNG	支持透明，无损压缩	需要无损质量的图片
WebP	支持有损、无损压缩及透明	网页图片，推荐
AVIF	通常具有较高压缩效率	对体积要求较高的图片
SVG	矢量图，放大不失真	图标、Logo、简单图形

推荐：普通网页图片优先考虑 WebP、AVIF，图标和简单矢量图形考虑 SVG。

2. 压缩图片体积#

使用图片压缩工具减少文件大小。
避免使用尺寸远大于实际显示区域的图片。
根据图片用途调整压缩质量。
使用响应式图片，为不同屏幕提供不同尺寸的资源。

例如：

1
<img
2
  src="image-800.webp"
3
  srcset="
4
    image-400.webp 400w,
5
    image-800.webp 800w,
6
    image-1200.webp 1200w
7
  "
8
  sizes="(max-width: 600px) 100vw, 800px"
9
  alt="示例图片"
10
/>

浏览器会结合显示尺寸、设备像素密度等因素选择合适的图片。

3. 其他图片优化手段#

懒加载：非首屏图片滚动到附近时再加载。
预加载：提前获取首屏关键图片。
CDN：使用内容分发网络加速图片传输。
设置宽高：提前为图片预留空间，减少布局偏移。
CSS 替代图片：简单渐变、阴影、边框等效果可以直接用 CSS 实现。

1
<img
2
  src="image.webp"
3
  width="800"
4
  height="450"
5
  alt="示例图片"
6
/>

动画优化#

动画优化的核心是：尽量减少布局计算和绘制开销，让动画保持流畅。

1. 优先使用 transform 和 opacity#

不同 CSS 属性对渲染性能的影响不同。

属性	可能触发的渲染工作	推荐程度
width、height	布局、绘制、合成	尽量避免频繁动画
top、left	布局、绘制、合成	尽量避免频繁动画
background-color	绘制、合成	可以使用
transform	通常只需合成	推荐
opacity	通常只需合成	推荐

例如：

1
.box {
2
  transition: transform 0.3s ease;
3
}
4

5
.box:hover {
6
  transform: translateX(100px);
7
}

相比不断修改 left，使用 transform 通常具有更好的动画性能。

2. 使用 requestAnimationFrame#

需要通过 JavaScript 实现动画时，可以使用 requestAnimationFrame()。

1
const box = document.querySelector('.box');
2

3
let x = 0;
4

5
function animate() {
6
  x += 1;
7

8
  box.style.transform = `translateX(${x}px)`;
9

10
  if (x < 300) {
11
    requestAnimationFrame(animate);
12
  }
13
}
14

15
requestAnimationFrame(animate);

展开收起

其优势：

让动画更新与浏览器绘制节奏协调。
页面处于后台时，通常会暂停回调。
避免使用固定 setInterval 频率造成不必要的动画更新。

3. 其他动画优化#

避免同时执行大量复杂动画。
不要在动画循环中频繁交替读取、修改布局属性。
对复杂动画可适当使用 will-change，但不要滥用。
对持续动画优先考虑 CSS Animation 或 Web Animations API。
为需要减少动态效果的用户支持 prefers-reduced-motion。

CSS 优化#

CSS 优化主要是减少文件体积、降低样式计算和渲染成本。

1. 精简 CSS 文件#

删除未使用的样式。
合并重复声明。
使用生产环境 CSS 压缩。
避免引入大量实际用不到的 CSS 框架样式。
将非关键页面的样式按需加载。

2. 合理使用 CSS 选择器#

1
/* 不推荐：不必要的复杂嵌套 */
2
.container .content ul li a span {
3
  color: red;
4
}
5

6
/* 推荐：通过 class 定位 */
7
.menu-title {
8
  color: red;
9
}

优先使用语义清晰的 class，减少不必要的深层选择器。

不过，现代浏览器已经对 CSS 选择器进行了大量优化，选择器复杂度通常不是主要性能瓶颈，不必为性能而刻意避免后代选择器等正常写法。

3. 避免频繁触发布局计算#

例如：

1
// 不推荐：反复读取布局，再修改尺寸
2
elements.forEach((element) => {
3
  const width = element.offsetWidth;
4
  element.style.width = `${width + 10}px`;
5
});
6

7
// 推荐：集中读取，再集中修改
8
const widths = elements.map((element) => element.offsetWidth);
9

10
elements.forEach((element, index) => {
11
  element.style.width = `${widths[index] + 10}px`;
12
});

这种做法可以减少浏览器被迫同步计算布局的情况。

4. 其他 CSS 优化#

使用 CSS 变量统一管理重复的设计值。
对复杂、独立组件按需考虑 contain。
对较长的非首屏内容，可以考虑 content-visibility: auto。
动画尽量使用 transform 和 opacity。

DOM 优化#

DOM 优化主要是减少不必要的节点创建、查询和修改操作。

1. 减少 DOM 节点数量#

过多的 DOM 节点会增加浏览器的样式计算、布局和内存开销。

优化方式：

避免无意义的多层标签嵌套。
对大量数据使用分页。
长列表可以使用虚拟列表。
不需要展示的内容尽量不提前生成大量 DOM。

2. 批量操作 DOM#

使用 DocumentFragment 可以先组织节点，再一次性插入页面。

1
const ul = document.querySelector('ul');
2

3
const fragment = document.createDocumentFragment();
4

5
for (let i = 0; i < 1000; i++) {
6
  const li = document.createElement('li');
7
  li.textContent = `第 ${i} 项`;
8

9
  fragment.appendChild(li);
10
}
11

12
ul.appendChild(fragment);

相比每创建一个元素就插入页面，这样可以减少对已连接 DOM 的重复操作。

3. 减少重复查询 DOM#

1
// 不推荐：反复查询相同元素
2
for (let i = 0; i < 100; i++) {
3
  document.querySelector('.box').textContent = i;
4
}
5

6
// 推荐：缓存 DOM 引用
7
const box = document.querySelector('.box');
8

9
for (let i = 0; i < 100; i++) {
10
  box.textContent = i;
11
}

如果不需要每次修改都立即展示结果，还可以只设置一次最终值，进一步减少 DOM 更新。

4. 其他 DOM 优化#

尽量复用已有节点。
避免频繁读取 offsetWidth、getBoundingClientRect() 等布局信息。
对大量数据使用分页或虚拟滚动。
使用 Vue 等框架时，合理使用 key、computed 等机制，避免不必要的组件更新。

事件代理#

事件代理（Event Delegation）也叫事件委托，是指利用事件冒泡，将多个子元素的事件统一交给父元素处理。

1. 为什么使用事件代理？#

假设列表中有 1000 个按钮。

传统方式：

1
document.querySelectorAll('.btn').forEach((btn) => {
2
  btn.addEventListener('click', () => {
3
    console.log('按钮被点击');
4
  });
5
});

这种方式需要为每个按钮注册事件监听器。

使用事件代理：

1
<ul id="list">
2
  <li><button class="btn">按钮1</button></li>
3
  <li><button class="btn">按钮2</button></li>
4
  <li><button class="btn">按钮3</button></li>
5
</ul>
6

7
<script>
8
  const list = document.querySelector('#list');
9

10
  list.addEventListener('click', (event) => {
11
    const btn = event.target.closest('.btn');
12

13
    if (!btn || !list.contains(btn)) return;
14

15
    console.log('按钮被点击');
16
  });
17
</script>

展开收起

无论列表中有多少个按钮，都只需要在父元素上注册一个事件监听器。

2. 事件代理的优点#

减少事件监听器数量。
方便统一管理事件。
动态创建的子元素也能响应事件。
特别适合列表、表格等具有大量相似子元素的场景。

注意：事件代理主要适用于能够冒泡的事件，并不是所有事件都适合委托。

事件稀释#

事件稀释是指减少高频事件处理函数的执行次数，避免频繁执行带来性能问题。

常见方法是防抖（Debounce）和节流（Throttle）。

1. 防抖 Debounce#

在连续触发事件时，只有停止触发一段时间后，才执行事件处理函数。

1
function debounce(fn, delay) {
2
  let timer = null;
3

4
  return function (...args) {
5
    clearTimeout(timer);
6

7
    timer = setTimeout(() => {
8
      fn.apply(this, args);
9
    }, delay);
10
  };
11
}
12

13
// 用户停止输入300ms后才执行
14
input.addEventListener(
15
  'input',
16
  debounce(() => {
17
    console.log('发送搜索请求');
18
  }, 300)
19
);

展开收起

常见场景：搜索框输入、表单验证、输入联想等。

2. 节流 Throttle#

在连续触发事件时，限制函数的执行频率，让函数在指定时间间隔内最多执行一次。

1
function throttle(fn, delay) {
2
  let lastTime = 0;
3

4
  return function (...args) {
5
    const now = Date.now();
6

7
    if (now - lastTime >= delay) {
8
      lastTime = now;
9
      fn.apply(this, args);
10
    }
11
  };
12
}
13

14
// 最多每100ms执行一次
15
window.addEventListener(
16
  'scroll',
17
  throttle(() => {
18
    console.log(window.scrollY);
19
  }, 100),
20
  { passive: true }
21
);

展开收起

常见场景：滚动监听、窗口大小变化、限制按钮连续操作等。

3. 防抖和节流的区别#

对比	防抖	节流
核心思想	停止触发后再执行	按固定时间间隔限制执行
连续触发	不断重新计时	期间仍可定期执行
适用场景	搜索输入	滚动监听

图片懒加载#

图片懒加载（Lazy Loading）是指页面初始化时不立即加载所有图片，而是在图片接近可视区域时再加载。

1. 原生懒加载（推荐）#

现代浏览器已经支持通过 loading 属性实现懒加载。

1
<!-- 非首屏图片 -->
2
<img
3
  src="image.webp"
4
  loading="lazy"
5
  width="800"
6
  height="450"
7
  alt="示例图片"
8
/>

属性值	作用
`eager`	立即加载，默认值
`lazy`	延迟加载，接近可视区域时加载

2. JavaScript 实现懒加载#

如果需要自定义图片加载时机，可以使用 IntersectionObserver API。

1
<img data-src="image.webp" class="lazy-img" alt="示例图片" />
2
const images = document.querySelectorAll('.lazy-img');
3

4
const observer = new IntersectionObserver((entries) => {
5
  entries.forEach((entry) => {
6
    if (!entry.isIntersecting) return;
7

8
    const img = entry.target;
9

10
    img.src = img.dataset.src;
11

12
    observer.unobserve(img);
13
  });
14
}, {
15
  rootMargin: '200px'
16
});
17

18
images.forEach((img) => observer.observe(img));

展开收起

这里的 rootMargin: '200px' 表示可以在图片进入可视区域前提前触发加载。

实际开发中，普通图片优先使用原生 loading="lazy"，只有存在特殊需求时再考虑 IntersectionObserver。

图片预加载#

图片预加载（Preloading）是指提前请求后续需要的图片资源，减少真正展示时的等待时间。

1. HTML 预加载（推荐用于关键图片）#

通过 <link rel="preload"> 提前加载图片。

1
<head>
2
  <link
3
    rel="preload"
4
    as="image"
5
    href="/images/banner.webp"
6
    fetchpriority="high"
7
  />
8
</head>
9

10
<body>
11
  <img
12
    src="/images/banner.webp"
13
    fetchpriority="high"
14
    alt="首页 Banner"
15
  />
16
</body>

展开收起

适用场景：首屏 Banner、关键背景图片等，尤其是浏览器无法在初始 HTML 中直接发现的关键图片。

如果首屏图片已经通过 HTML 中的 <img> 很早被浏览器发现，通常可以直接设置 fetchpriority="high"，不一定需要额外预加载。

2. JavaScript 预加载#

使用 Image 对象提前请求图片资源。

1
function preloadImage(src) {
2
  const img = new Image();
3
  img.src = src;
4

5
  return img;
6
}
7

8
preloadImage('/images/banner-2.webp');

适用场景：轮播图下一张图片、即将打开的图片预览等。

3. 图片懒加载与预加载的区别#

对比	图片懒加载	图片预加载
核心思想	延迟加载	提前加载
主要目的	减少初始请求	减少展示等待
适用场景	非首屏图片	关键图片、即将使用的图片
常用技术	`loading="lazy"`	`rel="preload"`、`Image`
注意事项	首屏关键图片不宜懒加载	避免预加载大量非关键图片

预加载应合理控制数量，否则过多的预加载请求可能争抢网络带宽，反而影响关键资源。

总结#

优化方向	核心优化技术
图片优化	压缩、WebP / AVIF、响应式图片、CDN
动画优化	transform、opacity、requestAnimationFrame
CSS 优化	压缩、按需加载、减少不必要的布局计算
DOM 优化	减少节点、批量操作、虚拟列表
事件代理	事件冒泡、父元素统一监听
事件稀释	防抖、节流
图片懒加载	loading=“lazy”、IntersectionObserver
图片预加载	preload、fetchpriority、Image

对于现代 Vue 3 项目，很多底层 DOM 更新优化已经由框架处理。实际开发时，更值得优先掌握的是：图片格式与加载策略、事件代理、防抖节流、动画性能，以及避免不必要的组件和 DOM 更新。

网络请求过程中性能优化

Fri, 23 Oct 2026 05:46:50 GMT

这里只是列出一些优化方向，优化点，主要是网络请求过程中、页面加载渲染和JavaScript脚本的优化

网络请求过程中的优化点#

减少 HTTP 请求数量#

每次网络请求都会产生一定的开销，可以通过以下方法优化：

合并请求：将多个相关接口合并，减少重复请求。
按需请求：只请求当前页面需要的数据。
避免重复请求：对相同的请求进行缓存或复用。
资源复用：相同的 JS、CSS 等静态资源尽量共享浏览器缓存。

注意：使用 HTTP/2、HTTP/3 后，不必为了减少请求数量而盲目合并所有 JS、CSS 文件。合理拆分资源更有利于缓存和按需加载。

减小资源体积#

资源体积越小，通常下载速度越快。

优化方式	说明
Gzip / Brotli 压缩	压缩 HTML、CSS、JS 等文本资源
代码压缩	删除注释、空格等不必要内容
Tree Shaking	移除未使用的代码
图片压缩	减少图片文件大小
图片格式优化	优先考虑 WebP、AVIF 等现代格式
字体优化	使用 WOFF2、字体子集化等方式
按需打包	避免将所有依赖打包进首页

例如，使用 Vite 构建生产项目时，通常会自动压缩 JS、CSS，并支持 Tree Shaking。

使用浏览器缓存#

利用缓存避免重复下载资源。

缓存类型	说明
强缓存	资源未过期时，直接使用本地缓存，不需要请求服务器确认
协商缓存	向服务器验证资源是否发生变化，未变化时返回 304
应用层缓存	使用内存、Cache API 等保存和复用数据

实际项目中，常见的缓存策略是：

HTML：及时验证是否有更新。
带内容哈希的 JS、CSS、图片：设置较长时间的强缓存。
API 数据：根据业务特点设置缓存策略。

使用 CDN 加速#

CDN（内容分发网络）可以将静态资源分发到不同地区的节点，让用户从距离较近的节点获取资源。

常见的 CDN 资源包括图片、字体、CSS、JavaScript 等。

CDN 的主要作用是减少传输延迟、减轻源站压力、提高资源访问速度。

优化请求时机和优先级#

不是所有资源都需要在页面打开时立即请求。

预加载（preload）：提前加载当前页面即将用到的关键资源。
预连接（preconnect）：提前建立与重要跨域服务器的连接。
懒加载（lazy loading）：非首屏资源等到需要时再加载。
预获取（prefetch）：浏览器空闲或合适时机，提前获取未来可能使用的资源。

1
<!-- 预连接到资源服务器 -->
2
<link rel="preconnect" href="https://cdn.example.com" />
3

4
<!-- 预加载关键字体 -->
5
<link
6
  rel="preload"
7
  href="/fonts/main.woff2"
8
  as="font"
9
  type="font/woff2"
10
  crossorigin
11
/>
12

13
<!-- 非首屏图片懒加载 -->
14
<img src="/images/banner-2.webp" loading="lazy" alt="banner" />

注意：首屏关键图片一般不建议使用 loading="lazy"，否则可能延迟首屏显示。

6. 优化接口请求#

接口本身也会影响页面性能。

避免接口重复调用。
对搜索输入等高频操作使用防抖。
对不再需要的请求使用 AbortController 取消。
使用分页加载，避免一次返回过多数据。
优化后端数据库查询，缩短接口响应时间。

例如搜索建议：

1
let timer;
2

3
function handleSearch(keyword) {
4
  clearTimeout(timer);
5

6
  timer = setTimeout(() => {
7
    fetch(`/api/search?q=${encodeURIComponent(keyword)}`);
8
  }, 300);
9
}

用户连续输入时，不必每输入一个字符就立即发送一次请求。

页面加载渲染和JavaScript脚本中的优化点#

优化页面首次渲染#

浏览器渲染页面的主要过程：

常见优化方式：

优先加载关键资源：首屏需要的 CSS、字体、图片优先加载。
减少阻塞资源：非关键 JavaScript 延迟执行，减少影响首屏渲染的资源。
减少 DOM 数量：避免创建大量无意义的嵌套节点。
使用 SSR / SSG：适合的场景可以提前生成 HTML，减少首屏等待客户端 JavaScript 渲染的时间。
避免不必要的重定向：缩短页面开始加载的等待时间。

尤其需要关注首屏最大内容元素（LCP）的加载时间。

优化 JavaScript 加载与执行#

普通的 JavaScript 脚本可能阻塞 HTML 解析。

可以通过 async、defer 优化。

1
<!-- 普通脚本：执行时阻塞 HTML 解析 -->
2
<script src="a.js"></script>
3

4
<!-- async：并行下载，下载完成后尽快执行 -->
5
<script async src="b.js"></script>
6

7
<!-- defer：并行下载，HTML 解析完成后按顺序执行 -->
8
<script defer src="c.js"></script>
9

10
<!-- ES Module：默认具有类似 defer 的行为 -->
11
<script type="module" src="main.js"></script>

对比	普通脚本	async	defer
并行下载	❌	✅	✅
执行时可能阻塞 HTML 解析	✅	✅	❌
保证多个脚本按文档顺序执行	✅	❌	✅
适用场景	必须立即执行	独立脚本	有依赖关系的脚本

实际开发中，推荐使用 defer 或 ES Module 加载需要操作 DOM 的应用脚本。

减少重排和重绘#

重排（Reflow / Layout）：元素尺寸、位置等发生变化，浏览器需要重新计算布局。
重绘（Repaint）：元素外观发生变化，需要重新绘制相关内容。

常见优化方式：

避免频繁修改元素尺寸、位置。
避免在循环中反复读取布局信息后立即修改样式。
批量修改 DOM 或 CSS。
对动画优先使用 transform、opacity，减少布局计算。

例如：

1
/* 不推荐：动画过程中可能触发布局计算 */
2
.box {
3
  transition: left 0.3s;
4
}
5

6
.box:hover {
7
  left: 100px;
8
}
9

10
/* 推荐：使用 transform 实现位移 */
11
.box {
12
  transition: transform 0.3s;
13
}
14

15
.box:hover {
16
  transform: translateX(100px);
17
}

展开收起

减少 JavaScript 主线程阻塞#

JavaScript 中存在大量同步计算时，会阻塞主线程，影响页面交互和绘制。

常见优化方式：

拆分长任务：避免一个同步任务持续执行过长时间。
使用 Web Worker：将适合的计算密集型任务放到工作线程。
按需加载模块：使用动态 import() 加载暂时用不到的代码。
减少第三方脚本：避免加载不必要的统计、广告和其他外部脚本。

例如：

1
// 按需加载模块
2
const { calculate } = await import('./calculate.js');
3

4
calculate();

需要注意：async/await 不能使大量同步计算自动变成非阻塞任务。对于复杂计算，可以考虑 Web Worker。

优化高频事件处理#

scroll、resize、pointermove 等事件可能频繁触发。

可以使用：

优化方式	适用场景
防抖（debounce）	搜索框输入、窗口大小变化后的计算
节流（throttle）	滚动监听、连续拖拽计算
requestAnimationFrame	跟随浏览器刷新节奏更新动画
passive 事件监听	不需要阻止默认滚动行为的触摸、滚轮监听

例如：

1
let ticking = false;
2

3
window.addEventListener('scroll', () => {
4
  if (ticking) return;
5

6
  ticking = true;
7

8
  requestAnimationFrame(() => {
9
    console.log(window.scrollY);
10
    ticking = false;
11
  });
12
}, { passive: true });

优化长列表渲染#

当页面需要展示大量数据时，例如一次渲染 10000 条数据，会产生较多 DOM 节点。

可以使用：

分页加载：每次只加载部分数据。
无限滚动：滚动到底部时继续加载。
虚拟列表（Virtual List）：只渲染可视区域及附近的列表项。

其中虚拟列表适合大量数据的滚动场景，能显著减少实际 DOM 节点数量。

移动Web开发常见问题

Fri, 23 Oct 2026 02:33:21 GMT

1px边框#

高清屏幕下，1px边框会变粗那变粗的原因是什么？

原因：CSS 像素和设备物理像素不一定是 1<1> 的关系。

设备像素比（DPR）计算公式：

[ DPR=\frac{设备物理像素}{CSS像素} ]

例如：

DPR	1 CSS px 对应的物理像素
1	1 × 1
2	2 × 2
3	3 × 3

假设手机 DPR = 3，那么 CSS 中的 1px 边框通常会占据约 3 个物理像素的厚度。示意图：相同的 1 CSS px 边框在不同 DPR 下的物理像素厚度。

解决方案一：使用小数像素#

1
.box {
2
  border: 0.5px solid #ddd;
3
}

写法简单，但不同浏览器、DPR 下的绘制效果可能不同，不保证最终恰好是一个物理像素。

解决方案二：伪元素 + transform#

需要实现较细的底边框时，可以使用伪元素。

1
.box {
2
  position: relative;
3
}
4

5
.box::after {
6
  content: "";
7
  position: absolute;
8
  left: 0;
9
  right: 0;
10
  bottom: 0;
11
  height: 1px;
12
  background-color: #ddd;
13
  transform-origin: bottom;
14
}
15

16
/* DPR >= 2 */
17
@media (min-resolution: 2dppx) {
18
  .box::after {
19
    transform: scaleY(0.5);
20
  }
21
}
22

23
/* DPR >= 3 */
24
@media (min-resolution: 3dppx) {
25
  .box::after {
26
    transform: scaleY(0.333333);
27
  }
28
}

展开收起

核心原理是：先绘制 1px 的线，再通过 transform 缩小其视觉厚度。这段代码主要针对常见的 DPR 2、3 屏幕。实际开发建议：普通边框直接使用 1px 即可。只有设计稿明确要求极细边框时，才需要额外处理。

click事件300ms延迟#

问题描述#

早期移动浏览器中，手指点击元素后，click 事件可能延迟约 300ms 才执行。

产生原因#

浏览器需要判断用户是在单击还是双击缩放页面。

解决方案一：设置 viewport（推荐）#

1
<meta
2
  name="viewport"
3
  content="width=device-width, initial-scale=1.0"
4
/>

现代主流移动浏览器对已适配移动视口的页面，通常已经移除了这类延迟。

解决方案二：touch-action#

1
button,
2
a {
3
  touch-action: manipulation;
4
}

touch-action: manipulation 允许正常滚动、双指缩放，但禁用双击缩放等手势，从而避免浏览器为了识别双击而推迟 click。

解决方案三：使用 Touch 事件（了解即可）#

1
const button = document.querySelector('button');
2

3
button.addEventListener('touchend', () => {
4
  console.log('手指离开');
5
});

touchend 不需要等待浏览器生成 click，但是还需要自行处理滑动、点击识别以及兼容性事件等问题。

实际开发建议：现在正常使用 click 就可以，不必为了消除 300ms 延迟而统一改用 touchend，也通常不需要引入旧的 FastClick 库。

Touch事件点击穿透#

问题描述#

当一个元素监听 touchend，另一个元素监听 click，并且两个元素位置重叠时，可能出现点击穿透。

例如：点击弹窗关闭按钮，弹窗关闭之后，下方按钮也被意外触发。

产生原因#

触摸操作结束后，浏览器在某些情况下还会生成兼容性的鼠标事件和 click 事件。若上层元素在 touchend 时被移除，后续 click 可能落到下层元素上。具体表现取决于浏览器及事件处理方式。

解决方案一：统一使用 click（推荐）#

1
const overlay = document.querySelector('.overlay');
2
const button = document.querySelector('.button');
3

4
// 上层弹窗
5
overlay.addEventListener('click', () => {
6
  overlay.remove();
7
});
8

9
// 下层按钮
10
button.addEventListener('click', () => {
11
  console.log('底层按钮被点击');
12
});

上层通过自身的 click 事件关闭，可以避免前面所述的“touchend 先删除上层、click 后触发下层”问题。

解决方案二：阻止默认行为#

如果确实需要使用 Touch 事件，可以阻止触摸操作生成后续兼容性鼠标事件。

1
const overlay = document.querySelector('.overlay');
2

3
overlay.addEventListener(
4
  'touchend',
5
  (event) => {
6
    if (event.cancelable) {
7
      event.preventDefault();
8
    }
9

10
    overlay.remove();
11
  },
12
  { passive: false }
13
);

注意：preventDefault() 可能影响默认交互行为，不能随意对所有触摸事件调用。

解决方案三：使用 Pointer Events#

Pointer Events 可以统一处理鼠标、触摸屏和触控笔。

1
button.addEventListener('pointerdown', (event) => {
2
  console.log(event.pointerType);
3
});

但需要注意：Pointer Events 并不会自动消除所有点击穿透问题。对于普通按钮，依然优先使用 click。

实际开发建议：普通按钮、弹窗开关使用 click；需要拖拽、滑动等连续手势时再使用 Pointer Events 或 Touch Events。

移动端图片#

移动端图片常见问题包括：图片超出屏幕、图片变形、高分辨率屏幕下图片模糊，以及图片体积过大导致加载缓慢。

图片自适应#

图片原始宽度大于移动端容器时，可能发生横向溢出。

1
img {
2
  max-width: 100%;
3
  height: auto;
4
}

max-width: 100% 限制图片最大宽度不超过容器，height: auto 保持原始宽高比。

图片裁剪#

对于商品卡片、头像和文章封面，通常需要固定图片区域的尺寸。

1
img {
2
  width: 100%;
3
  aspect-ratio: 16 / 9;
4
  object-fit: cover;
5
}

cover 常用于封面和商品图，contain 常用于需要完整展示的图片。

高清屏图片模糊#

假设图片在网页中显示宽度为 200px：

DPR	理想图片资源宽度
1	200px
2	400px
3	600px

如果图片分辨率不够，在高 DPR 屏幕中可能显得模糊。

可以使用 srcset 提供不同分辨率的图片：

1
<img
2
  src="image-200.jpg"
3
  srcset="
4
    image-200.jpg 1x,
5
    image-400.jpg 2x,
6
    image-600.jpg 3x
7
  "
8
  width="200"
9
  alt="示例图片"
10
/>

浏览器会根据设备环境选择合适的图片资源。

响应式图片#

对于不同屏幕宽度，可以提供不同尺寸的图片资源：

1
<img
2
  src="image-800.jpg"
3
  srcset="
4
    image-400.jpg 400w,
5
    image-800.jpg 800w,
6
    image-1200.jpg 1200w
7
  "
8
  sizes="(max-width: 768px) 100vw, 800px"
9
  alt="响应式图片"
10
/>

其中：

srcset：提供可供选择的图片及其实际宽度。
sizes：告诉浏览器图片预计显示多宽。

浏览器会结合显示尺寸、DPR 等条件选择资源，而不需要通过 JavaScript 手动切换图片。

图片懒加载#

1
<img
2
  src="image.jpg"
3
  loading="lazy"
4
  width="800"
5
  height="450"
6
  alt="示例图片"
7
/>

loading="lazy" 表示推迟加载距离视口较远的图片，可以减少初始页面加载负担。

图片应尽量提供 width 和 height，为加载前的图片预留空间，减少布局偏移。首屏关键图片一般不要随意使用懒加载。

图片底部空白#

img 默认是行内替换元素，基线对齐可能导致图片底部出现空隙。

1
img {
2
  display: block;
3
}

通常可以直接解决。

总结#

常见问题	原因	推荐解决方案
1px 边框偏粗	DPR 导致物理像素厚度不同	普通边框用 `1px`，极细线用伪元素缩放
click 300ms 延迟	历史上的双击缩放判断	viewport、`touch-action: manipulation`
Touch 点击穿透	触摸后产生兼容性 click 事件	普通交互统一使用 `click`
图片超出屏幕	图片宽度大于容器	`max-width: 100%`
图片拉伸变形	容器与图片比例不同	`object-fit`
高清图片模糊	图片资源分辨率不足	`srcset`
图片加载缓慢	图片体积大、加载过多	合理尺寸、现代格式、懒加载
图片底部空白	行内元素基线对齐	`display: block`

学习重点：这四类问题中，300ms 延迟和 Touch 点击穿透是比较典型的历史移动端兼容性问题，了解原理即可。现代项目更值得掌握的是 Pointer Events、响应式图片、DPR 以及图片加载优化，这些知识在 Vue 3、移动 H5 等项目里仍然经常使用。

移动Web端事件

Thu, 22 Oct 2026 23:21:23 GMT

z在早期的时候，是没有移动端事件，大部分鼠标事件在移动端一样有用，后面苹果推出了touch 触摸事件，后续浏览器跟进，微软推出pointer指针事件（统一鼠标、触摸、笔），那在PC和移动端表现有什么区别，为什么要学习，举一个轮播图例子，正常在pc端通过点击左右按钮切换轮播，而在移动端，可以通过触摸滑动图片实现轮播的切换

Touch 触摸事件#

Touch事件基础#

touch事件类型有以下4种：

事件	触发时机
`touchstart`	手指接触屏幕
`touchmove`	手指在屏幕上移动
`touchend`	手指离开屏幕
`touchcancel`	触摸操作被浏览器或系统中断

示例：

1
// touch事件类型
2
// touchstart touchmove touchend touchcancel
3
const $box = document.getElementById('box');
4
//触摸开始
5
$box.addEventListener(
6
  'touchstart',
7
  function (e) {
8
    console.log('手指接触屏幕', e);
9
  },
10
  false,
11
);
12
// 移动
13
$box.addEventListener(
14
  'touchmove',
15
  function (e) {
16
    console.log('手指在屏幕上移动', e);
17
  },
18
  false,
19
);
20
// 离开
21
$box.addEventListener(
22
  'touchend',
23
  function (e) {
24
    console.log('手指离开屏幕', e);
25
  },
26
  false,
27
);
28
// 触摸操作被浏览器或系统中断
29
$box.addEventListener(
30
  'touchcancel',
31
  function (e) {
32
    console.log('触摸操作被浏览器或系统中断', e);
33
  },
34
  false,
35
);

展开收起

注意：即使触摸点移出目标元素，touchmove事件依然会持续触发，前提是手指一直触摸不要离开屏幕的触摸滑动，而mousemove这个鼠标事件不会触发；

Touch事件在pc端不会触发，鼠标事件在PC和移动端都会触发；touch事件的特征检测可以通过 'ontouchstart' in window检测是否支持，返回一个布尔值

Touch事件的event对象#

event对象常用属性

属性 / 方法	作用
`event.touches`	当前仍接触屏幕的所有触摸点
`event.targetTouches`	当前仍接触屏幕，且最初在事件目标元素上开始触摸的触摸点
`event.changedTouches`	本次事件中发生变化的触摸点
`event.target`	最初触发事件的元素
`event.currentTarget`	当前绑定事件处理程序的元素
`event.type`	事件类型，如 `touchstart`
`event.cancelable`	当前事件是否可以取消默认行为
`event.preventDefault()`	阻止浏览器的默认行为

其中，touches、targetTouches 和 changedTouches 是 Touch 事件最重要的三个属性。

1
box.addEventListener('touchstart', (event) => {
2
  console.log(event.touches);
3
  console.log(event.targetTouches);
4
  console.log(event.changedTouches);
5
});

触摸点的常用属性

上面的三个属性返回的都是 TouchList 对象，可以通过下标获取其中的触摸点。

1
box.addEventListener('touchstart', (event) => {
2
  const touch = event.changedTouches[0];
3

4
  console.log(touch.clientX);
5
  console.log(touch.clientY);
6
});

常用的触摸点属性如下：

属性	作用
`identifier`	触摸点的唯一标识，用于区分不同触摸点
`target`	该触摸点最初开始触摸的元素
`clientX` / `clientY`	触摸点相对于浏览器视口的坐标
`pageX` / `pageY`	触摸点相对于整个文档的坐标
`screenX` / `screenY`	触摸点相对于屏幕的坐标
`radiusX` / `radiusY`	触摸接触区域的椭圆半径
`rotationAngle`	触摸接触区域的旋转角度
`force`	触摸压力值，通常在 0 到 1 之间

日常开发中，最常用的是 clientX、clientY，例如获取手指的位置、计算滑动距离。

阻止浏览器的默认行为

移动端触摸操作可能触发浏览器的默认行为，例如页面滚动、缩放等。

可以使用 event.preventDefault() 阻止可取消的默认行为。

1
box.addEventListener(
2
  'touchmove',
3
  (event) => {
4
    event.preventDefault();
5
  },
6
  { passive: false },
7
);

这里需要注意两点：

preventDefault() 是阻止默认行为，不是阻止事件冒泡；阻止冒泡使用 stopPropagation()。
现代浏览器中，部分触摸事件监听器默认可能采用被动监听（passive）。被动监听器中调用 preventDefault() 无法阻止默认行为，因此需要时应明确设置 { passive: false }。

实际开发建议：如果只是要控制页面是否允许滚动或缩放，优先考虑 CSS 的 touch-action；只有确实需要通过 JavaScript 取消默认行为时，再使用 preventDefault()。

单指拖拽

单指拖拽是指用户用一根手指按住元素并移动，从而改变元素的位置。

实现思路：

touchstart：记录手指初始坐标和元素初始位置。
touchmove：计算手指移动距离，更新元素位置。
touchend：结束拖拽。

示例代码

1
<div class="box">拖动我</div>
2
<style>
3
  .box {
4
    position: fixed;
5
    left: 50px;
6
    top: 100px;
7

8
    width: 120px;
9
    height: 120px;
10
    background-color: skyblue;
11

12
    display: flex;
13
    justify-content: center;
14
    align-items: center;
15

16
    touch-action: none;
17
    user-select: none;
18
  }
19
</style>
20
<script>
21
  const box = document.querySelector('.box');
22

23
  let startX = 0;
24
  let startY = 0;
25
  let startLeft = 0;
26
  let startTop = 0;
27
  let dragging = false;
28

29
  box.addEventListener(
30
    'touchstart',
31
    (event) => {
32
      // 只允许单指拖拽
33
      if (event.touches.length !== 1) {
34
        dragging = false;
35
        return;
36
      }
37

38
      const touch = event.changedTouches[0];
39
      const rect = box.getBoundingClientRect();
40

41
      // 记录手指初始坐标
42
      startX = touch.clientX;
43
      startY = touch.clientY;
44

45
      // 记录元素初始位置
46
      startLeft = rect.left;
47
      startTop = rect.top;
48

49
      dragging = true;
50
    },
51
    { passive: true },
52
  );
53

54
  box.addEventListener(
55
    'touchmove',
56
    (event) => {
57
      if (!dragging) return;
58

59
      // 多指触摸时取消拖拽
60
      if (event.touches.length !== 1) {
61
        dragging = false;
62
        return;
63
      }
64

65
      const touch = event.touches[0];
66

67
      // 计算手指移动距离
68
      const moveX = touch.clientX - startX;
69
      const moveY = touch.clientY - startY;
70

71
      // 更新元素位置
72
      box.style.left = `${startLeft + moveX}px`;
73
      box.style.top = `${startTop + moveY}px`;
74
    },
75
    { passive: true },
76
  );
77

78
  box.addEventListener('touchend', () => {
79
    dragging = false;
80
  });
81

82
  box.addEventListener('touchcancel', () => {
83
    dragging = false;
84
  });
85
</script>

展开收起

核心计算公式

变量	计算方式
水平移动距离	`moveX = 当前手指X - 初始手指X`
垂直移动距离	`moveY = 当前手指Y - 初始手指Y`
元素新位置	`初始位置 + 移动距离`

例如，手指初始横坐标为 100px，移动后变成 150px，那么：

手指水平移动了 50px。
如果元素原本位于 200px，新位置就是 250px。

注意事项

touch-action: none 用于禁止浏览器在该元素上执行原生平移、缩放手势，避免与自定义拖拽冲突。
如果改用 event.preventDefault() 阻止默认行为，touchmove 监听器需要设置 { passive: false }，否则可能无法阻止。
touchend 和 touchcancel 都要处理，避免拖拽状态没有正确结束。

记住核心思路：记录初始位置 → 计算手指移动距离 → 更新元素位置。

pointer指针事件#

Pointer Events（指针事件）是统一处理鼠标、触摸屏、触控笔等输入设备的事件机制。与 Mouse Events 和 Touch Events 相比，Pointer Events 最大的优势是：一套事件代码，可以同时处理 PC 端和移动端的交互。

Pointer事件基础#

Pointer事件类型

`pointerdown`	指针按下时	开始拖拽、按压
`pointermove`	指针移动时	拖拽、绘图
`pointerup`	指针释放时	结束拖拽
`pointercancel`	指针操作被浏览器取消时	清理拖拽状态
`pointerover`	指针进入元素区域	悬停效果
`pointerout`	指针离开元素区域	取消悬停
`pointerenter`	指针进入元素或其子元素区域	鼠标进入
`pointerleave`	指针离开元素及其子元素区域	鼠标离开
`gotpointercapture`	元素获得指针捕获时	监听捕获状态
`lostpointercapture`	元素失去指针捕获时	监听捕获释放
`pointerrawupdate`	指针状态发生变化时，提供更直接的更新	高精度绘图等

其中，最常用的是 pointerdown、pointermove、pointerup、pointercancel

实现一个简单的拖拽操作：

1
const box = document.querySelector('.box');
2

3
let isDragging = false;
4

5
box.addEventListener('pointerdown', (e) => {
6
  isDragging = true;
7
  box.setPointerCapture(e.pointerId);
8
});
9

10
box.addEventListener('pointermove', (e) => {
11
  if (!isDragging) return;
12

13
  console.log(e.clientX, e.clientY);
14
});
15

16
box.addEventListener('pointerup', () => {
17
  isDragging = false;
18
});
19

20
box.addEventListener('pointercancel', () => {
21
  isDragging = false;
22
});

展开收起

Pointer 事件注意事项

Pointer 事件不会自动阻止浏览器默认行为

在移动端，浏览器默认会处理页面滚动、缩放等触摸操作。如果使用 Pointer 事件实现拖拽，可能触发 pointercancel，导致拖拽中断。解决方法：使用 CSS 的 touch-action 属性。

1
.box {
2
  touch-action: none;
3
}

常见取值：

属性值	作用
`auto`	浏览器默认处理触摸操作
`none`	禁止浏览器处理该区域的触摸平移和缩放手势
`pan-x`	允许浏览器处理水平滚动
`pan-y`	允许浏览器处理垂直滚动
`manipulation`	允许滚动和双指缩放等操作，不允许双击缩放

注意：touch-action: none 应只设置在需要自定义触摸交互的区域，避免影响正常页面滚动。

pointermove 不一定需要按下指针

pointermove 只要指针移动就可能触发。例如，鼠标没有按下，只是在元素内部移动，也会触发 pointermove。因此实现拖拽时，需要判断是否处于拖拽状态。

1
let isDragging = false;
2

3
box.addEventListener('pointerdown', () => {
4
  isDragging = true;
5
});
6

7
box.addEventListener('pointermove', (e) => {
8
  if (!isDragging) return;
9

10
  console.log(e.clientX, e.clientY);
11
});
12

13
box.addEventListener('pointerup', () => {
14
  isDragging = false;
15
});
16

17
box.addEventListener('pointercancel', () => {
18
  isDragging = false;
19
});

展开收起

指针离开元素可能导致事件无法继续接收

默认情况下，鼠标移出元素后，元素可能无法继续接收后续的 pointermove 和 pointerup。解决方法：使用指针捕获。

1
box.addEventListener('pointerdown', (e) => {
2
  box.setPointerCapture(e.pointerId);
3
});

这样即使指针移出元素，后续事件仍然可以发送到该元素。

API	作用
`setPointerCapture()`	捕获指定指针
`releasePointerCapture()`	释放指定指针
`hasPointerCapture()`	判断是否捕获指定指针

事件	是否冒泡
`pointerover`	✅
`pointerout`	✅
`pointerenter`	❌
`pointerleave`	❌
`pointerdown`	✅
`pointermove`	✅
`pointerup`	✅

注意事项	推荐做法
浏览器默认触摸行为干扰	使用 `touch-action`
指针未按下也能触发移动事件	判断拖拽状态
指针离开元素导致事件丢失	使用 `setPointerCapture()`
指针操作可能被取消	同时处理 `pointercancel`
多指触摸相互干扰	使用 `pointerId` 区分
Pointer 与 Mouse 事件可能重复	避免重复绑定相同业务逻辑
`pointerenter/leave` 不冒泡	事件委托使用 `pointerover/out`

Pointer事件的event对象#

Pointer 事件触发时，浏览器会向事件处理函数传入一个 PointerEvent 对象，用于获取指针类型、坐标、按键状态、压力等信息。

1
box.addEventListener('pointerdown', (event) => {
2
  console.log(event);
3
  console.log(event.pointerType);
4
  console.log(event.clientX, event.clientY);
5
});

PointerEvent 继承自 MouseEvent，因此既可以使用鼠标事件的属性，也可以使用 Pointer 事件独有的属性。

event 对象的常用属性

属性	说明
`pointerId`	当前指针的唯一标识，用于区分多个活动指针
`pointerType`	指针设备类型：`mouse`、`touch`、`pen`
`isPrimary`	是否为当前指针类型的主指针
`clientX` / `clientY`	指针相对于浏览器视口的坐标
`pageX` / `pageY`	指针相对于文档的坐标
`screenX` / `screenY`	指针相对于屏幕的坐标
`offsetX` / `offsetY`	指针相对于事件目标元素内边距边缘的坐标
`button`	本次事件中发生状态变化的按键
`buttons`	当前按下的按键组合
`pressure`	指针压力，范围为 `0～1`
`width` / `height`	指针接触区域的宽度和高度
`target`	事件的目标元素
`currentTarget`	当前正在执行事件监听器的元素
`type`	当前事件名称，如 `pointerdown`
`preventDefault()`	阻止可取消事件的默认行为

pointerType：判断指针设备

1
box.addEventListener('pointerdown', (event) => {
2
  if (event.pointerType === 'mouse') {
3
    console.log('鼠标操作');
4
  } else if (event.pointerType === 'touch') {
5
    console.log('触摸操作');
6
  } else if (event.pointerType === 'pen') {
7
    console.log('触控笔操作');
8
  }
9
});

通过 pointerType，可以在同一套事件逻辑中区分 PC 和移动端输入设备。

pointerId 与 isPrimary：区分多点触控

pointerId：区分不同的指针，例如两根手指同时触摸屏幕，会分别对应不同的 ID。
isPrimary：判断当前指针是否为该设备类型的主指针。例如，多指触摸时，通常第一根手指为主指针。

1
box.addEventListener('pointerdown', (event) => {
2
  if (!event.isPrimary) return;
3

4
  console.log('主指针ID：', event.pointerId);
5
});

注意：pointerId 不是永久唯一的，指针结束后，其 ID 可能被重新使用。

坐标属性

最常用的是 clientX 和 clientY。

1
box.addEventListener('pointermove', (event) => {
2
  console.log(event.clientX, event.clientY);
3
  console.log(event.pageX, event.pageY);
4
  console.log(event.offsetX, event.offsetY);
5
});

拖拽开发通常使用 clientX/clientY 计算移动距离。

button 与 buttons：判断按键

属性	常见取值	说明
`button`	`0`	主按键（通常是鼠标左键）
`button`	`1`	鼠标中键
`button`	`2`	次按键（通常是鼠标右键）
`button`	`-1`	本次事件没有按键状态变化
`buttons`	`0`	没有按键按下
`buttons`	`1`	主按键处于按下状态
`buttons`	`2`	次按键处于按下状态
`buttons`	`4`	中键处于按下状态

buttons 是位掩码，可以同时表示多个按键。

例如，只在鼠标左键按下时执行：

1
box.addEventListener('pointermove', (event) => {
2
  if (event.pointerType === 'mouse' && event.buttons & 1) {
3
    console.log('鼠标左键正在拖动');
4
  }
5
});

其他属性（了解即可）

这些主要用于触控笔、绘图软件等特殊场景。

属性	说明
`tiltX`	触控笔 X 方向倾斜角度
`tiltY`	触控笔 Y 方向倾斜角度
`twist`	触控笔的旋转角度
`tangentialPressure`	触控笔的切向压力
`altitudeAngle`	触控笔相对于屏幕平面的角度
`azimuthAngle`	触控笔在屏幕平面上的方向角度

这些属性的实际数据取决于硬件支持情况。

总结

对于普通 Web 开发，重点掌握以下属性即可：

使用场景	重点属性
判断鼠标、触摸屏、触控笔	`pointerType`
单指拖拽、多点触控	`pointerId`、`isPrimary`
获取指针位置、计算拖拽距离	`clientX`、`clientY`
判断鼠标按键	`button`、`buttons`
判断事件目标	`target`、`currentTarget`
绘图、手写板	`pressure`、`tiltX`、`tiltY`

学习重点： pointerType、pointerId、clientX/clientY、button/buttons。其他属性根据项目需求再掌握即可。

单指拖拽#

1
<div class="box">拖动我</div>
2

3
<style>
4
  .box {
5
    position: fixed;
6
    left: 50px;
7
    top: 100px;
8

9
    width: 120px;
10
    height: 120px;
11
    background-color: skyblue;
12

13
    display: flex;
14
    justify-content: center;
15
    align-items: center;
16

17
    touch-action: none;
18
    user-select: none;
19
    cursor: grab;
20
  }
21
</style>
22

23
<script>
24
  const box = document.querySelector('.box');
25

26
  let startX = 0;
27
  let startY = 0;
28
  let startLeft = 0;
29
  let startTop = 0;
30
  let dragging = false;
31
  let activePointerId = null;
32

33
  // 记录当前按下的触摸指针
34
  const activeTouches = new Set();
35

36
  window.addEventListener(
37
    'pointerdown',
38
    (event) => {
39
      if (event.pointerType !== 'touch') return;
40

41
      activeTouches.add(event.pointerId);
42

43
      // 多指触摸时取消拖拽
44
      if (activeTouches.size > 1) {
45
        dragging = false;
46
      }
47
    },
48
    true,
49
  );
50

51
  box.addEventListener('pointerdown', (event) => {
52
    // 鼠标仅允许左键拖拽
53
    if (event.pointerType === 'mouse' && event.button !== 0) return;
54

55
    // 只允许单指拖拽
56
    if (event.pointerType === 'touch' && activeTouches.size !== 1) return;
57

58
    if (activePointerId !== null) return;
59

60
    const rect = box.getBoundingClientRect();
61

62
    // 记录指针初始坐标
63
    startX = event.clientX;
64
    startY = event.clientY;
65

66
    // 记录元素初始位置
67
    startLeft = rect.left;
68
    startTop = rect.top;
69

70
    dragging = true;
71
    activePointerId = event.pointerId;
72

73
    // 捕获指针
74
    box.setPointerCapture(event.pointerId);
75
  });
76

77
  box.addEventListener('pointermove', (event) => {
78
    if (!dragging || event.pointerId !== activePointerId) return;
79

80
    // 计算指针移动距离
81
    const moveX = event.clientX - startX;
82
    const moveY = event.clientY - startY;
83

84
    // 更新元素位置
85
    box.style.left = `${startLeft + moveX}px`;
86
    box.style.top = `${startTop + moveY}px`;
87
  });
88

89
  function stopDrag(event) {
90
    if (event.pointerType === 'touch') {
91
      activeTouches.delete(event.pointerId);
92
    }
93

94
    if (event.pointerId === activePointerId) {
95
      dragging = false;
96
      activePointerId = null;
97
    }
98
  }
99

100
  window.addEventListener('pointerup', stopDrag);
101
  window.addEventListener('pointercancel', stopDrag);
102
</script>

展开收起

异步async和await

Thu, 22 Oct 2026 07:17:41 GMT

async和await使基于Promise的异步操作更简洁方便，Promise是解决回调地狱问题，async和await则是使异步的代码看起来像同步的代码，更容易理解

async和await是什么#

可以声明一个async函数，表示函数里面有异步操作，一般只有在async函数中才能使用await；

await异步等待，表示紧跟在await后面的是异步的，需要等待结果，await需要和async一起使用

基本语法：

1
async function fn() {
2
    const result = await 异步操作(Promise对象)
3
 }

为什么用？使异步操作更简洁方便；使异步代码看起来像同步，更容易理解

使用async 和 await#

实现一个效果，一个广告图片一开始是消失的，然后隔几秒显示，然后又消失

回调函数方式：

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Document</title>
7
  <style>
8
    .ad{
9
      display: block;
10
      width: 300px;
11
      height: 150px;
12
      margin: 0 auto;
13
    }
14
    .none{
15
      display: none;
16
    }
17
  </style>
18
</head>
19
<body>
20
  <img src="./ad.jpg" alt="" class="ad none" id="ad">
21
  <script>
22
    //  回调函数
23
    function ad () {
24
      // 获取DOM
25
      const $ad = document.getElementById('ad');
26
      setTimeout(() => {
27
        // 1S后移除
28
        $ad.classList.remove('none')
29
        setTimeout(() => {
30
          // 2S后隐藏
31
          $ad.classList.add('none')
32
        }, 2000)
33
      }, 1000)
34
    }
35
    ad()
36
  </script>
37
</body>
38
</html>

展开收起

Promise方式

1
function wait (ms) {
2
    return new Promise((resolve) => {
3
        setTimeout(resolve, ms)
4
    })
5
}
6
function ad () {
7
    const $ad = document.getElementById('ad');
8
    wait(1000).then(() => {
9
        // 1S后显示ad
10
        $ad.classList.remove('none')
11
        return wait(2000)
12
    }).then(() => {
13
        // 2S后隐藏ad
14
        $ad.classList.add('none')
15
        return wait(3000)
16
    }).then(() => {
17
        // 3S后重新显示ad
18
        $ad.classList.remove('none')
19
    })
20
}
21
ad()

展开收起

async方式

1
function wait (ms) {
2
    return new Promise((resolve) => {
3
        setTimeout(resolve, ms)
4
    })
5
}
6
async function ad () {
7
    const $ad = document.getElementById('ad');
8
    await wait(1000)
9
    // 1S后显示ad
10
    $ad.classList.remove('none')
11
    await wait(2000)
12
    // 2S后隐藏ad
13
    $ad.classList.add('none')
14
    await wait(3000)
15
    // 3S后重新显示ad
16
    $ad.classList.remove('none')
17
}
18
ad()

展开收起

async函数的返回值#

async函数的返回值是Promise对象，观察：

1
async function fn () {
2
    return 'hello world'
3
    //相当于
4
    return Promise.resolve('hello world')
5
}
6
console.log(fn());

async函数的各种形式#

函数声明：

1
async function fn () {}

函数表达式

1
const fn = async function(){}

箭头函数

1
const fn = async()=>{}

箭头函数单参数

1
const fn = async param => {}

对象方法

1
const obj = {
2
  fn:async function(){},
3
    fn1:async ()=>{},
4
  async fn(){}
5
}

class的方法

1
class ClassName{
2
  async fn(){}
3
}

async函数的注意事项#

async函数返回值是一个成功状态的Promise，如果需要失败的，需要手动设置

第一种方式：使用Promise.reject

1
    async function fn () {
2
      // return 123
3
      return Promise.reject(new Error('出错了'))
4
    }
5

6
    fn().catch(err => {
7
      console.log(err);
8
    })
9
    console.log(fn());

第二种方式，使用throw new Error，当然，这没必要可以去报错，如果逻辑错误了，Promise就是失败态

1
async function fn () {
2
    // return 123
3
    // return Promise.reject(new Error('出错了'))
4
    try {
5
        throw new Error('出错了')
6
    } catch (error) {
7
        console.log(error);
8
    }
9
}
10

11
console.log(fn());

async函数可以没有await，反过来则不行

await的机制#

沿用之前广告显示隐藏的例子

1
function wait (ms) {
2
    return new Promise((resolve) => {
3
        setTimeout(resolve, ms)
4
    })
5
}
6
async function ad () {
7
    const $ad = document.getElementById('ad');
8
    await wait(1000)
9
    // 1S后显示ad
10
    $ad.classList.remove('none')
11
    await wait(2000)
12
    // 2S后隐藏ad
13
    $ad.classList.add('none')
14
    await wait(3000)
15
    // 3S后重新显示ad
16
    $ad.classList.remove('none')
17
}
18
ad()

展开收起

这里的await wait(1000)相当于阻塞了1秒后才执行后面的代码，相当于以下代码

1
wait(1000).then(() => {
2
    // 1S后显示ad
3
    $ad.classList.remove('none')
4
    return wait(2000)
5
}).then(() => {
6
    // 2S后隐藏ad
7
    $ad.classList.add('none')
8
    return wait(3000)
9
}).then(() => {
10
    // 3S后重新显示ad
11
    $ad.classList.remove('none')
12
})

结论：async函数中的代码有先后关系，await会阻塞该async函数中代码的执行，注意：await 确实会暂停 async 函数后续代码的执行，但它不会阻塞整个 JavaScript 主线程

await的值#

await 表达式的返回值，取决于它后面跟的是什么。核心规则：await 会等待 Promise 完成，并取出它成功完成时的结果；如果后面不是 Promise，则直接得到该值。

`await` 后面的值	`await` 表达式的结果
`Promise.resolve(100)`	`100`
`Promise.reject('失败')`	抛出 `'失败'`
`100`	`100`
`'hello'`	`'hello'`
`{ age: 18 }`	`{ age: 18 }`
`fetch('/api/data')`	请求成功后得到 `Response` 对象

await的注意事项#

await 只能在 async 函数中使用；注意：ES 模块还支持在函数外使用顶层 await。

1
async function fn() {
2
  const result = await Promise.resolve(100);
3
  console.log(result);
4
}
5

6
fn();

await 只暂停当前函数的后续执行；await 不会阻塞整个 JavaScript 主线程，其他代码仍然可以执行。

1
async function fn() {
2
  console.log(1);
3
  await Promise.resolve();
4
  console.log(2);
5
}
6

7
fn();
8
console.log(3);

await 后面可以跟普通值，不一定是 Promise；如果后面不是 Promise 或其他 thenable 对象，await 会将其作为已经完成的值处理。

1
async function fn() {
2
  console.log(await 100); // 100
3
  console.log(await 'hello'); // hello
4
}
5

6
fn();

await 遇到 rejected Promise 会抛出错误；因此，等待可能失败的异步操作时，可以使用 try...catch 处理错误。

1
async function fn() {
2
  try {
3
    const result = await Promise.reject('请求失败');
4
  } catch (error) {
5
    console.log(error); // 请求失败
6
  }
7
}
8

9
fn();

多个 await 默认按顺序等待

1
async function fn() {
2
  const a = await task1();
3
  const b = await task2();
4
}

如果 task2() 必须等待 task1() 完成后才能开始，这样写是合适的。

但如果两个任务相互独立，这样写会让它们依次执行，可以改为：

1
async function fn() {
2
  const [a, b] = await Promise.all([
3
    task1(),
4
    task2()
5
  ]);
6
}

这样两个任务可以同时启动，不必等待第一个任务完成后才启动第二个。

不要误以为 await 会自动等待所有异步任务：例如，forEach() 不会等待异步回调全部执行完毕：

1
async function fn() {
2
  [1, 2, 3].forEach(async item => {
3
    await task(item);
4
  });
5

6
  console.log('执行完毕');
7
}

这里的 '执行完毕' 不会等待所有 task() 完成。

如果需要依次执行，使用 for...of：

1
async function fn() {
2
  for (const item of [1, 2, 3]) {
3
    await task(item);
4
  }
5

6
  console.log('全部执行完毕');
7
}

如果需要并发执行并等待全部完成，可以使用 Promise.all()。

速记表#

注意事项	核心要点
使用位置	`async` 函数中，或 ES 模块顶层
执行机制	暂停当前异步函数的后续执行，不阻塞主线程
等待对象	可以是 Promise，也可以是普通值
错误处理	Promise 被拒绝时，`await` 会抛出错误
多个任务	有依赖就顺序等待，互相独立可考虑 `Promise.all()`
循环处理	`forEach()` 不会等待异步回调完成

其中，最值得掌握的是顺序等待与并发等待的区别，以及 await 的错误处理。这两点在实际开发中尤其常用。

继发和并发#

继发（顺序执行）前一个任务完成后，才开始执行下一个任务。

1
async function fn() {
2
  const a = await task1();
3
  const b = await task2();
4

5
  console.log(a, b);
6
}

并发（同时启动）：多个任务不必等待彼此完成，可以同时启动，然后统一等待结果。

1
async function fn() {
2
  const p1 = task1();
3
  const p2 = task2();
4
  const [a, b] = await Promise.all([p1, p2]);
5
  console.log(a, b);
6
}

项目应用实战#

二级菜单#

初始化代码

1
<!DOCTYPE html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <title>二级菜单</title>
6
    <style>
7
      /* css reset */
8
      * {
9
        padding: 0;
10
        margin: 0;
11
      }
12
      li {
13
        list-style: none;
14
      }
15

16
      /* menu */
17
      .menu {
18
        width: 100px;
19
        background-color: rgba(0, 0, 0, 0.1);
20
        margin: 10px;
21
      }
22
      .menu-item {
23
        position: relative;
24
        padding: 5px;
25
        cursor: pointer;
26
      }
27
      .menu-content {
28
        display: none;
29
        position: absolute;
30
        left: 100%;
31
        top: 0;
32
        width: 200px;
33
        height: 100px;
34
        padding: 0 5px;
35
        background-color: rgba(0, 0, 0, 0.1);
36
      }
37
      .menu-item:hover {
38
        background-color: rgba(0, 0, 0, 0.4);
39
      }
40
      .menu-item:hover .menu-content {
41
        display: block;
42
      }
43
      .menu-loading {
44
        margin: 45px 0 0 92px;
45
      }
46
    </style>
47
  </head>
48
  <body>
49
    <ul id="menu" class="menu">
50
      <!-- <li class="menu-item" data-key="hot" data-done="done">
51
        <span>热门出发地</span>
52
        <div class="menu-content">
53
          <img class="menu-loading" src="./loading.gif" alt="加载中" />
54
          <p>内地热门城市</p>
55
          <p>热门景点</p>
56
        </div>
57
      </li> -->
58
    </ul>
59

60
    <script>
61
      // https://www.imooc.com/api/mall-PC/index/menu
62
      // https://www.imooc.com/api/mall-PC/index/menu/hot
63
      // https://www.imooc.com/api/mall-PC/index/menu/hk
64
      function wait(ms) {
65
        return new Promise(resolve => {
66
          setTimeout(resolve, ms);
67
        });
68
      }
69
      function getJSON(url) {
70
        return new Promise(resolve => {
71
          const xhr = new XMLHttpRequest();
72

73
          xhr.addEventListener(
74
            'load',
75
            async () => {
76
              if (
77
                (xhr.status >= 200 && xhr.status < 300) ||
78
                xhr.status === 304
79
              ) {
80
                // 模拟网络延迟
81
                await wait(1000);
82
                resolve(xhr.response);
83
              }
84
            },
85
            false
86
          );
87

88
          xhr.open('GET', url, true);
89

90
          xhr.responseType = 'json';
91

92
          xhr.send(null);
93
        });
94
      }
95
    </script>
96
  </body>
97
</html>

展开收起

实现：

1
(async function () {
2
    const url = 'https://www.imooc.com/api/mall-PC/index/menu'
3
    // 发送请求
4
    const menuResult = await getJSON(url);
5
    const $menu = document.getElementById('menu')
6
    console.log(menuResult);
7
    createMenu($menu, menuResult.data);
8
    // 循环绑定事件,发送请求，获取数据，创建子菜单
9
    const $item =$menu.getElementsByClassName('menu-item');
10
    [...$item].forEach($item => {
11
        $item.addEventListener('mouseenter', async () => {
12
            if ($item.dataset.done === 'done') return;
13
            const subMenuResul = await getJSON(`https://www.imooc.com/api/mall-PC/index/menu/${$item.dataset.key}`)
14
            $item.dataset.done = 'done'
15
            console.log(subMenuResul);
16
            createsubMenu($item, subMenuResul.data)
17
        },false)
18
    });
19
})()
20
function createMenu ($el, data) {
21
    let html = ''
22
    for (const item of data) {
23
        html += `
24
          <li class="menu-item" data-key="${item.key}">
25
            <span>${item.title}</span>
26
            <div class="menu-content">
27
              <img class="menu-loading" src="./loading.gif" alt="加载中" />
28
             `
29
        $el.innerHTML = html
30
    }
31
}
32
function createsubMenu ($el, data) {
33
    let html = ''
34
    for (const item of data) {
35
        html += `
36
          <p>${item.title}</p>
37
         `
38
    }
39
    $el.querySelector('.menu-content').innerHTML = html
40
}

展开收起

前端Ajax&Fetch与跨域请求

Thu, 22 Oct 2026 00:55:59 GMT

原生Ajax#

初识 Ajax#

Ajax是一种概念，XMLHttpRequest是实现的第一种方案，后续现代化使用Fetch，一般开发使用axios
Ajax 是 Asynchronous JavaScript and XML (异步 JavaScript 和 XML) 的简写
Ajax中的异步<可以异步地向服务器发送请求>，在等待响应的过程中，不会阻塞当前页面，浏览器可以做自己的事情。直到成功获取响应后，浏览器才开始处理响应数据
使用 JavaScript 向服务器发送请求，并在不刷新整个页面的情况下更新页面数据。
XML(可扩展标记语言)是前后端数据通信时传输数据的一种格式
XML现在已经不怎么用了，现在比较常用的是JSON
Ajax其实就是浏览器与服务器之间的一种异步通信方式
非服务器环境下，很多浏览器是无法使用Ajax，如直接打开文件，就无法使用Ajax

Ajax 的基本用法#

Ajax想要实现浏览器与服务器之间的异步通信，需要依靠XMLHttpRequest，它是一个构造函数
不论是XMLHttpRequest,还是Ajax,都没有和具体的某种数据格式绑定

XMLHttpRequest

readystatechange事件监听 readyState 这个状态的变化//它的值从0~4，一共5个状态

0<未初始化>。尚未调用open
1<启动>。已经调用open，但尚未调用send
2<发送>。已经调用send，但尚未接收到响应
3<接收>。已经接收到部分响应数据
4<完成>。已经接收到全部响应数据，而且已经可以在浏览器中使用了

使用步骤：

为了兼容性，不要使用this，使用xhr，为了兼容性，在发送之前，监听事件

1
// 1. 创建一个 XMLHttpRequest 对象
2
var xhr = new XMLHttpRequest();
3

4
// 4.1. 监听请求状态的变化(推荐)
5
xhr.addEventListener('readystatechange', () => {
6
    // 5.1. 判断请求是否完成，网络层面，xhr.readyState === 4请求已经结束，可以拿到完整数据
7
    if (xhr.readyState !== 4) return;
8
    // 6.1. 判断请求是否成功，服务器层面
9
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
10
    }
11
})
12
// 4. 监听请求状态的变化,旧写法，兼容更好
13
xhr.onreadystatechange = () => {
14
    // 5. 判断请求是否完成，网络层面，xhr.readyState === 4请求已经结束，可以拿到完整数据
15
    if (xhr.readyState !== 4) return;
16
    // 6. 判断请求是否成功，服务器层面
17
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
18
    }
19
}
20

21
// 2. 配置请求信息,准备发送请求（HTTP方法、URL,是否异步发送请求）
22
xhr.open('GET', 'https://api.apihubs.cn/holiday/get', true);
23

24
// 3. 发送请求
25
xhr.send();

展开收起

完成前后端通讯：

1
const url = 'https://api.apihubs.cn/holiday/get';
2

3
const xhr = new XMLHttpRequest();
4
xhr.addEventListener('readystatechange', () => {
5
  if (xhr.readyState !== 4) return;
6
  if (xhr.readyState === 4) {
7
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
8
      console.log(xhr.responseText); //数据作为字符串形式
9
      console.log(typeof xhr.responseText); //string
10
    }
11
  }
12
});
13
xhr.open('GET', url, true);
14
xhr.send();

GET 请求#

携带数据

1
const url = 'https://www.imooc.com/api/http/search/suggest';
2
const xhr = new XMLHttpRequest();
3
xhr.addEventListener('readystatechange', () => {
4
    if (xhr.readyState !== 4) return;
5
    if (xhr.readyState === 4) {
6
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
7
            console.log(xhr.responseText); //数据作为字符串形式
8
            console.log(typeof xhr.responseText); //string
9
        }
10
    }
11
});
12
//get通过请求头携带
13
xhr.open('GET', `${url}?words=js`, true);
14
xhr.send();

数据编码

如果在get请求中携带中文，浏览器会自动编码，也就是说，其实直接传中文也没问题。但是不同浏览器的编码不同，后端最终得到的也会不一样的数据，所以需要统一编码，使用encodeURIComponent，还有的原因就是不是所有场景都会自动编码，如果使用浏览器 XHR、fetch通常会自动处理，但是自己拼接特殊字符，会有问题，encodeURIComponent编码不是很推荐，推荐使用URLSearchParams

1
const name = '张三&李四';
2
const xhr = new XMLHttpRequest();
3

4
xhr.open('GET', `/test?name=${name}`);
5
//浏览器发送/test?name=张三&李四
6
//后端解析，参数就被截留了
7
//name = 张三
8
//李四 = ''
9

10
//正确写法
11
const name = encodeURIComponent('张三&李四');
12
xhr.open('GET', `/test?name=${name}`);
13
//浏览器发送 /test?name=%E5%BC%A0%E4%B8%89%26%E6%9D%8E%E5%9B%9B
14
//后端解析：张三&李四

使用encodeURIComponent来编码

1
const url = 'http://localhost:3000/get';
2
const xhr = new XMLHttpRequest();
3
xhr.addEventListener('readystatechange', () => {
4
  if (xhr.readyState !== 4) return;
5
  if (xhr.readyState === 4) {
6
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
7
      console.log(xhr.responseText); //数据作为字符串形式
8
      console.log(typeof xhr.responseText); //string
9
    }
10
  }
11
});
12
//get通过请求头携带
13
//encodeURIComponent编码
14
xhr.open(
15
  'GET',
16
  `${url}?username=${encodeURIComponent('林')}&age=18`,
17
  true,
18
);
19
xhr.send();

展开收起

encodeURIComponent详细解析

encodeURIComponent 是一个字符串编码函数，可以在任何需要的地方调用它，不一定非得写在模板字符串里面。

1
//写法 1：直接写
2
xhr.open(
3
  'GET',
4
  `${url}?username=${encodeURIComponent('林')}&age=18`,
5
  true
6
);
7
//写法 2：先编码，再拼接
8
const username = encodeURIComponent('林');
9
xhr.open(
10
  'GET',
11
  `${url}?username=${username}&age=18`,
12
  true
13
//写法 3：多个参数自己拼
14
const params = {
15
  username: '林',
16
  age: 18
17
};
18

19
const query = Object.entries(params)
20
  .map(([k, v]) => `${k}=${encodeURIComponent(v)}`)
21
  .join('&');
22

23
xhr.open('GET', `${url}?${query}`, true);
24
//写法 4：封装一个函数
25
function stringify(params) {
26
  return Object.entries(params)
27
    .map(([k, v]) => `${k}=${encodeURIComponent(v)}`)
28
    .join('&');
29
}
30

31
xhr.open(
32
  'GET',
33
  `${url}?${stringify({
34
    username: '林',
35
    age: 18
36
  })}`,
37
  true
38
);

展开收起

推荐使用URLSearchParams：完整示例

1
const url = 'https://www.imooc.com/api/http/search/suggest';
2
const params = new URLSearchParams({
3
    words: '前端&后端',
4
});
5
const xhr = new XMLHttpRequest();
6
xhr.addEventListener('readystatechange', () => {
7
    if (xhr.readyState !== 4) return;
8
    if (xhr.readyState === 4) {
9
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
10
            console.log(xhr.responseText); //数据作为字符串形式
11
            console.log(typeof xhr.responseText); //string
12
        }
13
    }
14
});
15
//get通过请求头携带
16
xhr.open('GET', `${url}?${params}`, true);
17
xhr.send();

展开收起

encodeURIComponent和URLSearchParams的区别

	encodeURIComponent	URLSearchParams
类型	函数	类
作用	编码一个字符串	管理整个查询参数
自动拼 `key=value`	❌	✅
自动拼 `&`	❌	✅
自动编码	✅	✅
获取参数	❌	✅
删除参数	❌	✅
修改参数	❌	✅

POST 请求#

携带数据&数据编码

1
const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
2
const xhr = new XMLHttpRequest();
3
xhr.addEventListener('readystatechange', () => {
4
    if (xhr.readyState !== 4) return;
5
    if (xhr.readyState === 4) {
6
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
7
            console.log(xhr.responseText); //数据作为字符串形式
8
            console.log(typeof xhr.responseText); //string
9
        }
10
    }
11
});
12
xhr.open('POST', url, true);
13
// 数据编码
14
const data = new URLSearchParams({
15
    words: '前端&后端',
16
});
17
//常用1： 类型fromdata
18
xhr.send(data);
19
//常用2：不能直接传对象，需要传字符串类型,json解决，这时候就不用编码了
20
// const data1 = {
21
//   username: 'alex',
22
//   age: 18
23
// };
24
// 对象 → JSON 字符串 → 发送
25
// xhr.send(JSON.stringify(data1));

展开收起

JSON#

初识 JSON#

JavaScript Object Notation（JavaScript 对象表示法）
JSON 是一种“数据格式”，用来在前后端之间传输数据
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，用于前后端通信。它本质是字符串，常用于将 JavaScript 对象序列化为字符串（JSON.stringify），或将 JSON 字符串解析为对象（JSON.parse）。

JSON 长什么样：看起来像对象，但它是：字符串格式的数据

1
{
2
  "name": "Tom",
3
  "age": 18
4
}
5
[
6
  {
7
    "name": "Tom",
8
    "age": 18
9
  },
10
  {
11
    "name": "Jerry",
12
    "age": 20
13
  }
14
]

JSON 的 3 种形式#

简单值：JSON 不仅可以是对象和数组，还可以是“单值”

1
"hello"
2
100
3
true
4
null

对象形式

1
{
2
  "name": "Tom",
3
  "age": 18
4
}

数组形式

1
[
2
  {
3
    "name": "Tom",
4
    "age": 18
5
  },
6
  {
7
    "name": "Jerry",
8
    "age": 20
9
  }
10
]

注意事项：

JSON 不允许单引号
JSON 不允许没有引号
JSON 不允许undefined
不能注释

JSON 的常用方法#

JSON 在前端中主要有两个常用方法：JSON.stringify 和 JSON.parse。stringify 用于将 JavaScript 对象转换为 JSON 字符串，常用于数据存储和请求发送；parse 用于将 JSON 字符串转换为 JavaScript 对象，常用于接口数据解析和本地存储读取。

JSON.stringify()：JS对象 → JSON字符串

1
const obj = {
2
  name: 'Tom',
3
  age: 18
4
};
5

6
const json = JSON.stringify(obj);
7

8
console.log(json);//{"name":"Tom","age":18}

stringify 的进阶用法：

1
//第二个参数：过滤字段
2
const obj = {
3
  name: 'Tom',
4
  age: 18,
5
  password: '123456'
6
};
7
const json = JSON.stringify(obj, ['name', 'age']);
8
console.log(json);//{"name":"Tom","age":18}
9

10
//格式化输出（第三个参数）
11
JSON.stringify(obj, null, 2);
12
console.log(json);
13
//{
14
//  "name": "Tom",
15
//  "age": 18
16
//}

展开收起

JSON.parse()：JSON字符串 → JS对象

1
const json = '{"name":"Tom","age":18}';
2
const obj = JSON.parse(json);
3
console.log(obj.name);//Tom

拓展-封装storage

1
const storage = window.localStorage;
2
//设置
3
const set = (k, v) => {
4
  storage.setItem(k, JSON.stringify(v));
5
};
6
//获取
7
const get = (k) => {
8
  return JSON.parse(storage.getItem(k));
9
};
10
//删除
11
const remove = (k) => {
12
  storage.removeItem(k);
13
};
14
//清空
15
const clear = () => {
16
  storage.clear();
17
};
18
export { set, get, remove, clear };

展开收起

使用：

1
import { set, get, remove, clear } from './storage.js';
2
const url = 'http://localhost:3000/post';
3
const xhr = new XMLHttpRequest();
4
xhr.addEventListener('readystatechange', () => {
5
  if (xhr.readyState !== 4) return;
6
  if (xhr.readyState === 4) {
7
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
8
      //console.log(xhr.responseText); //数据作为字符串形式
9
      //console.log(typeof xhr.responseText); //string
10
      const data = JSON.parse(xhr.responseText);//转对象
11
      console.log(data.user);//对象取user
12
      set('user', data.user);//存对象，k值为user
13
      console.log(get('user'));//取值
14
    }
15
  }
16
});
17
xhr.open('POST', url, true);
18
//常用1：表单提交就是这种
19
//xhr.send('username=alex&age=18');
20
//常用2：不能直接传对象，需要传字符串类型,json解决
21
xhr.send(
22
  JSON.stringify({
23
    username: 'alex',
24
    age: 18,
25
  }),
26
);

展开收起

跨域#

初识跨域#

跨域就是浏览器不允许“不同源之间互相访问数据”。
跨域是指浏览器基于同源策略限制不同源之间的资源访问行为。同源是指协议、域名和端口完全相同。跨域并不是请求无法发送，而是服务器返回的数据被浏览器拦截。常见解决方式有 CORS、代理和 JSONP。

什么是“同源”？

浏览器有一个规则叫：同源策略，判断是否同源看三点：协议 + 域名 + 端口

1
//同源（可以访问）
2
http://localhost:3000
3
http://localhost:3000
4
//不同源（跨域）
5
http://localhost:3000
6
http://localhost:8080

跨域本质是什么？

很多人误解：跨域 = 请求发不出去，其实不是，请求其实已经发出去了，但浏览器拦截了响应

为什么要有跨域限制？

坏网站可以读取你的银行网站数据，比如你登录了银行，同时打开恶意网站，恶意网站可以直接读取你的账户信息，所以浏览器规定不同源之间不能随便读数据

跨域发生在哪里？

跨域只在：浏览器生效，不跨域情况：Node.js 请求接口 → 没有跨域问题

哪些操作会触发跨域？

Ajax / Fetch
XMLHttpRequest
Axios

跨域的错误长什么样？

Access to XMLHttpRequest has been blocked by CORS policy
No ‘Access-Control-Allow-Origin’ header

跨域的解决方案

后端设置 CORS（最常用）;Access-Control-Allow-Origin: *
代理（前端常用）：前端 → 本地服务器 → 后端
JSONP（老方案）：利用 script 标签不受跨域限制
iframe / postMessage：用于特殊场景

CORS 跨域资源共享#

CORS 是浏览器“允许跨域访问”的一种官方解决方案。
CORS 不是前端的东西，是后端设置的规则
ie10及以上可以兼容

核心请求头

请求头（浏览器自动带）

1
//我来自哪个源
2
Origin: http://front.a.cn

响应头（后端设置）

1
//允许所有域名
2
Access-Control-Allow-Origin: *
3
//只允许指定域名：
4
Access-Control-Allow-Origin: http://front.a.cn

JSONP#

JSONP 全称：JSON with Padding，利用 <script> 标签没有跨域限制的特性，实现跨域获取数据的一种老方案。

JSONP 是一种利用 script 标签没有跨域限制而实现跨域请求的技术。其原理是前端定义一个回调函数，通过 script 标签请求服务器，服务器返回一段执行该回调函数的 JavaScript 代码，从而实现数据获取。JSONP 只能发送 GET 请求，安全性较差，现在基本被 CORS 替代。

手写 JSONP

1
function jsonp(url, callback) {
2
  const script = document.createElement('script');
3
  script.src =`${url}?callback=${callback}`;
4
  document.body.appendChild(script);
5
}
6

7
function handleResponse(data) {
8
  console.log(data);
9
}
10

11
jsonp(
12
  'https://www.imooc.com/api/http/jsonp',
13
  'handleResponse'
14
);

JSONP 的缺点:

只能 GET
安全性差
错误处理麻烦
需要服务器配合

XHR 对象#

XHR 的属性#

重点属性：

response：获取响应数据

1
xhr.response  //兼容问题 IE10及以上可以用
2

3
//返回值由：xhr.responseType决定
4
xhr.responseType = 'json'; //返回json
5

6
//如果responseType不设置就是字符串，所以可以使用xhr.responseText

responseType：指定响应数据类型

1
xhr.responseType = 'json';

可选值：

值	含义
‘’	默认字符串
text	文本
json	JSON对象
blob	二进制文件
arraybuffer	二进制数据
document	XML/HTML文档

timeout ：请求超时时间，单位：毫秒(ms)

1
//open之后，send之前设置
2
xhr.timeout = 5000;//5秒后自动超时，连接取消

withCredentials ：是否携带 Cookie

1
//默认false
2
xhr.withCredentials = true;//跨域请求
3

4
//使用Ajax发送请求，默认情况下，同域时，会携带Cookie;跨域时，不会
5
//xhr.withCredentials = true;
6
//最终能否成功跨域携带Cookie，还要看服务器同不同意，服务器必须指定域名，不能Access-Control-Allow-Origin: *

其他属性

readyState：表示请求当前的状态。

1
xhr.readyState

值	状态	含义
0	UNSENT	XHR 已创建，还没调用 open()
1	OPENED	已调用 open()
2	HEADERS_RECEIVED	已收到响应头
3	LOADING	正在接收响应体
4	DONE	请求完成

status：HTTP 状态码

1
xhr.status
2

3
200
4
201
5
204
6
404
7
500

statusText：状态码对应的描述

1
xhr.statusText
2

3
200 OK
4
404 Not Found
5
500 Internal Server Error

responseText：获取服务器返回的文本数据

1
xhr.responseText
2

3
{
4
  "name": "Tom",
5
  "age": 18
6
}
7
const data = JSON.parse(xhr.responseText);

responseURL：最终响应的 URL

1
xhr.responseURL
2
//https://api.xxx.com/user  //一般用于重定向后的最终地址

upload ：上传对象，用于监听文件上传进度

1
xhr.upload.onprogress = function (e) {
2
  console.log(e.loaded);
3
};

responseXML：获取 XML 数据

1
xhr.responseXML
2
//返回XMLDocument，基本不用，json取代

属性	用途	常用程度
readyState	请求状态	⭐⭐⭐⭐⭐
status	HTTP状态码	⭐⭐⭐⭐⭐
responseText	文本响应	⭐⭐⭐⭐⭐
response	响应数据	⭐⭐⭐⭐
responseType	响应类型	⭐⭐⭐⭐
timeout	超时时间	⭐⭐⭐
withCredentials	携带Cookie	⭐⭐⭐⭐⭐
statusText	状态描述	⭐⭐⭐
upload	上传进度	⭐⭐⭐
responseXML	XML响应	⭐⭐

XHR 的方法#

重点方法：

abort()：取消请求，一般配合onabort事件使用

1
xhr.abort();
2

3
const xhr = new XMLHttpRequest();
4
xhr.open('GET', '/user');
5
xhr.send();
6
xhr.abort();

setRequestHeader()：设置请求头。

1
//必须在open()之后send()之前
2
//不是所有的头信息能设置，出于安全，比如 Origin: http://front.a.cn 伪造跨域就不能设置
3
xhr.setRequestHeader(name, value);
4
//Content-Type告诉服务器，浏览器发送的数据是什么格式的
5
xhr.setRequestHeader(
6
  'Content-Type',
7
  'application/json'
8
);
9
xhr.setRequestHeader(
10
  'Authorization',
11
  token
12
);

其他方法：

open()：初始化一个请求

1
xhr.open(method, url, async);
2
xhr.open('POST', '/login', true);

参数	说明
method	请求方法（GET、POST…）
url	请求地址
async	是否异步，默认 true

send()：发送请求。

1
//GET 请求
2
xhr.send();
3
//POST 请求
4
xhr.send(data);
5

6
xhr.send(
7
  JSON.stringify({
8
    username: 'admin',
9
    password: '123456'
10
  })
11
);

getResponseHeader() ：获取指定响应头

1
xhr.getResponseHeader(name);
2
const type = xhr.getResponseHeader('Content-Type');
3
console.log(type);//application/json

getAllResponseHeaders()：获取所有响应头

1
const headers =
2
  xhr.getAllResponseHeaders();
3
console.log(headers);
4

5

6
content-type: application/json
7
content-length: 123
8
server: nginx

overrideMimeType() ：修改响应的 MIME 类型。

1
xhr.overrideMimeType(
2
  'application/json'
3
);

XHR 最常用的方法总结

方法	作用	常用程度
open()	初始化请求	⭐⭐⭐⭐⭐
send()	发送请求	⭐⭐⭐⭐⭐
setRequestHeader()	设置请求头	⭐⭐⭐⭐
getResponseHeader()	获取一个响应头	⭐⭐⭐
getAllResponseHeaders()	获取全部响应头	⭐⭐⭐
abort()	取消请求	⭐⭐⭐⭐
overrideMimeType()	修改 MIME 类型	⭐⭐

XHR 的事件#

为什么需要事件？

因为ajax是异步的，所以需要在某个时机通知我们，请求发生了什么这就是事件的作用。

重点事件

onload：请求成功完成时触发

和 onreadystatechange 的区别：onreadystatechange状态变化触发多次，onload请求成功结束触发一次

1
xhr.onload = function () {
2
  console.log(xhr.responseText);
3
};
4
//eg  IE10
5
xhr.onload = function () {
6
  if (
7
    xhr.status >= 200 &&
8
    xhr.status < 300
9
  ) {
10
    console.log(xhr.response);
11
  }
12
};

onerror ：请求失败时触发

1
xhr.onerror = function () {
2
  console.log('网络错误');
3
};
4
//404和500不会触发 onerror  IE10
5
//只处理断网、DNS失败、服务器无法连接

ontimeout：请求超时时触发

1
xhr.timeout = 5000;
2
//ie8
3
xhr.ontimeout = function () {
4
  console.log('请求超时');
5
};

onabort ：请求被取消时触发

1
xhr.onabort = function () {
2
  console.log('请求取消');
3
};
4
//xhr.abort();会触发onabort  IE10

其他事件

onreadystatechange：每次xhr.readyState发生变化时触发。

1
xhr.onreadystatechange = function () {
2
  console.log(xhr.readyState);
3
};
4
//eg：
5
xhr.onreadystatechange = function () {
6
  if (
7
    xhr.readyState === 4 &&
8
    xhr.status === 200
9
  ) {
10
    console.log(xhr.responseText);
11
  }
12
};

onloadstart ：请求开始时触发

1
xhr.onloadstart = function () {
2
  console.log('开始请求');
3
};

onloadend：请求结束时触发

1
xhr.onloadend = function () {
2
  console.log('请求结束');
3
};
4
//无论成功失败超时取消都会触发

onprogress：请求过程中不断触发

1
//例如下载文件：
2
xhr.onprogress = function (e) {
3
  console.log(e.loaded);
4
};
5
console.log(
6
  e.loaded,
7
  e.total
8
);
9
const percent = e.loaded / e.total * 100;

upload.onprogress ：上传进度监听

1
xhr.upload.onprogress = function (e) {
2
  const percent =
3
    e.loaded / e.total * 100;
4

5
  console.log(percent);
6
};
7
//文件上传进度条、图片上传、视频上传

常用事件总结

事件	作用	常用程度
onreadystatechange	状态变化	⭐⭐⭐⭐⭐
onload	请求成功	⭐⭐⭐⭐
onerror	网络错误	⭐⭐⭐⭐
ontimeout	超时	⭐⭐⭐
onabort	请求取消	⭐⭐⭐
onprogress	下载进度	⭐⭐⭐
upload.onprogress	上传进度	⭐⭐⭐⭐
onloadstart	请求开始	⭐⭐
onloadend	请求结束	⭐⭐

FormData#

使用Ajax提交表单

1
<form id="loginForm">
2
  <input type="text" name="username" placeholder="用户名">
3
  <input type="password" name="password" placeholder="密码">
4
  <button type="submit">登录</button>
5
</form>
6
<script>
7
const form = document.getElementById('loginForm');
8
const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
9
const { username, password } = form;
10
form.addEventListener('submit', function (e) {
11
  // 阻止浏览器默认提交
12
  e.preventDefault();
13
  //const formData = new FormData(form);
14
  const xhr = new XMLHttpRequest();
15
  xhr.onload = function () {
16
    if (
17
      (xhr.readyState === 4 && xhr.status === 200) ||
18
      xhr.status === 304
19
    ) {
20
      console.log(xhr.responseText);
21
    }
22
  };
23
  xhr.open('POST', url, true);
24
  //组装数据
25
  const data = `username=${username.value}&password=${password.value}`;
26
  //设置请求头
27
  xhr.setRequestHeader(
28
    'Content-Type',
29
    'application/x-www-form-urlencoded',
30
  );
31
  xhr.send(data);
32
});
33
</script>

展开收起

组装数据改版：直接包装成FormData发送

1
const form = document.getElementById('loginForm');
2
const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
3
form.addEventListener('submit', function (e) {
4
  // 阻止浏览器默认提交
5
  e.preventDefault();
6
  const xhr = new XMLHttpRequest();
7
  xhr.onload = function () {
8
    if (
9
      (xhr.readyState === 4 && xhr.status === 200) ||
10
      xhr.status === 304
11
    ) {
12
      console.log(xhr.responseText);
13
    }
14
  };
15
  xhr.open('POST', url, true);
16
  //组装数据
17
  const data = new FormData(form);
18
  for (const item of data) {
19
    console.log(item);
20
  }
21

22
  xhr.send(data);

展开收起

FormData基本用法

1
const form = document.getElementById("loginForm");
2
const formData = new FormData(form);
3
xhr.send(formData);
4
//添加数据：append()
5
const formData = new FormData();
6
formData.append('username', '张三');
7
formData.append('age', 18);
8
//添加文件
9
const file = document.getElementById('file').files[0];
10
formData.append('avatar', file);
11
//添加多个同名字段
12
formData.append('hobby', '篮球');
13
formData.append('hobby', '足球');
14
formData.append('hobby', '游戏');
15
//修改数据：set()
16
formData.append('name', '张三');
17
formData.set('name', '李四');//name=李四
18
//获取数据
19
formData.get('username');

展开收起

封装Ajax#

ajax.js

1
import DEFAULTS from './defaults';
2
class Ajax {
3
  constructor(url, options) {
4
    this.url = url;
5
    this.options = Object.assign({}, DEFAULTS, options);
6
    //初始化
7
    this.init();
8
  }
9
  //初始化
10
  init() {
11
    //实例化XMLHttpRequest
12
    const xhr = new XMLHttpRequest();
13
    this.xhr = xhr;
14
    this.bindEvent(); //监听事件
15
  }
16

17
  //监听事件
18
  bindEvent() {
19
    const xhr = this.xhr;
20
    const { success, httpCodeError, error, abort, timeout } = this.options;
21
    //请求成功完成时触发
22
    xhr.onload = () => {
23
      if (this.ok) {
24
        success(xhr.response, xhr);
25
      } else {
26
        httpCodeError(xhr.status, xhr);
27
      }
28
    };
29
    //请求失败时触发
30
    xhr.onerror = () => {
31
      error(xhr);
32
    };
33
    //onabort请求被取消时触发
34
    xhr.onabort = () => {
35
      abort(xhr);
36
    };
37
    //ontimeout请求超时时触发
38
    xhr.ontimeout = () => {
39
      timeout(xhr);
40
    };
41
  }
42
  //检测响应http状态码是否正常
43
  ok() {
44
    const xhr = this.xhr;
45
    return (xhr.status >= 200 && xhr.status < 300) || xhr.status === 304;
46
  }
47
}
48
export default Ajax;

展开收起

defaults.js

1
//默认参数
2
const DEFAULTS = {
3
  method: 'GET',
4
  params: null, //请求头
5
  data: null, //请求体
6
  contentType: 'application/x-www-form-urlencoded',
7
  response: '',
8
  timeoutTime: 0,
9
  withCredentials: false,
10
  //方法
11
  success() {},
12
  httpCodeError() {},
13
  error() {},
14
  abort() {},
15
  timeout() {},
16
};

展开收起

用类封装ajax，能传入url和配置
使用DEFAULTS.js设置默认的配置：method、params、data、contentType、response、timeoutTime、withCredentials
init初始化XMLHttpRequest，绑定this.xhr = xhr全局可用，this.bindEvent()绑定监听事件
onload的时候触发自定义的success方法，否则触发自定义的httpCodeError方法
onerror触发自定义的error方法
onabort触发自定义的abort方法
ontimeout触发自定义的timeout方法

继续封装优化：

ajax.js

1
import { serialize, addURLData } from './utils';
2
//get的时候，传参数需要处理addParam()
3
xhr.open(this.options.method, this.url + this.addParam(), true);
4
//在地址上添加数据
5
  addParam() {
6
    const { params } = this.options;
7
    //如果为空，直接返回''，比如post请求params就是null
8
    //要传对象
9
    if (!params) {
10
      return '';
11
    }
12
    //处理对象形式
13
    //两种情况：一种本身没参数的，一种本身就带参数的，追加参数的
14
    //工具类解决
15
    return addURLData(thi.url, serialize(params));
16
  }

展开收起

utils.js

1
//工具函数
2

3
//数据序列化成urlencoded格式的字符串
4
const serialize = (param) => {
5
  const results = [];
6
  for (const [key, value] of Object.entries(param)) {
7
    results.push(`${encodeURIComponent(key)}=${encodeURIComponent(value)}`);
8
  }
9
  return results.join('&');
10
};
11

12
//给url添加参数
13
const addURLData = (url, data) => {
14
  if (!data) return '';
15
  //判断url是否已经有参数
16
  //如果有?就用&，如果没有就用?
17
  const mark = url.includes('?') ? '&' : '?';
18
  return `${mark}${data}`;
19
};
20
export { serialize, addURLData };

展开收起

open的增加，method，url，和是否异步，method直接配置取就可以，url这里需要考虑get的情况在url添加
创建工具函数，addURLData：给url添加参数，serialize数据序列化成urlencoded格式的字符串

继续优化封装

ajax.js

1
import {
2
  HTTP_GET,
3
  CONTENT_TYPE_FORM_URLENCODED,
4
  CONTENT_TYPE_FORM_JSON,
5
} from './constants';
6

7
//发送请求
8
this.sendData();
9
  //发送
10
  sendData() {
11
    const xhr = this.xhr;
12
    if (!this.isSendData()) {
13
      return xhr.send(null);
14
    }
15
  }
16
  //是否需要使用send发送数据
17
  isSendData() {
18
    const { data, method } = this.options;
19
    if (!data) return false;
20
    //判断，转成都是小写
21
    if (method.toLowerCase() === HTTP_GET.toLowerCase()) return false;
22
    return true;
23
  }

展开收起

constants.js

1
//常量
2
export const HTTP_GET = 'GET';
3
export const CONTENT_TYPE_FORM_URLENCODED = 'application/x-www-form-urlencoded';
4

5
export const CONTENT_TYPE_FORM_JSON = 'application/json';

defaults.js

1
import { HTTP_GET, CONTENT_TYPE_FORM_URLENCODED } from './constants';
2
//默认参数
3
const DEFAULTS = {
4
  method: HTTP_GET,
5
  params: null, //请求头
6
  data: null, //请求体
7
  contentType: CONTENT_TYPE_FORM_URLENCODED,
8
  response: '',
9
  timeoutTime: 0,
10
  withCredentials: false,
11
  //方法
12
  success() {},
13
  httpCodeError() {},
14
  error() {},
15
  abort() {},
16
  timeout() {},
17
};

展开收起

最后需要把数据发送出去，那就需要判断是否需要发送，get请求不需要发送，直接null
sendData就是发送，isSendData就是判断要不要发送
增加常量，统一管理常量信息

继续完善优化

ajax.js

1
import { serialize, addURLData, serializeJSON } from './utils';
2
//发送
3
  sendData() {
4
    const xhr = this.xhr;
5
    if (!this.isSendData()) {
6
      return xhr.send(null);
7
    }
8
    //需要传入就直接传入发送了，但是这里需要判断数据的格式
9
    //xhr.send()
10
    let resultData = null;
11
    //判断是不是FormData
12
    if (!this.isFormData()) {
13
      resultData = data;
14
    } else if (this.isFormURLEncodedData()) {
15
      //发送application/x-www-form-urlencoded格式数据
16
      this.setContentType(CONTENT_TYPE_FORM_URLENCODED);
17
      resultData = serialize(data);
18
    } else if (this.isJSONData()) {
19
      //发送JSON格式数据
20
      this.setContentType(CONTENT_TYPE_FORM_JSON);
21
      resultData = serializeJSON(data);
22
    } else {
23
      this.setContentType();
24
      resultData = data;
25
    }
26
    xhr.send(resultData);
27
  }
28

29
//判断是不是FormData
30
  isFormData() {
31
    return this.options.data instanceof FormData;
32
  }
33
  //application/x-www-form-urlencoded格式数据
34
  isFormURLEncodedData() {
35
    return this.options.responseType
36
      .toLowerCase()
37
      .includes(CONTENT_TYPE_FORM_URLENCODED);
38
  }
39
  //json
40
  isJSONData() {
41
    return this.options.responseType
42
      .toLowerCase()
43
      .includes(CONTENT_TYPE_FORM_JSON);
44
  }
45
  //setContentType
46
  setContentType(contentType = this.options.contentType) {
47
    if (!contentType) return;
48
    this.xhr.setRequestHeader('Content-Type', contentType);
49
  }
50
  //获取
51
  getXHR() {
52
    return this.xhr;
53
  }

展开收起

utils.js

1
//数据序列化成json
2
const serializeJSON = (param) => {
3
  return JSON.stringify(param);
4
};
5
export { serialize, addURLData, serializeJSON };

判断传的是fromdata、application/x-www-form-urlencoded还是json还是其他格式
setContentType设置请求头发送的数据格式

最终封装和修复bug

源码地址：https://github.com/youzi177/AjaxPackaging

测试API：https://github.com/youzi177/AjaxApi

Ajax应用#

搜索提示#

二级菜单#

多个Ajax请求的并发执行#

Axios与Fetch#

axios#

基本使用：

1
const url = 'http://192.168.2.132:3000/post';
2
      axios(url, {
3
        method: 'post',
4
        Headers: { 'content-type': 'application/json' },
5

6
        //传对象就是application/json
7
        data: {
8
          username: 'alex',
9
          age: 18,
10
        },
11
        timeout: 1,
12
        withCredentials: false,
13
      })
14
        .then((result) => {
15
          console.log(result.data);
16
        })
17
        .catch((err) => {
18
          console.log(err);
19
        });

展开收起

Fetch#

Fetch是Ajax于Promise 的(XMLHttpRequest)的一种替代方案，它是基于Promise

fetch 是基于 Promise 的网络请求 API，现在基本已经替代了大部分 XMLHttpRequest 的使用场景。

和 XHR 对比

功能	XHR	Fetch
Promise	❌	✅
async/await	❌	✅
自动 reject 404	❌	❌
自动 reject 网络错误	❌	✅
abort	`xhr.abort()`	`AbortController`
timeout	`xhr.timeout`	❌ 自己实现
上传进度	✅	❌
下载进度	✅	✅（Stream）
设置 responseType	✅	不需要，调用 `json()`、`text()` 等即可

基本使用

1
async function login() {
2
  try {
3
    const response = await fetch(
4
      'http://localhost:3000/login',
5
      {
6
        method: 'POST',
7
        headers: {
8
          'Content-Type': 'application/json',
9
        },
10
        body: JSON.stringify({
11
          username: 'admin',
12
          password: '123456',
13
        }),
14
      }
15
    );
16

17
    if (!response.ok) {
18
      throw new Error(`HTTP Error: ${response.status}`);
19
    }
20

21
    const data = await response.json();
22

23
    console.log('成功：', data);
24
  } catch (error) {
25
    console.log('失败：', error.message);
26
  }
27
}
28

29
login();

展开收起

前端本地存储

Thu, 22 Oct 2026 00:46:59 GMT

初识 Cookie#

浏览器存储在本地的一小段字符串数据，用来保存用户状态。所以敏感信息不要放在Cookie
一般会自动随着浏览器每次请求发送到服务器上（修改网站语言）

Cookie有什么用

Cookie跟踪统计用户访问该网站的习惯，比如什么时间访问，访问了哪些页面，在每个网页的停留时间等利用（Cookie + JS + 后端日志 + 大数据系统）

在浏览器操作Cookie

谷歌浏览器-F12控制台-Application-Cookie-网站输入KV值
document.cookie 能输出刚才的Cookie

Cookie 的基本用法#

写入Cookie

1
//写入
2
     document.cookie = 'username = youzi';
3
     document.cookie = 'age = 18';
4
     // 不能一起写入
5
     //document.cookie = 'username = youzi;age = 18';

读取Cookie

1
console.log(document.cookie);

Cookie 的属性#

Cookie 的属性（Attributes）决定了，这个 Cookie 能存多久、在哪些请求中发送、谁可以访问、是否安全等。
Cookie 的名称或值如果包含非英文字母，则写入时需要使用encodeURIComponent0编码，读取时使用decodeURIComponent(解码），一般名称使用英文字母，不要用中文，值可以用中文，但是要编码
如果没有设置失效(到期)时间，这样的Cookie称为会话Cookie，它存在内存中，当会话结束，也就是浏览器关闭时，Cookie消失
```
1
//属性可以一起写；expires指定 Cookie 的绝对过期时间
2
document.cookie = `username = youzi;expires =${new Date('2026-6-27 13:41:00')}`;
```
Max-Age（存活时间）：指定 Cookie 还能存活多少秒。
```
1
document.cookie = 'age=18;max-age=5';
```
如果max-age的值是0或负数，则Cookie会被删除
Domain（域名）：哪些域名可以使用这个 Cookie。默认值就是当前网站
HttpOnly：JavaScript 无法访问这个 Cookie。防止XSS 攻击
SameSite：防止 CSRF 攻击。只有同站请求才发送 Cookie。
只有name，value，Domain，path都一样的情况下才算一个Cookie ，才会覆盖

属性	作用
Expires	绝对过期时间
Max-Age	存活秒数
Path	生效路径（同一个域名下）
Domain	生效域名（不同域名的情况）
Secure	仅 HTTPS 发送
HttpOnly	JS 不可访问
SameSite	防止 CSRF
Partitioned	第三方 Cookie 分区

Cookie 的封装#

为什么封装？

语法难用

实际开发中，我们不会直接到处写：
```
1
document.cookie = 'age=18;max-age=3600';
2
document.cookie = 'name=Tom';
3
console.log(document.cookie);
```
因为 document.cookie 的 API 非常难用：读取需要自己解析字符串；删除需要设置过期时间；修改和设置逻辑重复。

document.cookie打印的全部，不能根据k值获取

1
document.cookie = 'name=Tom';
2
document.cookie = 'age=18';
3
document.cookie = 'gender=male';
4
console.log(document.cookie);//name=Tom; age=18; gender=male

封装：

1
const cookie = {
2
  set(name, value, maxAge, path = '/') {
3
    document.cookie =
4
      `${encodeURIComponent(name)}=${encodeURIComponent(value)};max-age=${maxAge};path=${path}`;
5
  },
6

7
  get(name) {
8
    const cookies =
9
      document.cookie.split('; ');
10

11
    for (let item of cookies) {
12
      const [key, value] =
13
        item.split('=');
14

15
      if (
16
        decodeURIComponent(key) === name
17
      ) {
18
        return decodeURIComponent(value);
19
      }
20
    }
21

22
    return null;
23
  },
24

25
  remove(name, path = '/') {
26
    document.cookie =
27
      `${encodeURIComponent(name)}=;max-age=0;path=${path}`;
28
  }
29
};
30

31
cookie.set('name', 'Tom', 3600);
32
cookie.get('name');
33
cookie.remove('name');

展开收起

实际开发中可以使用这个包：js-cookie

1
Cookies.set('token', 'abc');
2
Cookies.get('token');
3
Cookies.remove('token');

Cookie 的注意事项#

大小限制约 4KB
数量有限
自动随请求发送
不要存敏感信息
HttpOnly 无法被 JS 读取
删除时 Path/Domain 要一致
只能存字符串
特殊字符要编码
跨域默认不发送 Cookie
会过期，不适合存重要数据

初识 localStorage#

localStorage 是浏览器提供的一种持久化本地存储，它允许前端把数据保存在浏览器本地，即使：刷新页面、关闭浏览器、重新打开浏览器数据依然存在。

为什么会有 localStorage？

以前只有 Cookie，但是 Cookie 有很多缺点：容量小（4KB），自动发送给服务器增加请求体积，所以 HTML5 推出了Web Storage，包括localStorage和sessionStorage

localStorage 的特点

永久保存（除非主动删除）
不会自动发送给服务器
容量大5MB ~ 10MB
同源限制：协议、域名和端口全部相同才能访问

localStorage 的 API

1
//保存数据
2
localStorage.setItem('name', 'Tom');
3
//获取数据
4
localStorage.getItem('name');//Tom
5
localStorage.getItem('gender');//null
6
//删除某一项
7
localStorage.removeItem('name');
8
//清空全部
9
localStorage.clear();
10
//获取数量
11
localStorage.length;
12
//获取第几个 key
13
localStorage.key(0);

localStorage 只能存字符串

1
localStorage.setItem('age', 18);
2
localStorage.getItem('age');//"18" 是字符串

存对象怎么办？

1
//错误
2
localStorage.setItem('user', {
3
  name: 'Tom'
4
});
5
//正确
6
const user = {
7
  name: 'Tom',
8
  age: 18
9
};
10

11
localStorage.setItem(
12
  'user',
13
  JSON.stringify(user)
14
);
15
//读取
16
const user = JSON.parse(
17
  localStorage.getItem('user')
18
);
19
//结果
20
{
21
  name: 'Tom',
22
  age: 18
23
}

展开收起

实际开发中的使用场景

1
//保存 Token
2
localStorage.setItem(
3
  'token',
4
  res.data.token
5
);
6
//保存主题
7
localStorage.setItem(
8
  'theme',
9
  'dark'
10
);
11
//保存用户信息
12
localStorage.setItem(
13
  'userInfo',
14
  JSON.stringify(user)
15
);
16
//保存搜索历史
17
localStorage.setItem(
18
  'history',
19
  JSON.stringify(list)
20
);

展开收起

为什么 Token 喜欢放 localStorage？

不会自动发送、容量大、操作简单

localStorage 的缺点

容易被 XSS 攻击，不要把高敏感数据放 localStorage。
不会自动过期，需要自己管理过期时间。
只能存字符串

localStorage 的注意事项#

只能存字符串
关闭浏览器不会消失

没有过期时间，如果要设置过期：

1
//存
2
localStorage.setItem(
3
  'token',
4
  JSON.stringify({
5
    value: 'abc',
6
    expire: Date.now() + 3600 * 1000
7
  })
8
);
9
//取
10
const data = JSON.parse(
11
  localStorage.getItem('token')
12
);
13

14
if (Date.now() > data.expire) {
15
  localStorage.removeItem('token');
16
}

展开收起

容易被 XSS 攻击
不会自动发送给服务器
同源限制
容量有限制，5MB~10MB
同步 API，会阻塞 JS 主线程。

前端数据交互与HTTP协议

Thu, 22 Oct 2026 00:44:23 GMT

初识前后端通信#

是什么？

前端和后端数据交互的过程
可以把整个过程理解成：前端（浏览器） ←→ HTTP协议 ←→ 后端（服务器） ←→ 数据库

前后端通信的过程与概念解释#

前后端通讯过程

概念解释

前端：用户能够直接看到和操作的部分。

后端：处理业务逻辑和数据的部分。

客户端：发起请求的一方。

服务器端：提供服务并响应请求的一方。

前后端的通信方式#

通信方式	是否实时	是否刷新页面	使用场景
Form 表单	❌	✅	传统网站
Ajax（一种思想）	❌	❌	普通接口
Fetch	❌	❌	现代项目
Axios	❌	❌	企业开发
Polling	伪实时	❌	简单通知
Long Polling	准实时	❌	消息系统
SSE	单向实时	❌	AI输出、通知
WebSocket	双向实时	❌	聊天、游戏

初识 HTTP#

什么是 HTTP？

HTTP 全称：HyperText Transfer Protocol（超文本传输协议）
简单来说：HTTP 是浏览器（客户端）和服务器（服务端）之间通信的规则。

为什么需要 HTTP？

浏览器和服务器是两台不同的计算机，它们需要一套规则：怎么发消息？消息格式是什么？怎么返回数据？返回成功还是失败？这套规则就是 HTTP。

HTTP 的工作过程

打开百度网站，浏览器发送请求
服务器收到请求，返回响应
浏览器解析 HTML，显示页面。

HTTP 是请求-响应模型

特点：一次请求-一次响应-连接结束

HTTP 中两个最重要的概念

请求（Request）：浏览器发给服务器。
响应（Response）：服务器返回给浏览器。

HTTP 请求包含什么？

请求行：GET /user HTTP/1.1，请求方法GET ；请求路径/user；协议版本：HTTP/1.1
请求头（Headers）：告诉服务器更多信息。
请求体（Body）：通常POST、PUT会有请求体。

HTTP 响应包含什么？

状态行：HTTP/1.1 200 OK；协议版本，状态码，状态描述

响应头：

1
Content-Type: application/json
2
Content-Length: 100

响应体：
```
1
{
2
  "name":"Tom"
3
}
```

HTTP 常见请求方法

GET：获取数据
POST：提交数据
PUT：修改数据。
DELETE：删除数据。

HTTP 报文#

可以理解成：浏览器和服务器之间传递的一封“信”。

1
浏览器  --------HTTP报文-------->  服务器
2
浏览器  <-------HTTP报文---------  服务器

用一张图理解

1
【请求报文】
2

3
请求行
4
请求头
5
空行
6
请求体
7

8

9
【响应报文】
10

11
状态行
12
响应头
13
空行
14
响应体

HTTP 方法#

发送请求时采用的方法，和响应无关
虽然有各自语义，但是并不是强制的

常用方法和语义：

方法	作用	CRUD
GET	查询数据	Read
POST	新增数据	Create
PUT	修改数据	Update
DELETE	删除数据	Delete

RESTful 接口设计

RESTful 是一种接口设计风格，它把数据看作资源，使用 URL 表示资源，使用 HTTP 方法表示对资源的操作。

比如：

1
//注册用户：一个接口，通过HTTP 方法表示操作
2
//get
3
https://api.youzi177.cn/api/user?id=1  //获取用户信息
4
//post
5
https://api.youzi177.cn/api/user  //注册用户

GET 和 POST 方法的对比#

get没有请求体，有请求头，用请求头发送数据
post有请求体，用请求体请求数据

区别：

方法	作用
GET	获取资源（查询）
POST	提交数据（新增、登录、上传等）

数据发送方式不同：

GET：参数通常放在 URL 后面
POST：参数放在请求体（Body）中

注意事项：

安全性：很多人认为GET 不安全，POST 安全，这是错误的，实际情况是，在HTTP下GET 和 POST 都是明文传输，都可以被抓包，真正的安全来自HTTPS，而不是 GET 或 POST，为什么大家觉得 GET 不安全？因为GET 参数出现在 URL 中，容易被浏览器记录，被历史记录保存，被日志记录，所以敏感数据不要用 GET。
数据长度限制：GET的，URL 有长度限制，IE：约 2083 个字符，现代浏览器虽然支持更长，但依然不建议传大量数据。POST理论上没有固定限制，真正限制在服务器配置、Nginx 配置、Tomcat 配置
是否缓存：GET浏览器会缓存，可能直接从缓存读取，POST默认不会缓存。
是否可以收藏：GET可以收藏，因为参数在url中，POST不能直接收藏。因为请求体不会保存到地址栏。
幂等性：什么是幂等？执行一次和执行多次，结果一样。GET获取用户信息，执行多次，不会改变数据，所以GET 是幂等的。POST创建三条订单，所以POST不是幂等
GET 不能传大数据：这是错的，GET 的数据放在 URL 中，受 URL 长度限制，不适合传大量数据。
POST 一定有请求体：这是错的，HTTP 规范并没有强制要求POST 必须有 Body，只是实际开发中通常会有
GET 一定没有请求体，这也是错的，规范没有禁止 GET 带 Body，但大部分浏览器和服务器都不支持或忽略 GET Body，实际开发中GET 基本不使用 Body。

HTTP 状态码#

状态码	意义
200	成功
201	创建成功
301	永久重定向【谨慎使用】
302	临时重定向
401	未登录。
403	没有权限。
404	资源不存在。
500	服务器内部错误。

Babel与webpack

Wed, 21 Oct 2026 23:31:15 GMT

Babel 是什么#

Babel 是一个 JavaScript 编译器（转译器），负责把新的 JavaScript 代码转换成旧环境也能运行的代码。

为什么需要 Babel？

现代浏览器支持，但老浏览器（比如 IE）不支持箭头函数。Babel 可以把它转换成：

1
const fn = (a, b) => a + b;
2

3
//转换
4
var fn = function (a, b) {
5
  return a + b;
6
};

Babel 能干什么？

转换 ES6+ 语法：箭头函数、类、模板字符串、解构赋值，转换模块语法，转换实验性语法，编译 JSX以前 Node 不支持 ESM 时，经常这么干。Babel 不是打包工具，是负责代码转换

1
import { add } from './math.js';
2
//转换成
3
const { add } = require('./math');

Babel 的使用方式#

Babel 的使用方式其实就三步：安装 Babel-配置 Babel-执行编译

初始化项目

1
npm init -y

安装 Babel

1
npm install -D @babel/core @babel/cli @babel/preset-env

创建源码：

src/index.js

1
const fn = (a, b) => a + b;
2
console.log(fn(1, 2));

配置 Babel：

1
//babel.config.json
2
{
3
  "presets": ["@babel/preset-env"]
4
}
5
//或者
6
//.babelrc
7
{
8
  "presets": ["@babel/preset-env"]
9
}

执行编译

1
npx babel src -d dist

生成：dist/index.js

1
"use strict";
2
var fn = function fn(a, b) {
3
  return a + b;
4
};
5
console.log(fn(1, 2));

package.json 配置脚本

1
{
2
  "scripts": {
3
    "build": "babel src -d dist"
4
  }
5
}

指定目标环境：如果这里不设置，Babel（@babel/preset-env）默认会根据**目标环境（targets）**决定是否转换，现代环境下就不转换了

1
{
2
  "presets": [
3
    [
4
      "@babel/preset-env",
5
      {
6
        "targets": {
7
          "chrome": "80"
8
        }
9
      }
10
    ]
11
  ]
12
}
13
//只兼容 Chrome80+

配合 browserslist，Babel 会自动根据目标浏览器决定转换哪些语法。

1
//package.json
2
{
3
  "browserslist": [
4
    ">1%",
5
    "last 2 versions",
6
    "not dead"
7
  ]
8
}

使用 Babel 前的准备工作#

安装nodejs和npm ；推荐使用nvm
初始化项目(Babel 的使用方式已经有讲解)
安装bable需要的包(Babel 的使用方式已经有讲解)

使用 Babel 编译 ES6 代码#

Babel 的使用方式已经有讲解

Webpack是什么#

Webpack 是一个静态模块打包工具（Static Module Bundler）。
webpack是静态模块打包器，当webpack处理应用程序时，会将所有这些模块打包成一个或多个文件
模块：webpack可以处理js/css/图片、图标字体等单位文件
静态：开发过程中存在于本地的js/css/图片/图标字体等文件，就是静态的
动态内容webpack没办法处理

Webpack 初体验#

初始化项目

1
mkdir webpack-demo
2
cd webpack-demo
3
npm init -y

安装webpack需要的包

1
npm i webpack webpack-cli -D

创建示例代码：

src/math.js

1
export function add(a, b) {
2
  return a + b;
3
}

src/index.js

1
import { add } from './math';
2

3
console.log(add(1, 2));

配置webpack

1
const path = require('path');
2
module.exports = {
3
  mode: 'development', //  development开发模式 production生产模式
4
  entry: './src/index.js',
5
  output: {
6
    filename: 'bundle.js',
7
    path: path.resolve(__dirname, 'dist'),
8
  },
9
};

development（开发模式）：不压缩、可读性强、调试友好、构建快

production（生产模式）：代码压缩、Tree Shaking、性能优化、文件更小

打包测试

1
npx webpack
2
node dist/bundle.js

entry和output#

webpacke的4核心概念：entry、output、loader、plugins
entry输入：就是程序入口
output输出：打包之后路径

loader#

Loader 的作用：让 Webpack 能“读懂”非 JS 文件

试试babel-loader，ES6 → ES5

1
npm i -D babel-loader

1
const path = require('path');
2

3
module.exports = {
4
  mode: 'development',
5
  entry: './src/index.js',
6
  output: {
7
    filename: 'bundle.js',
8
    path: path.resolve(__dirname, 'dist'),
9
  },
10
  module: {
11
    rules: [
12
      {
13
        test: /\.(js|jsx)$/,
14
        use: ['babel-loader'],
15
        exclude: [path.join(__dirname, './node_modules')], //排除node_modules
16
      },
17
    ],
18
  },
19
};

展开收起

Loader 可以链式执行，执行顺序是 从右到左

1
use: ['style-loader', 'css-loader', 'postcss-loader']

plugins#

Plugin 用来“增强 Webpack 的能力”，而不是转换单个文件。

做什么：监听 Webpack 整个生命周期，做“全局事情”，比如打包前清空 dist、自动生成 HTML、压缩 JS、提取 CSS、打包分析、注入环境变量

区别：

对比	Loader	Plugin
作用	转换文件	扩展功能
作用范围	单个模块	整个构建流程
时机	加载阶段	编译生命周期
写法	`rules`	`plugins`

举例：清理 dist，插件clean-webpack-plugin ，每次打包前清空 dist目录

1
npm install --save-dev clean-webpack-plugin

1
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
2
plugins: [new CleanWebpackPlugin()]

从 Webpack 5 开始，官方已经内置了类似功能，可以直接使用

1
module.exports = {
2
  output: {
3
    clean: true
4
  }
5
};

举例：插件HtmlWebpackPlugin，该插件将为你生成一个 HTML5 文件，在 body 中使用 script 标签引入你所有 webpack 生成的 bundle

1
npm install --save-dev html-webpack-plugin

1
const HtmlWebpackPlugin = require('html-webpack-plugin');
2
plugins: [ new HtmlWebpackPlugin()],

HtmlWebpackPlugin进阶使用：多个js入口文件，多个html，a.html引入a.js，b.html引入b.js；并且配置压缩minify

1
const path = require('path');
2
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
3
const HtmlWebpackPlugin = require('html-webpack-plugin');
4
module.exports = {
5
  mode: 'development',
6

7
  entry: {
8
    index: './src/index.js',
9
    search: './src/search.js',
10
  },
11

12
  output: {
13
    filename: '[name].js',
14
    path: path.resolve(__dirname, 'dist'),
15
    clean: true,
16
  },
17
  module: {
18
    rules: [
19
      {
20
        test: /\.(js|jsx)$/,
21
        use: ['babel-loader'],
22
        exclude: [path.join(__dirname, './node_modules')], //排除node_modules
23
      },
24
    ],
25
  },
26
  plugins: [
27
    new HtmlWebpackPlugin({
28
      // template: 'index.html',不写模板，自动创建，demo样式可以这样
29
      filename: 'index.html', //重命名
30
      chunks: ['index'], //指定引入
31
      minify: {
32
        collapseWhitespace: true,
33
        keepClosingSlash: true,
34
        removeComments: true,
35
        removeRedundantAttributes: true,
36
        removeScriptTypeAttributes: true,
37
        removeStyleLinkTypeAttributes: true,
38
        useShortDoctype: true,
39
      },
40
    }),
41
    new HtmlWebpackPlugin({
42
      // template: 'search.html',
43
      filename: 'search.html', //重命名
44
      chunks: ['search'], //指定引入
45
      minify: {
46
        collapseWhitespace: true,
47
        keepClosingSlash: true,
48
        removeComments: true,
49
        removeRedundantAttributes: true,
50
        removeScriptTypeAttributes: true,
51
        removeStyleLinkTypeAttributes: true,
52
        useShortDoctype: true,
53
      },
54
    }),
55
  ],
56
};

展开收起

处理CSS文件#

webpack不认识除js以外的文件，所以这里需要loader

安装：

1
npm install -D style-loader css-loader

配置 Webpack

1
const path = require('path');
2

3
module.exports = {
4
  mode: 'development',
5

6
  entry: './src/index.js',
7

8
  output: {
9
    filename: 'bundle.js',
10
    path: path.resolve(__dirname, 'dist')
11
  },
12

13
  module: {
14
    rules: [
15
      {
16
        test: /\.css$/,
17
        use: ['style-loader', 'css-loader'] //⚠️loader 执行顺序是从右到左
18
      }
19
    ]
20
  }
21
};

展开收起

Webpack 实际做了这些事：

1：css-loader 阶段：把style.css转换成 JS 模块，类似：export default "body { background: pink; }";

2：style-loader 阶段：把 CSS 插入 DOM，类似：

1
const style = document.createElement('style');
2
style.innerHTML = "body { background: pink; }";
3
document.head.appendChild(style);

进阶处理CSS，使用link方式引入

安装插件：mini-css-extract-plugin

1
npm install -D mini-css-extract-plugin

使用：

1
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
2
{
3
        test: /\.css$/,
4
        use: [MiniCssExtractPlugin.loader, 'css-loader'], //换MiniCssExtractPlugin.loader
5
      },
6
new MiniCssExtractPlugin({
7
      filename: 'css/[name].css',
8
    }),

完整：

1
const path = require('path');
2
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
3
const HtmlWebpackPlugin = require('html-webpack-plugin');
4
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
5
module.exports = {
6
  mode: 'production',
7

8
  entry: {
9
    index: './src/index.js',
10
    search: './src/search.js',
11
  },
12

13
  output: {
14
    filename: '[name].js',
15
    path: path.resolve(__dirname, 'dist'),
16
    clean: true,
17
  },
18
  module: {
19
    rules: [
20
      {
21
        test: /\.(js|jsx)$/,
22
        use: ['babel-loader'],
23
        exclude: [path.join(__dirname, './node_modules')], //排除node_modules
24
      },
25
      {
26
        test: /\.css$/,
27
        use: [MiniCssExtractPlugin.loader, 'css-loader'], //换MiniCssExtractPlugin.loader
28
      },
29
      {
30
        test: /\.(png|jpg|jpeg|gif)$/i,
31
        type: 'asset/resource',
32
      },
33
      {
34
        test: /\.(png|jpg|jpeg)$/i,
35
        use: [
36
          {
37
            loader: 'image-webpack-loader',
38
            options: {
39
              mozjpeg: {
40
                quality: 70,
41
              },
42
            },
43
          },
44
        ],
45
      },
46
    ],
47
  },
48
  plugins: [
49
    new HtmlWebpackPlugin({
50
      // template: 'index.html',不写模板，自动创建，demo样式可以这样
51
      filename: 'index.html', //重命名
52
      chunks: ['index'], //指定引入
53
      minify: {
54
        collapseWhitespace: true,
55
        keepClosingSlash: true,
56
        removeComments: true,
57
        removeRedundantAttributes: true,
58
        removeScriptTypeAttributes: true,
59
        removeStyleLinkTypeAttributes: true,
60
        useShortDoctype: true,
61
      },
62
    }),
63
    new HtmlWebpackPlugin({
64
      // template: 'search.html',
65
      filename: 'search.html', //重命名
66
      chunks: ['search'], //指定引入
67
      minify: {
68
        collapseWhitespace: true,
69
        keepClosingSlash: true,
70
        removeComments: true,
71
        removeRedundantAttributes: true,
72
        removeScriptTypeAttributes: true,
73
        removeStyleLinkTypeAttributes: true,
74
        useShortDoctype: true,
75
      },
76
    }),
77
    new MiniCssExtractPlugin({
78
      filename: 'css/[name].css',
79
    }),
80
  ],
81
};

展开收起

使用file-loader处理CSS中的图片#

webpack不会处理远程的图片，所以，如果图片是在外部服务器的，webpack不会处理，可以正常执行
注意：在webpack4之前，处理本地css图片是需要这个包的，但是webpack5新增了Asset Modules，并且默认开启，所以在webpack5即便什么都不做，也不会出错，file-loader在webpack5不推荐使用

file-loader使用 ⚠2026年6月25日，webpack5下这插件不能使用，有问题，推荐新写法

1
npm install -D file-loader

1
const path = require('path');
2
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
3
const HtmlWebpackPlugin = require('html-webpack-plugin');
4
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
5
module.exports = {
6
  mode: 'production',
7

8
  entry: {
9
    index: './src/index.js',
10
    search: './src/search.js',
11
  },
12

13
  output: {
14
    filename: '[name].js',
15
    path: path.resolve(__dirname, 'dist'),
16
    clean: true,
17
  },
18
  module: {
19
    rules: [
20
      {
21
        test: /\.(js|jsx)$/,
22
        use: ['babel-loader'],
23
        exclude: [path.join(__dirname, './node_modules')], //排除node_modules
24
      },
25
      {
26
        test: /\.css$/,
27
        use: [MiniCssExtractPlugin.loader, 'css-loader'], //换MiniCssExtractPlugin.loader
28
      },
29
      // webpack5新特性
30
      // {
31
      //   test: /\.(png|jpg|jpeg|gif)$/i,
32
      //   type: 'asset/resource',
33
      // },
34
      {
35
        test: /\.(png|jpg|jpeg|gif)$/i,
36
        use: [
37
          {
38
            loader: 'file-loader',
39
            options: {
40
              name: '[name].[hash].[ext]',
41
              outputPath: 'images',
42
            },
43
          },
44
        ],
45
      },
46

47
    ],
48
  },
49
  plugins: [
50
    new HtmlWebpackPlugin({
51
      // template: 'index.html',不写模板，自动创建，demo样式可以这样
52
      filename: 'index.html', //重命名
53
      chunks: ['index'], //指定引入
54
      minify: {
55
        collapseWhitespace: true,
56
        keepClosingSlash: true,
57
        removeComments: true,
58
        removeRedundantAttributes: true,
59
        removeScriptTypeAttributes: true,
60
        removeStyleLinkTypeAttributes: true,
61
        useShortDoctype: true,
62
      },
63
    }),
64
    new HtmlWebpackPlugin({
65
      // template: 'search.html',
66
      filename: 'search.html', //重命名
67
      chunks: ['search'], //指定引入
68
      minify: {
69
        collapseWhitespace: true,
70
        keepClosingSlash: true,
71
        removeComments: true,
72
        removeRedundantAttributes: true,
73
        removeScriptTypeAttributes: true,
74
        removeStyleLinkTypeAttributes: true,
75
        useShortDoctype: true,
76
      },
77
    }),
78
    new MiniCssExtractPlugin({
79
      filename: 'css/[name].css',
80
    }),
81
  ],
82
};

展开收起

webpack新写法：asset/resource

1
const path = require('path');
2
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
3
const HtmlWebpackPlugin = require('html-webpack-plugin');
4
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
5
module.exports = {
6
  mode: 'production',
7

8
  entry: {
9
    index: './src/index.js',
10
    search: './src/search.js',
11
  },
12

13
  output: {
14
    filename: '[name].js',
15
    path: path.resolve(__dirname, 'dist'),
16
    clean: true,
17
  },
18
  module: {
19
    rules: [
20
      {
21
        test: /\.(js|jsx)$/,
22
        use: ['babel-loader'],
23
        exclude: [path.join(__dirname, './node_modules')], //排除node_modules
24
      },
25
      {
26
        test: /\.css$/,
27
        use: [MiniCssExtractPlugin.loader, 'css-loader'], //换MiniCssExtractPlugin.loader
28
      },
29
      // webpack5新特性
30
      {
31
        test: /\.(png|jpg|jpeg|gif)$/i,
32
        type: 'asset/resource',
33
        generator: {
34
          filename: 'img/[name].[contenthash][ext]', //img文件夹下创建图片
35
        },
36
      },
37
    ],
38
  },
39
  plugins: [
40
    new HtmlWebpackPlugin({
41
      // template: 'index.html',不写模板，自动创建，demo样式可以这样
42
      filename: 'index.html', //重命名
43
      chunks: ['index'], //指定引入
44
      minify: {
45
        collapseWhitespace: true,
46
        keepClosingSlash: true,
47
        removeComments: true,
48
        removeRedundantAttributes: true,
49
        removeScriptTypeAttributes: true,
50
        removeStyleLinkTypeAttributes: true,
51
        useShortDoctype: true,
52
      },
53
    }),
54
    new HtmlWebpackPlugin({
55
      // template: 'search.html',
56
      filename: 'search.html', //重命名
57
      chunks: ['search'], //指定引入
58
      minify: {
59
        collapseWhitespace: true,
60
        keepClosingSlash: true,
61
        removeComments: true,
62
        removeRedundantAttributes: true,
63
        removeScriptTypeAttributes: true,
64
        removeStyleLinkTypeAttributes: true,
65
        useShortDoctype: true,
66
      },
67
    }),
68
    new MiniCssExtractPlugin({
69
      filename: 'css/[name].css',
70
    }),
71
  ],
72
};

展开收起

使用html-withimg-loader处理HTML中的图片#

处理html的图片

安装

1
npm install -D html-withimg-loader

使用

1
const path = require('path');
2
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
3
const HtmlWebpackPlugin = require('html-webpack-plugin');
4
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
5
module.exports = {
6
  mode: 'production',
7

8
  entry: {
9
    index: './src/index.js',
10
    search: './src/search.js',
11
  },
12

13
  output: {
14
    filename: '[name].js',
15
    path: path.resolve(__dirname, 'dist'),
16
    clean: true,
17
  },
18
  module: {
19
    rules: [
20
      {
21
        test: /\.(js|jsx)$/,
22
        use: ['babel-loader'],
23
        exclude: [path.join(__dirname, './node_modules')], //排除node_modules
24
      },
25
      {
26
        test: /\.css$/,
27
        use: [MiniCssExtractPlugin.loader, 'css-loader'], //换MiniCssExtractPlugin.loader
28
      },
29
      // webpack5新特性
30
      {
31
        test: /\.(png|jpg|jpeg|gif)$/i,
32
        type: 'asset/resource',
33
        generator: {
34
          filename: 'img/[name].[contenthash][ext]', //img文件夹下创建图片
35
        },
36
      },
37
      // 处理html的图片，没有这个loader会报错
38
      {
39
        test: /\.html$/,
40
        use: ['html-withimg-loader'],
41
      },
42
      //webpack5 推荐使用html-loader
43
      // {
44
      //   test: /\.html$/,
45
      //   loader: 'html-loader',
46
      // },
47
    ],
48
  },
49
  plugins: [
50
    new HtmlWebpackPlugin({
51
      template: './src/index.html', //不写模板，自动创建，demo样式可以这样
52
      filename: 'index.html', //重命名
53
      chunks: ['index'], //指定引入
54
      minify: {
55
        collapseWhitespace: true,
56
        keepClosingSlash: true,
57
        removeComments: true,
58
        removeRedundantAttributes: true,
59
        removeScriptTypeAttributes: true,
60
        removeStyleLinkTypeAttributes: true,
61
        useShortDoctype: true,
62
      },
63
    }),
64
    new HtmlWebpackPlugin({
65
      // template: 'search.html',
66
      filename: 'search.html', //重命名
67
      chunks: ['search'], //指定引入
68
      minify: {
69
        collapseWhitespace: true,
70
        keepClosingSlash: true,
71
        removeComments: true,
72
        removeRedundantAttributes: true,
73
        removeScriptTypeAttributes: true,
74
        removeStyleLinkTypeAttributes: true,
75
        useShortDoctype: true,
76
      },
77
    }),
78
    new MiniCssExtractPlugin({
79
      filename: 'css/[name].css',
80
    }),
81
  ],
82
};

展开收起

webpack5推荐html-loader

1
npm install -D html-loader

1
     //webpack5 推荐使用html-loader
2
{
3
      test: /\.html$/,
4
     loader: 'html-loader',
5
 },

使用file-loader处理JS中的图片#

JS 中的图片不是“被处理”，而是“被 import 之后交给 loader 处理”

webpack5也不推荐使用，也无需使用，因为asset/resource已经处理了，使用file-loader也会出问题，不要用

安装：

1
npm install -D file-loader

使用

1
{
2
  test: /\.(png|jpg|jpeg|gif)$/i,
3
  use: [
4
    {
5
      loader: 'file-loader',
6
      options: {
7
        name: '[name].[hash].[ext]',
8
        outputPath: 'images',
9
      },
10
    },
11
  ],
12
}

使用url-loader处理图片#

url-loader 是 Webpack 4 时代非常经典的图片 loader，但现在已经基本被 Webpack5 的 Asset Modules 取代了。

webpack5替代方案

1
{
2
  test: /\.(png|jpg|jpeg|gif)$/i,
3
  type: 'asset',
4
  parser: {
5
    dataUrlCondition: {
6
      maxSize: 10 * 1024 // 10kb以下转base64
7
    }
8
  }
9
}

使用webpack-dev-server搭建开发环境#

让 webpack 在内存里打包 + 自动刷新浏览器 + 支持热更新

如果不用它，现在是这样开发：

1
写代码 → npx webpack → 打包到 dist → 手动刷新浏览器

用了 dev-server：

1
写代码 → 自动编译 → 浏览器自动更新（不用刷新）

安装
```
1
npm install -D webpack-dev-server
```

使用

1
devServer: {
2
  static: {
3
    directory: path.join(__dirname, 'dist'),
4
  },
5
  port: 8080,
6
  open: true,
7
  hot: true,
8
},

ES6模块Module

Wed, 21 Oct 2026 23:30:35 GMT

Module 是什么#

模块就是把代码拆分成多个文件，每个文件负责一部分功能，然后通过导入和导出实现复用。

一个一个的局部作用域的代码块

什么是模块系统

模块系统需要解决的主要问题：

模块化的问题

消除全局变量

管理加载顺序

Module 的基本用法#

导出：分别导出

1
export const name = '张三';
2

3
export function sayHello() {
4
  console.log('hello');
5
}

导入：

1
import { name, sayHello } from './user.js';
2

3
console.log(name);
4
sayHello();

默认导出

math.js

1
export default function add(a, b) {
2
  return a + b;
3
}

导入时可以随便起名字

1
import sum from './math.js';
2

3
console.log(sum(1, 2));

区别：

类型	导出	导入
named export	`{ add }`	`{ add }`
default export	`export default`	随便命名

混合导出

1
export const a = 1;
2

3
export default function test() {
4
  console.log('default');
5
}

导入：

1
import test, { a } from './file.js';

导出方式总结

1
//直接导出
2
export const a = 1;
3
//先写再导出
4
const b = 2;
5
export { b };
6
//重命名导出
7
const c = 3;
8
export { c as count };
9
import { count } from './file.js';

全部导入

1
import * as utils from './utils.js';
2

3
console.log(utils.a);
4
utils.fn();

export default 和对应的 import#

一个模块可以有多个普通导出（named export），但只能有一个默认导出（default export）。

默认导出：

math.js

1
export default function add(a, b) {
2
  return a + b;
3
}
4
//导入
5
// app.js
6
import add from './math.js';
7
console.log(add(1, 2));//3

为什么导入时没有 {}？因为导出的是这个模块的默认值，导入时直接拿，名字可以随便起

1
//import 任意名字 from '模块';
2
import add from './math.js';
3
import fn from './math.js';

默认导出对象：

1
export default {
2
  add,
3
  sub,
4
  mul
5
};
6

7
import math from './math.js';
8
math.add();

默认导出类：

1
export default class User {
2
  login() {}
3
}
4

5
import User from './User.js';
6
const u = new User();

默认导出匿名函数：

1
export default function () {
2
  console.log('hello');
3
}
4
import fn from './a.js';
5
fn();

默认导出匿名类

1
export default class {
2
  login() {}
3
}
4
import User from './User.js';
5
const u = new User();

export 和对应的 import#

一个模块可以有多个普通导出，普通 export 是“按名字导出”，导入时必须按名字取。

普通导出：

1
//导出
2
export function add() {}
3
export function sub() {}
4
//导入 名字必须对应。
5
import { add, sub } from './math.js';
6
import { fn } from './math.js';//错误
7

8
function add(a, b) {
9
  return a + b;
10
}
11
function sub(a, b) {
12
  return a - b;
13
}
14
function mul(a, b) {
15
  return a * b;
16
}
17

18
export {
19
  add,
20
  sub,
21
  mul
22
};

展开收起

为什么要加 {}？因为导出了多个名字，导入时必须明确

导出后再统一 export

1
const a = 1;
2
const b = 2;
3
export { a, b };
4
//等价于
5
export const a = 1;
6
export const b = 2;

导出时起别名

1
const a = 1;
2

3
export {
4
  a as count
5
};
6
//导入肯定就需要别名
7
import { count } from './a.js';
8
console.log(count);

导入时起别名

1
import { count as c } from './a.js';
2
console.log(c);

一次导入导出多个

1
export const a = 1;
2
export const b = 2;
3
export const c = 3;
4
//导入
5
import { a, b, c } from './a.js';

全部导入：
```
1
import * as utils from './a.js';
```

导入导出复合写法

1
//复合写法无法在当前模板中使用
2
export { age } from './module.js';//类似中转站

Module 的注意事项#

import 必须写在顶层

1
//错误
2
if (true) {
3
  import { a } from './a.js';
4
}
5
function fn() {
6
  import { a } from './a.js';
7
}
8
//正确
9
import { a } from './a.js';
10
//如果需要条件加载：
11
if (true) {
12
  const module = await import('./a.js');
13
}

import 导入的是只读绑定：

a.js

1
export let count = 1;
2
//b.js
3
import { count } from './a.js';
4
count = 2; // ❌import 得到的是只读引用。不能修改

导出的变量是动态绑定：

a.js

1
export let count = 1;
2

3
setTimeout(() => {
4
  count = 2;
5
}, 1000);
6
//b.js
7
import { count } from './a.js';
8
setTimeout(() => {
9
  console.log(count);//2
10
}, 2000);

一个模块只能有一个 default

默认导出导入时名字随便起

普通导出必须按名字导入

导入的名字不能重复声明

1
import { a } from './a.js';
2
let a = 2;//error Identifier 'a' has already been declared
3

4
//解决，起一个别名
5
import { a as importedA } from './a.js';
6
let a = 2;

模块默认是严格模式

模块有自己的作用域，模块之间，变量默认不共享

a.js

1
let a = 1;
2
//b.js
3
console.log(a);//a is not defined

模块只执行一次

1
import './a.js';
2
import './a.js';
3

4
console.log('执行');

浏览器必须加 type="module"

1
<script type="module" src="./app.js"></script>

Node ESM 必须开启，或者，文件拓展名字.mjs，注意node12之前存在兼容问题

1
{
2
  "type": "module"
3
}

Node ESM 必须写扩展名

1
import { add } from './math';//错误
2
import { add } from './math.js';

import 有提升：import 的“提升”指的是模块初始化阶段提前建立绑定，不是代码文本位置上的变量提升。

1
console.log(a);
2
import { a } from './a.js';
3
//看起来：先使用后导入；实际上：import 在模块初始化阶段就完成了。

循环引用要小心：如a导入b文件，b文件导入a文件

a.js

1
import { b } from './b.js';
2
export const a = 1;
3
//b.js
4
import { a } from './a.js';
5
export const b = 2;
6
//Cannot access before initialization

Module的应用#

最常见的应用场景

场景	使用方式
工具函数	export
常量	export
API	export
配置	export default
类	export default
组件	export default
数据库	export
路由	export

API 请求模块：

api/request.js

1
export function request(url) {
2
  return fetch(url).then(res => res.json());
3
}
4
//api/user.js
5
import { request } from './request.js';
6

7
export function getUser() {
8
  return request('/user');
9
}

配置文件模块：

config.js

1
export default {
2
  baseURL: 'http://localhost:3000',
3
  timeout: 5000
4
};
5
//app.js
6
import config from './config.js';
7
console.log(config.baseURL);

拓展-ES Module 和 CommonJS 的区别#

ES Module（ESM）是 JavaScript 官方标准模块规范；CommonJS（CJS）是 Node.js 最早使用的模块规范。

语法区别#

CommonJS：

1
module.exports = {
2
  add,
3
  sub
4
};
5
const math = require('./math');
6
const { add } = require('./math');

ES Module：

1
export function add() {}
2
export function sub() {}
3

4
import { add, sub } from './math.js';

加载时机不同#

CommonJS：运行时加载

1
const math = require('./math');//代码运行到这里才去加载模块
2

3
//合法
4
if (true) {
5
  const a = require('./a');
6
}

ES Module：编译时加载（静态加载）

1
import { add } from './math.js';//代码执行之前就已经确定依赖关系
2
//报错
3
if (true) {
4
  import { a } from './a.js';
5
}
6
//动态导入
7
const module = await import('./a.js');

值拷贝 VS 引用绑定#

CommonJS：值拷贝

a.js

1
let count = 1;
2
module.exports = {
3
  count
4
};
5
count = 2;
6
//b.js
7
const obj = require('./a');
8

9
console.log(obj.count);//1 导出时已经复制了一份值。

ES Module：动态绑定

a.js

1
export let count = 1;
2

3
setTimeout(() => {
4
  count = 2;
5
}, 1000);
6
//b.js
7
import { count } from './a.js';
8

9
setTimeout(() => {
10
  console.log(count);//2  import 得到的是引用绑定，不是值拷贝。
11
}, 2000);

this 指向不同#

CommonJS

1
console.log(this);//module.exports

ES Module

1
console.log(this);//undefined  ES Module 默认严格模式。

总结:

区别	CommonJS	ES Module
提出者	Node.js	ECMAScript 官方
导出	module.exports	export
导入	require	import
加载时机	运行时	编译时
值传递	值拷贝	动态绑定
this	module.exports	undefined
顶层 await	❌	✅
Tree Shaking	❌	✅
浏览器支持	❌	✅
静态分析	❌	✅
文件名	.js .cjs	.mjs

ES6类Class

Wed, 21 Oct 2026 12:57:51 GMT

Class 是什么#

JavaScript 的 Class（类）本质上是：对“构造函数 + 原型链”的语法糖封装，更接近“面向对象语言”的写法（比如 Java / C++）来写 JS，但底层机制还是原型（prototype）。

基本用法：

1
class Person {
2
  constructor(name, age) {
3
    this.name = name;
4
    this.age = age;
5
  }
6

7
  sayHello() {
8
    console.log(`我叫${this.name}`);
9
  }
10
}
11
//使用
12
const p1 = new Person('张三', 18);
13

14
p1.sayHello();//this指向p1

class与构造函数：

1
//旧写法
2
function Person(name) {
3
  this.name = name;
4
}
5

6
Person.prototype.say = function () {
7
  console.log(this.name);
8
};
9
//新写法
10
class Person {
11
  constructor(name) {
12
    this.name = name;
13
  }
14

15
  say() {
16
    console.log(this.name);
17
  }
18
}

展开收起

constructor 是什么

1
//new 的时候自动执行
2
//用来初始化对象
3
//默认的构造函数，可不写，但是每个类都会有
4
class A {
5
  constructor() {
6
    console.log('我会在 new 的时候执行');
7
  }
8
}
9
new A();

不建议把方法放到constructor中

1
class Person {
2
  constructor(name, age) {
3
    this.name = name;
4
    this.age = age;
5
    ////一般构造方法定义属性，方法不在构造函数中定义
6
    this.speak = () => {};
7
  }
8
  sayHello() {
9
    console.log(`我叫${this.name}`);
10
  }
11
}
12
const p1 = new Person();
13
const p2 = new Person();
14
//不建议把方法放在constructor，因为每new一个对象实例就会占用内存
15
console.log(p1.speak === p2.speak); //false
16
console.log(p1.sayHello === p2.sayHello); //true

展开收起

Class 的两种定义形式#

类声明和类表达式区别

特性	类声明	类表达式
语法	`class Person {}`	`const Person = class {}`
是否有名字	必须有	可匿名、可命名
变量提升	❌ 无	❌ 无
是否可以赋值给变量	默认就是标识符	通常赋值给变量
使用场景	普通定义类	动态创建类、工厂模式

类声明

1
class Person {
2
  constructor(name) {
3
    this.name = name;
4
  }
5

6
  sayHello() {
7
    console.log(`Hello, ${this.name}`);
8
  }
9
}
10

11
const p = new Person('张三');
12
p.sayHello();

类表达式

1
const Person = class {
2
  constructor(name) {
3
    this.name = name;
4
  }
5
};
6

7
const p = new Person('张三');

两个注意点：

不存在声明提升

一样可以跟函数一样立即执行，但是需要new

1
//不存在声明提升
2
//ReferenceError: Cannot access 'Person' before initialization
3
const p = new Person('张三');
4
const Person = class {
5
  constructor(name) {
6
    this.name = name;
7
  }
8
};
9
//一样可以跟函数一样立即执行，但是需要new
10
new (class {
11
  constructor(name) {
12
    this.name = name;
13
  }
14
}('张三'))

实例属性、静态方法和静态属性#

实例的东西属于对象，静态的东西属于类

实例属性：实例属性是每个对象自己拥有的属性。

1
class Person {
2
  name = 'alex'; //实例属性，默认值
3
  age = 0; //实例属性，默认值
4
  constructor(name, age) {
5
    this.name = name;
6
    this.age = age;
7
  }
8
}
9

10
const p1 = new Person('张三', 18);
11
const p2 = new Person('李四', 20);
12

13
console.log(p1.name);
14
console.log(p2.name);

实例方法：

1
//注意，实例方法只能实例调用，不能类调用，如Person.sayHello()就错误了
2
class Person {
3
  name = 'alex'; //实例属性，默认值
4
  age = 0; //实例属性，默认值
5
  sayHello() {
6
    console.log(`helle ${this.name}`);
7
  } //实例方法
8
  constructor(name, age) {
9
    this.name = name;
10
    this.age = age;
11
  }
12
}
13

14
const p1 = new Person('张三', 18);
15
const p2 = new Person('李四', 20);
16

17
console.log(p1.name);
18
console.log(p2.name);
19
p1.sayHello();
20
p2.sayHello();

展开收起

静态方法：使用 static 定义

1
//静态方法不能实例调用
2
class Person {
3
  name = 'alex'; //实例属性，默认值
4
  age = 0; //实例属性，默认值
5
  static sayHello() {
6
    console.log(`helle ${this.name}`);
7
  } //实例方法
8
  constructor(name, age) {
9
    this.name = name;
10
    this.age = age;
11
  }
12
}
13

14
const p1 = new Person('张三', 18);
15
const p2 = new Person('李四', 20);
16

17
console.log(p1.name);
18
console.log(p2.name);
19
Person.sayHello(); //helle Person 类名字，静态就是静

展开收起

静态属性：ES2022 支持直接写

1
class Person {
2
  static country = '中国';
3
}
4
console.log(Person.country);//中国

私有属性和方法#

JavaScript 的私有属性和私有方法（Private Fields & Methods），是 ES2022 正式支持的语法，用 # 开头表示。只能在类的内部访问，类的外部无法访问和修改。类似于 Java 里的 private。

为什么需要私有属性：

1
//假设有一个银行账户类：
2
class Account {
3
  constructor(balance) {
4
    this.balance = balance;
5
  }
6
}
7

8
const a = new Account(1000);
9

10
a.balance = 100000000;
11
//外部可以随意修改：1000 → 100000000这显然不安全。

私有属性（#）

1
class Account {
2
  #balance;
3

4
  constructor(balance) {
5
    this.#balance = balance;
6
  }
7

8
  getBalance() {
9
    return this.#balance;
10
  }
11
}
12

13
const a = new Account(1000);
14

15
console.log(a.getBalance());//1000
16
//外部访问
17
console.log(a.#balance);//直接报错
18
//外部修改
19
a.#balance = 9999;//也是语法错误。

展开收起

私有方法（#）

1
class Person {
2
  #sayHello() {
3
    console.log('hello');
4
  }
5

6
  greet() {
7
    this.#sayHello();
8
  }
9
}
10

11
const p = new Person();
12

13
p.greet();//hello
14
//外部调用
15
p.#sayHello();//直接报错

展开收起

私有静态属性

1
class Person {
2
  static #count = 0;
3

4
  constructor() {
5
    Person.#count++;
6
  }
7

8
  static getCount() {
9
    return Person.#count;
10
  }
11
}
12

13
new Person();
14
new Person();
15

16
console.log(Person.getCount());//2
17
//外部调用
18
console.log(Person.#count);//报错

展开收起

私有静态方法

1
class Person {
2
  static #hello() {
3
    console.log('hello');
4
  }
5

6
  static say() {
7
    Person.#hello();
8
  }
9
}
10

11
Person.say();//hello

注意点：

1
//必须声明私有变量
2
//错误示范
3
class Person {
4
  constructor() {
5
    this.#name = '张三';
6
  }
7
}
8
//正确
9
class Person {
10
  #name;//声明私有
11
  constructor() {
12
    this.#name = '张三';
13
  }
14
}
15
//只能在类内部访问
16
class Person {
17
  #name = '张三';
18

19
  show() {
20
    console.log(this.#name);
21
  }
22
}
23
//子类不能直接访问父类私有属性
24
class A {
25
  #x = 1;
26
}
27

28
class B extends A {
29
  test() {
30
    console.log(this.#x);
31
  }
32
}
33
//获取设置私有数据的方法
34
class Person {
35
  #name;
36
  constructor(name) {
37
    this.#name = name;
38
  }
39
  getName() {
40
    return this.#name;
41
  }
42
  setName(name) {
43
    this.#name = name;
44
  }
45
}
46

47
//输出什么？undefined
48
//为什么？p.name和p.#name不是一个东西，实例上没有name所以是undefined如果是p.#name就报错
49
class Person {
50
  #name = '张三';
51
}
52

53
const p = new Person();
54

55
console.log(p.name);

展开收起

至于之前的“古法”模拟私有变量，这里不展开讲解

extends#

extends 是 JavaScript 中实现类继承的关键字。子类继承父类的属性和方法。

基本语法：

1
class 父类 {}
2
class 子类 extends 父类 {}

示例：

1
class Animal {
2
  eat() {
3
    console.log('吃东西');
4
  }
5
}
6

7
class Dog extends Animal {}
8

9
const dog = new Dog();
10

11
dog.eat();//吃东西

继承构造函数

1
class Animal {
2
  constructor(name) {
3
    this.name = name;
4
  }
5
}
6
class Dog extends Animal {
7
  constructor(name) {
8
    super(name);
9
  }
10
}
11
const dog = new Dog('旺财');
12
console.log(dog.name);//旺财

方法重写

1
class Animal {
2
  speak() {
3
    console.log('动物叫');
4
  }
5
}
6
class Dog extends Animal {
7
  speak() {
8
    console.log('汪汪');
9
  }
10
}
11
new Dog().speak();//汪汪
12
//如果想保留父类逻辑
13
class Dog extends Animal {
14
  speak() {
15
    super.speak();//保留父类逻辑
16
    console.log('汪汪');
17
  }
18
}

展开收起

注意点：super前面不能有this操作

super#

一句话记忆：

1
constructor：
2
super() = 调父类构造函数
3

4
实例方法：
5
super = 父类.prototype
6

7
静态方法：
8
super = 父类

super 有两种用法：在 constructor 中和在普通方法中

在 constructor 中：

1
class Animal {
2
  constructor(name) {
3
    this.name = name;
4
  }
5
}
6

7
class Dog extends Animal {
8
  constructor(name, age) {
9
    super(name);
10
    this.age = age;
11
  }
12
}
13

14
const d = new Dog('旺财', 2);
15

16
console.log(d);
17
//输出
18
Dog {
19
  name: '旺财',
20
  age: 2
21
}

展开收起

为什么必须先写 super？：在子类中：this不是一开始就存在的。必须：super()执行后，JS 才创建出 this。可以理解成

1
class Dog extends Animal {
2
  constructor(name) {
3
    super(name);
4
  }
5
}
6
//概念上类似：
7
function Dog(name) {
8
  Animal.call(this, name);
9
}

只是概念上类似，底层不是直接 call。

普通方法中的 super

1
class Animal {
2
  eat() {
3
    console.log('动物吃东西');
4
  }
5
}
6

7
class Dog extends Animal {
8
  eat() {
9
    super.eat();//相当于：Animal.prototype.eat.call(this)
10
    console.log('吃骨头');
11
  }
12
}
13

14
new Dog().eat();
15
//动物吃东西
16
//吃骨头

展开收起

super 不是父类实例

很多人以为：super等于：new Animal()；其实不是

1
class Animal {
2
  eat() {
3
    console.log(this);
4
  }
5
}
6

7
class Dog extends Animal {}
8

9
new Dog().eat();//Dog {}

说明：this还是Dog 的实例，所以：super.eat()其实是：Animal.prototype.eat.call(this)

super 访问父类属性

1
class Animal {
2
  name = '动物';
3
}
4

5
class Dog extends Animal {
6
  show() {
7
    console.log(super.name);//undefined
8
  }
9
}

很多人会懵。因为：super指向Animal.prototype，而name是实例属性this.name不在：Animal.prototype上

例子：

1
class Animal {
2
  eat() {}
3
}
4
Animal.prototype = {
5
  eat() {}
6
}
7
super.eat//能找到
8

9
//但是：name是实例属性，不在原型上 super.name就是undefined
10
class Animal {
11
  name = '动物';
12
  constructor() {
13
  this.name = '动物';
14
}
15
}

展开收起

super 调用静态方法

1
class Animal {
2
  static hello() {
3
    console.log('hello');
4
  }
5
}
6

7
class Dog extends Animal {
8
  static hi() {
9
    super.hello();
10
  }
11
}
12

13
Dog.hi();

这里：super指向Animal，而不是Animal.prototype

super 的this指向总结

在实例方法中，super指向：父类.prototype
在静态方法中，super指向：父类本身
在 constructor 中，作用是调用父类构造函数，创建 this

Class的应用#

一、创建对象模板（最基本的应用）

例如：用户。

1
class User {
2
  constructor(name, age) {
3
    this.name = name;
4
    this.age = age;
5
  }
6

7
  login() {
8
    console.log(`${this.name} 登录了`);
9
  }
10
}
11

12
const u1 = new User('张三', 18);
13
const u2 = new User('李四', 20);
14

15
u1.login();
16
u2.login();

展开收起

这里：

1
User
2
↓
3
创建多个用户对象

二、封装业务对象

例如：购物车。

1
class Cart {
2
  constructor() {
3
    this.goods = [];
4
  }
5

6
  add(item) {
7
    this.goods.push(item);
8
  }
9

10
  remove(id) {
11
    this.goods = this.goods.filter(
12
      item => item.id !== id
13
    );
14
  }
15

16
  getTotal() {
17
    return this.goods.reduce(
18
      (sum, item) => sum + item.price,
19
      0
20
    );
21
  }
22
}

展开收起

使用：

1
const cart = new Cart();
2

3
cart.add({
4
  id: 1,
5
  price: 100
6
});
7

8
console.log(cart.getTotal());

三、封装组件（前端很常见）

例如自己实现一个弹窗：

1
class Modal {
2
  open() {
3
    console.log('打开弹窗');
4
  }
5

6
  close() {
7
    console.log('关闭弹窗');
8
  }
9
}
10
const modal = new Modal();
11

12
modal.open();
13
modal.close();

四、工具类（静态方法）

例如：

1
class MathUtil {
2
  static add(a, b) {
3
    return a + b;
4
  }
5

6
  static sub(a, b) {
7
    return a - b;
8
  }
9
}
10

11
MathUtil.add(1, 2);

实际上 JS 内置对象就是这样：

Math
Date
Object
Array

例如：

1
Math.max(1, 2);
2
Date.now();
3
Object.keys(obj);
4
Array.isArray(arr);

这些都是静态方法。

五、数据模型（Model）

例如：

1
class User {
2
  constructor(data) {
3
    this.id = data.id;
4
    this.name = data.name;
5
    this.email = data.email;
6
  }
7

8
  isAdmin() {
9
    return this.role === 'admin';
10
  }
11
}

接口：

1
const res = {
2
  id: 1,
3
  name: '张三',
4
  role: 'admin'
5
};
6

7
const user = new User(res);
8

9
console.log(user.isAdmin());

六、继承（extends）

例如：

1
class Animal {
2
  eat() {
3
    console.log('吃');
4
  }
5
}
6

7
class Dog extends Animal {
8
  bark() {
9
    console.log('汪汪');
10
  }
11
}
12

13
class Cat extends Animal {
14
  meow() {
15
    console.log('喵喵');
16
  }
17
}

展开收起

这样：

1
共同逻辑
2
↓
3
放父类
4

5
特殊逻辑
6
↓
7
放子类

七、游戏开发（非常常见）

1
class Player {
2
  move() {}
3
}
4

5
class Warrior extends Player {
6
  attack() {}
7
}
8

9
class Mage extends Player {
10
  cast() {}
11
}

很多游戏引擎大量使用 class。

八、Node.js 后端开发

例如：

1
class UserService {
2
  async login() {}
3

4
  async register() {}
5
}
6
class UserController {
7
  async login(req, res) {}
8
}

很多框架都喜欢这种写法，例如：

NestJS
Angular

九、React 早期开发

以前大量使用类组件：

1
class App extends React.Component {
2
  state = {
3
    count: 0
4
  };
5

6
  render() {
7
    return <div>Hello</div>;
8
  }
9
}

虽然现在：

1
Hooks > Class Component

但很多老项目还有大量 class。

十、继承内置类

例如：

1
class MyArray extends Array {
2
  first() {
3
    return this[0];
4
  }
5
}
6

7
const arr = new MyArray(1, 2, 3);
8

9
console.log(arr.first());

十一、设计模式（面试加分）

单例模式

1
class Singleton {
2
  static instance;
3

4
  static getInstance() {
5
    if (!this.instance) {
6
      this.instance = new Singleton();
7
    }
8

9
    return this.instance;
10
  }
11
}

工厂模式

1
class User {
2
  constructor(name) {
3
    this.name = name;
4
  }
5

6
  static create(name) {
7
    return new User(name);
8
  }
9
}

十二、什么时候不建议用 class？

例如：

1
function add(a, b) {
2
  return a + b;
3
}
4
//或者：
5
const formatDate = () => {};

这种纯函数没必要写成：

1
class Utils {
2
  add() {}
3
}

ES6异步Promise

Wed, 21 Oct 2026 12:57:33 GMT

Promise 是什么#

认识Promise

异步操作的一种解决方案
Promise 是 JavaScript 中用于处理异步操作结果的一种对象。你可以把它理解成一个“未来会得到结果的承诺”。
比如，你点了一份外卖：下单时：结果还没出来 → **等待中（pending）**外卖送到了 → **成功（fulfilled）**商家取消订单 → 失败（rejected）

什么时候用Promise

1
//网络请求（fetch）
2
//读取文件
3
//定时器（setTimeout）
4
//数据库查询
5
//没有 Promise 时，代码经常会写成：这种层层嵌套被称为回调地狱（Callback Hell）。
6
getUser(function(user) {
7
  getOrders(user.id, function(orders) {
8
    getProducts(orders, function(products) {
9
      // ...
10
    });
11
  });
12
});
13
//Promise 可以把它改成
14
getUser()
15
  .then(user => getOrders(user.id))
16
  .then(orders => getProducts(orders))
17
  .then(products => {
18
    console.log(products);
19
  })
20
  .catch(err => {
21
    console.error(err);
22
  });

展开收起

Promise的基本用法#

实例化构造函数生成对象

1
//Promise状态一旦改变，就不会变化
2
const p = new Promise((resolve, reject) => {
3
  //resolve({ name: 'alex' }); //成功
4
  reject(new Error('reason')); //失败
5
});
6
//console.log(p); //Promise { <pending> } 等待
7
p.then(
8
  (data) => {
9
    console.log('success', data); //success { name: 'alex' }
10
  },
11
  (err) => {
12
    console.log('error', err);
13
  },
14
);

Promise 的三个状态：

Pending（等待中）
Fulfilled（已成功）
Rejected（已失败）

then()#

then() 根据当前 Promise 的状态（fulfilled 或 rejected）执行对应的回调，并返回一个新的 Promise

1
//Promise状态一旦改变，就不会变化
2
const p = new Promise((resolve, reject) => {
3
  resolve({ name: 'alex' }); //成功
4
  //reject(new Error('reason')); //失败
5
});
6
p.then(
7
  (data) => {
8
    console.log('success', data); //success { name: 'alex' }
9
    ///throw new Error('reason111');
10
    return Promise.reject(new Error('reason'));
11
  },
12
   //第二个参数比较少用，错误通常统一交给catch
13
  (err) => {
14
    console.log('error', err);
15
  },
16
).then(
17
  (data) => {
18
    console.log('success1', data); //success undefined 默认返回的undefined
19
  },
20
  (err) => {
21
    console.log('error1', err);
22
  },
23
);

展开收起

创建一个 Promise 对象p，resolve一个对象{name: ‘alex’ }，这里是成功状态
p.then接受两个参数，第一个是成功的时候执行，第二个是失败的时候执行，怎么看成功失败，取决于前面的Promise ，前面的Promise 成功并且返回{ name: ‘alex’ }，所以第一个then执行一个参数的函数，所以打印success { name: ‘alex’ }，然后返回一个失败的Promise
第二个then执行的前面Promise ，前面Promise是失败的，所以执行第二个参数’error1’, err

catch()#

catch() 专门用来处理 Promise 链中的失败（rejected）和异常（throw）。

1
//Promise状态一旦改变，就不会变化
2
const p = new Promise((resolve, reject) => {
3
  resolve({ name: 'alex' }); //成功
4
  //reject(new Error('reason')); //失败
5
});
6
//console.log(p); //Promise { <pending> } 等待
7
p.then((data) => {
8
  console.log('success', data); //success { name: 'alex' }
9
  ///throw new Error('reason111');
10
  return Promise.reject(new Error('reason'));
11
})
12
  .then((data) => {
13
    console.log('success1', data); //success { name: 'alex' }
14
  })
15
  .catch((err) => {
16
    console.log(err);
17
  });

展开收起

为什么推荐 catch，而不是 then 的第二个参数？

1
Promise.resolve(1)
2
  .then(
3
    data => {
4
      throw new Error('boom');//Uncaught Error: boom
5
    },
6
    err => {
7
      console.log('error', err);
8
    }
9
  );

第二个参数没有捕获到；then(success, fail)中的 fail：只能处理当前 Promise 的 reject。不能处理 success 回调里面抛出的异常。

1
Promise.resolve(1)
2
  .then((data) => {
3
    throw new Error('boom');
4
  })
5
  .catch((err) => {
6
    console.log(err.message); //boom
7
  });
8
//可以捕获。

catch可以捕获前面的错误
catch也是返回一个Promise，默认返回undefined，

finally()#

无论 Promise 成功（fulfilled）还是失败（rejected）都会执行的回调。不变化不执行

1
//基本语法
2
promise
3
  .then(res => {
4
    console.log("成功：", res);
5
  })
6
  .catch(err => {
7
    console.log("失败：", err);
8
  })
9
  .finally(() => {
10
    console.log("无论成功或失败都会执行");
11
  });
12
//不会改变 Promise 的结果（重要）
13
Promise.resolve(1)
14
  .finally(() => {
15
    return 999; // ❌ 没用
16
  })
17
  .then(res => {
18
    console.log(res); // 1
19
  });
20
//如果 finally 里抛错，会影响结果
21
Promise.resolve(1)
22
  .finally(() => {
23
    throw new Error("finally error");
24
  })
25
  .then(res => {
26
    console.log(res);
27
  })
28
  .catch(err => {
29
    console.log(err.message); // finally error
30
  });
31
//常见使用场景
32
//关闭 loading
33
loading = true;
34
fetchData()
35
  .then(data => {
36
    console.log(data);
37
  })
38
  .catch(err => {
39
    console.log(err);
40
  })
41
  .finally(() => {
42
    loading = false;
43
  });
44
//清理资源
45
db.query(sql)
46
  .then(result => {
47
    console.log(result);
48
  })
49
  .finally(() => {
50
    db.close();
51
  });

展开收起

和 then/catch 的区别

方法	是否处理成功	是否处理失败	是否一定执行
`then()`	✔	✖	✖
`catch()`	✖	✔	✖
`finally()`	✖（不处理结果）	✖（不处理结果）	✔

Promise.resolve() 和 Promise.reject(）#

是 Promise 提供的两个快速创建已确定状态 Promise 的方法，本质上用来“直接返回成功或失败的 Promise”。

本质：

1
//Promise.resolve() 是成功状态Promise 的一种简写形式
2
new Promise(resolve => {
3
  resolve('foo')
4
});
5
//等价于
6
Promise.resolve('foo')

参数：

Promise.resolve：

1
//Promise.resolve 一般参数 then
2
// Promise.resolve('foo').then((data) => {
3
//   console.log(data); //foo
4
// });
5

6
//Promise.resolve   Promise 参数
7
const p1 = new Promise((resolve) => {
8
  // setTimeout(() => {
9
  //   resolve('我执行了');
10
  // }, 1000);
11
  setTimeout(resolve, 2000, '我执行了');
12
});
13
////当Promise.resolve(接收的是 Promise 对象时，直接返回这个Promise对象，什么都不做
14
Promise.resolve(p1).then((data) => {
15
  console.log(data); //foo
16
});
17
//判断
18
console.log(Promise.resolve(p1) === p1); //true
19

20
//Promise.resolve  具有then方法对象
21
const thenable = {
22
  then(resolve, reject) {
23
    console.log('具有then方法对象'); //具有then方法对象，会直接执行对象里面的then方法
24
    resolve('data');
25
  },
26
};
27
Promise.resolve(thenable).then(
28
  (data) => {
29
    console.log(data); //不执行
30
  },
31
  (err) => {
32
    console.log(err); //不执行
33
  },
34
);

展开收起

Promise.reject

1
//Promise.reject 失败状态的一种简写
2
new Promise((resolve, reject) => {
3
  reject('err');
4
}).then(
5
  () => {},
6
  (err) => {
7
    console.log(err);
8
  },
9
);
10
//等价于
11
Promise.reject('err1').then(
12
  () => {},
13
  (err) => {
14
    console.log(err);
15
  },
16
);
17
//参数问题，不管什么参数都会原封不动向后传递
18
Promise.reject(p1).then(
19
  () => {},
20
  (err) => {
21
    console.log(err); //Promise { <pending> }
22
  },
23
);

展开收起

在then方法中的应用：

1
new Promise((resolve, reject) => {
2
  resolve(123);
3
})
4
  .then((data) => {
5
    //Promise.resolve和Promise.reject应用的地方
6
    //console.log(data);
7
    return Promise.reject('reason'); //失败状态
8
    //return data; //等价于return Promise.resolve(data);
9
  })
10
  .then((data) => {
11
    console.log(data); //123 默认返回的undefined
12
  })
13
  .catch((err) => {
14
    console.log(err); //reason
15
  });

展开收起

Promise.all()#

并发执行多个异步任务，等所有任务都成功后，返回所有结果；如果有一个失败，则立即失败。

基本语法：

1
//参数：
2
//接收一个可迭代对象（通常是数组）
3
//数组里面可以是：Promise 对象或者普通值
4
//返回：一个新的 Promise。
5
Promise.all(iterable)

例子：

1
const p1 = Promise.resolve(1);
2
const p2 = Promise.resolve(2);
3
const p3 = Promise.resolve(3);
4

5
Promise.all([p1, p2, p3])
6
  .then(res => {
7
    console.log(res);//[1, 2, 3]
8
  });

模拟多个异步请求

1
//注意：不是 1 + 2 + 3 = 6 秒；而是：最大时间 3 秒，因为三个请求是并发执行的。
2
//返回结果顺序：传入数组的顺序返回
3
function request1() {
4
  return new Promise(resolve => {
5
    setTimeout(() => {
6
      resolve('用户信息');
7
    }, 1000);
8
  });
9
}
10

11
function request2() {
12
  return new Promise(resolve => {
13
    setTimeout(() => {
14
      resolve('订单信息');
15
    }, 2000);
16
  });
17
}
18

19
function request3() {
20
  return new Promise(resolve => {
21
    setTimeout(() => {
22
      resolve('商品信息');
23
    }, 3000);
24
  });
25
}
26

27
Promise.all([
28
  request1(),
29
  request2(),
30
  request3()
31
]).then(res => {
32
  console.log(res);
33
});
34
//一个失败，全部失败
35
const p1 = Promise.resolve(1);
36
const p2 = Promise.reject('失败了');
37
const p3 = Promise.resolve(3);
38
Promise.all([p1, p2, p3])
39
  .then(res => {
40
    console.log(res);
41
  })
42
  .catch(err => {
43
    console.log(err);
44
  });
45
//为什么叫"立即失败"
46
const p1 = new Promise(resolve => {
47
  setTimeout(() => resolve(1), 3000);
48
});
49

50
const p2 = new Promise((resolve, reject) => {
51
  setTimeout(() => reject('错误'), 1000);
52
});
53

54
Promise.all([p1, p2])
55
  .catch(err => {
56
    console.log(err);
57
  });

展开收起

Promise.race() 和 Promise.allSettled()#

Promise.race

返回一个新的 Promise，谁先 resolve返回成功结果，谁先 reject返回失败结果，不会等其他 Promise。

1
//谁先成功就返回谁
2
const p1 = new Promise(resolve => {
3
  setTimeout(() => {
4
    resolve('请求1');
5
  }, 3000);
6
});
7

8
const p2 = new Promise(resolve => {
9
  setTimeout(() => {
10
    resolve('请求2');
11
  }, 1000);
12
});
13

14
Promise.race([p1, p2])
15
  .then(res => {
16
    console.log(res);//请求2
17
  });
18
//谁先失败也算结束
19
const p1 = new Promise(resolve => {
20
  setTimeout(() => {
21
    resolve('成功');
22
  }, 3000);
23
});
24

25
const p2 = new Promise((resolve, reject) => {
26
  setTimeout(() => {
27
    reject('失败');
28
  }, 1000);
29
});
30

31
Promise.race([p1, p2])
32
  .catch(err => {
33
    console.log(err);//失败
34
  });

展开收起

1
//实际开发场景：请求超时
2
//正常请求
3
fetch('/api/user')
4
//超时 Promise
5
const timeout = new Promise((resolve, reject) => {
6
  setTimeout(() => {
7
    reject('请求超时');
8
  }, 5000);
9
});
10
//看谁先返回
11
Promise.race([
12
  fetch('/api/user'),
13
  timeout
14
])
15
.then(res => {
16
  console.log(res);
17
})
18
.catch(err => {
19
  console.log(err);
20
});

展开收起

Promise.allSettled

所有 Promise 都有结果（成功或失败），等待所有 Promise 都执行完。然后返回结果

1
//基本用法
2
Promise.allSettled([
3
  Promise.resolve(1),
4
  Promise.reject('错误'),
5
  Promise.resolve(3)
6
])
7
.then(res => {
8
  console.log(res);
9
});

1
//输出
2
[
3
  {
4
    status: 'fulfilled',
5
    value: 1
6
  },
7
  {
8
    status: 'rejected',
9
    reason: '错误'
10
  },
11
  {
12
    status: 'fulfilled',
13
    value: 3
14
  }
15
]

展开收起

实际开发场景

1
//页面初始化
2
//广告失败不应该导致整个页面白屏。
3
const result = await Promise.allSettled([
4
  getUser(),
5
  getOrders(),
6
  getMessage(),
7
  getAd()
8
]);
9
result.forEach(item => {
10
  if (item.status === 'fulfilled') {
11
    console.log(item.value);
12
  } else {
13
    console.log(item.reason);
14
  }
15
});
16
//筛选成功结果
17
const res = await Promise.allSettled(promises);
18
const data = res
19
  .filter(item => item.status === 'fulfilled')
20
  .map(item => item.value);

展开收起

Promise 的注意事项#

Promise 这一块很多“坑”其实不是语法问题，而是执行机制 + 微任务队列 + 链式调用规则导致的

一、executor 是同步执行的（最容易误解）

1
const p = new Promise(() => {
2
  console.log('A');
3
});
4

5
console.log('B');
6
//输出AB

new Promise(executor) 的 executor 立即同步执行

只有 .then() 才是异步（微任务）

二、then 是异步（微任务）

1
Promise.resolve().then(() => {
2
  console.log('then');
3
});
4

5
console.log('sync');
6
//输出sync  then

.then/.catch/.finally 都进 微任务队列

当前同步代码执行完才执行

三、Promise 不是“真正并行”，只是异步调度

1
console.log(1);
2
setTimeout(() => console.log(2));
3
Promise.resolve().then(() => console.log(3));
4
console.log(4);
5
//1 4 2 2

执行顺序关键点：同步代码 → 1、4；微任务（Promise）→ 3；宏任务（setTimeout）→ 2

四、then 的返回值决定链式行为

1
//返回普通值 → 自动包装 Promise
2
Promise.resolve(1)
3
  .then(res => {
4
    return 2;
5
  })
6
  .then(console.log); //2
7

8
//返回 Promise → 会“等待”
9
Promise.resolve(1)
10
  .then(() => {
11
    return new Promise(resolve => {
12
      setTimeout(() => resolve(2), 1000);
13
    });
14
  })
15
  .then(console.log);//会等 1 秒 输出2
16

17
//常见坑：忘记 return  setTimeout 不影响 Promise 链 没有 return Promise
18
Promise.resolve()
19
  .then(() => {
20
    setTimeout(() => {
21
      return 123;
22
    }, 1000);
23
  })
24
  .then(console.log);//undefined

展开收起

五、Promise 一旦确定状态不可改变

1
const p = new Promise((resolve, reject) => {
2
  resolve('成功');
3
  reject('失败');
4
});
5

6
p.then(console.log);//成功

Promise 状态只能：pending → fulfilled；pending → rejected；一旦确定 → 永远不可更改

六、错误不会自动“传递”，需要 catch

1
//不写 catch 会：报错未捕获
2
Promise.resolve()
3
  .then(() => {
4
    throw new Error('错了');
5
  })
6
  .then(() => {
7
    console.log('不会执行');
8
  });
9

10
//正确写法
11
Promise.resolve()
12
  .then(() => {
13
    throw new Error('错了');
14
  })
15
  .catch(err => {
16
    console.log(err.message);
17
  });

展开收起

七、catch 会“吞错误”

1
Promise.reject('error')
2
  .catch(err => {
3
    console.log('处理了:', err);
4
  })
5
  .then(() => {
6
    console.log('继续执行');
7
  });
8
//处理了: error
9
//继续执行

catch 之后默认返回 resolved Promise

除非你重新 throw

八、Promise.all 有“失败即终止”特性

1
//直接进入 catch不等 3
2
Promise.all([
3
  Promise.resolve(1),
4
  Promise.reject('error'),
5
  Promise.resolve(3)
6
]);

九、Promise 并不会取消任务

1
const p = fetch('/api');
2
p.then(...)

Promise 本身 无法取消
即使不需要结果，网络请求仍在执行
解决方案：AbortController（fetch）；标志位控制

十、then 可以“链式断开”

1
//正确链式
2
Promise.resolve(1)
3
  .then(res => {
4
    return Promise.resolve(res + 1);
5
  })
6
  .then(res => {
7
    console.log(res);
8
  });
9

10
//但是如果这样
11
Promise.resolve(1)
12
  .then(res => {
13
    Promise.resolve(res + 1); // ❌ 没 return
14
  })
15
  .then(console.log);//undefined

展开收起

十一、微任务优先级高于宏任务

1
setTimeout(() => console.log('timeout'), 0);
2

3
Promise.resolve().then(() => console.log('promise'));
4

5
console.log('sync');
6
//sync promise  timeout

十二、Promise 不会阻塞线程

1
Promise.resolve().then(() => {
2
  while(true) {}
3
});

会卡死主线程，但不是 Promise 阻塞，而是代码阻塞。

十三、finally 不改变结果

1
Promise.resolve(1)
2
  .finally(() => {
3
    console.log('finally');
4
  })
5
  .then(console.log);//finally  1

finally 不会改变值，除非 throw error

Promise的应用#

把“异步任务”变成“可链式、可组合、可统一处理”的结构

1
<!doctype html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <title>Document</title>
6
    <style>
7
      * {
8
        padding: 0;
9
        margin: 0;
10
      }
11
      .centen {
12
        display: flex;
13
        justify-content: center; /* 水平居中 */
14
        align-items: center; /* 垂直居中 */
15
      }
16
    </style>
17
  </head>
18
  <body>
19
    <div class="centen">
20
      <img
21
        src="https://img1.sycdn.imooc.com/9fa08f6a0833cfc016000682.jpg"
22
        alt=""
23
        id="img"
24
      />
25
    </div>
26

27
    <script>
28
      const loadimg = (url) => {
29
        return new Promise((resolve, reject) => {
30
          const img = new Image();
31
          img.onload = () => {
32
            resolve(img);
33
          };
34
          img.onerror = () => {
35
            reject(`图片加载失败 ${url}`);
36
          };
37
          img.src = url;
38
        });
39
      };
40
      const imgDom = document.getElementById('img');
41
      loadimg('https://img1.sycdn.imooc.com/16f88d6a092f8ae717920764.jpg')
42
        .then((data) => {
43
          console.log(data);
44
          setTimeout(() => {
45
            imgDom.src = data.src;
46
          }, 2000);
47
        })
48
        .catch((err) => {
49
          console.log(err);
50
        });
51
    </script>
52
  </body>
53
</html>

展开收起

ES6新增方法

Wed, 21 Oct 2026 08:12:18 GMT

字符串相关#

字符串的includes()#

是否包含某些字符

1
//基本用法 判断的组合
2
console.log('abc'.includes('a')); //true
3
console.log('abc'.includes('ab')); //true
4
console.log('abc'.includes('ac')); //false
5
//第二个参数，表示开始搜索的位置
6
console.log('abc'.includes('a', 1)); //false

应用：

1
let url = 'https://www.imooc.com/course/list';
2
const addURLParam = (url, name, value) => {
3
  url += url.includes('?') ? '&' : '?';
4
  url += `${name}= ${value}`;
5
  return url;
6
};
7
url = addURLParam(url, 'c', 'fe');
8
console.log(url);

padStart()和padEnd()#

padStart()和padEnd()` 是 ES2017（ES8）新增的字符串方法，用来补齐字符串长度。

1
//padStart()语法
2
//targetLength：补齐后的总长度
3
//padString：用什么字符补，默认是空格 " "。
4
str.padStart(targetLength, padString)
5

6
//基本语法padStart
7
'5'.padStart(3, '0');//‘005’
8
'123'.padStart(6, '*');//'***123'
9
'hello'.padStart(3, '*');//'hello'长度够了，不补
10

11
//基本语法padEnd()
12
'5'.padEnd(3, '0');//'500'
13
'abc'.padEnd(6, '*');//'abc***'

注意情况：

1
//长度够了，不补
2
'hello'.padStart(3, '*');//'hello'
3
//省略第2参数，默认补空格
4
'hi'.padStart(5);//'   hi'
5
//超过的，原字符串不会变，只会截取填充的
6
console.log('abc'.padStart(10, '0123456789'));//0123456abc

应用

1
//时间格式化
2
const h = '9'.padStart(2, '0');
3
const m = '5'.padStart(2, '0');
4
console.log(`${h}:${m}`);
5

6
//日期
7
const month = String(date.getMonth() + 1).padStart(2, '0');
8
const day = String(date.getDate()).padStart(2, '0');
9

10
//隐藏手机号
11
'1234'.padStart(11, '*');//*******1234
12

13
//生成固定宽度字符串
14
'VIP'.padEnd(10, '-');//'VIP-------'

trimStart()和trimEnd()#

trimStart()和trimEnd() 是 ES2019（ES10）新增的字符串方法，用来删除字符串两端的空白字符中的一端。

trimStart()：删除开头的空白字符。

trimEnd()：删除结尾的空白字符。

空白字符包括：空格 " "；制表符 \t；换行符 \n；回车符 \r；其他 Unicode 空白字符

1
const str = '   hello';
2
console.log(str.trimStart());
3
//制表符
4
'\t\thello'.trimStart();//'hello'
5
//换行符
6
'\n\nhello'.trimStart();
7

8
const str = 'hello   ';
9
console.log(str.trimEnd());
10
//中间的空格不会删除
11
'he   llo'.trim();
12

13
//trim()两端都删除。
14
'   hello   '.trim();
15

16
//用户输入处理
17
const username = input.value.trim();
18

19
//字符串不会被修改
20
const str = '  hello';
21
str.trimStart();
22
const newStr = str.trimStart();
23
console.log(str);
24
console.log(newStr);

展开收起

数组相关#

数组的includes()#

includes() 是 ES2016（ES7）新增的数组方法，用来判断数组中是否包含某个元素。

返回值：true、false

1
//searchElement：要查找的元素。
2
//fromIndex：从哪个索引开始查找（可选）
3
arr.includes(searchElement, fromIndex)
4

5
//基本使用
6
const arr = [1, 2, 3, 4];
7
console.log(arr.includes(2));
8
console.log(arr.includes(5));//false
9

10
//第二个参数 fromIndex
11
const arr = [1, 2, 3, 2];
12
console.log(arr.includes(2, 2));//true
13
//支持负数索引
14
const arr = [1, 2, 3, 4];
15
console.log(arr.includes(3, -2));//true 往后倒数
16

17
//和 indexOf() 的区别（重点）
18
arr.indexOf(2) !== -1
19
arr.includes(2)//更直观
20

21
//最大的区别：NaN
22
[1, NaN].indexOf(NaN);//-1找不到。
23
[1, NaN].includes(NaN);//true
24

25
//对象比较
26
const obj = { a: 1 };
27
const arr = [obj];
28
console.log(arr.includes(obj));//true
29
arr.includes({ a: 1 });//false  对象比较的是引用地址。

展开收起

Array.from()#

Array.from() 是 ES6（ES2015）新增的静态方法，用于将类数组对象（Array-like）或可迭代对象（Iterable）转换为真正的数组

1
//基本用法
2
console.log(Array.from('str'));//[ 's', 't', 'r' ]
3

4
// 2.哪些可以通过Array.from(转换成数组
5
// 2.1.所有可遍历的
6
// 数组、字符串、Set、Map、NodeList、arguments
7
console.log(Array.from(new Set([1, 2, 1])));
8
console.log([...new Set([1, 2, 1])]);//也是转数组更简洁
9

10
//2.2拥有length属性的任意对象
11
const obj = {
12
  0: 'a',//只有键值是数字才会转换
13
  1: 'b',
14
  2: 'c',
15
  name:'alex'//不转
16
  length: 3//由这个决定数组长度
17
};
18
const arr = Array.from(obj);
19
console.log(arr);
20

21
//3.第二个参数
22
//作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组
23
Array.from([1, 2, 3], item => item * 2);
24
//等价于
25
Array.from([1, 2, 3]).map(item => item * 2);//但前者效率更高，因为只遍历一次
26

27
//生成指定长度的数组
28
Array.from({ length: 5 }, () => 0);//[0, 0, 0, 0, 0]
29

30
//生成数字序列
31
Array.from({ length: 5 }, (_, i) => i);//[0, 1, 2, 3, 4]
32

33
//4第三个参数，修改this指向 普通函数才能修改this
34
const obj = {};
35
Array.from(
36
  '12',
37
  function () {
38
    console.log(this);
39
  },
40
  obj,
41
);//this-》obj

展开收起

find()和findIndex()#

find() 和 findIndex() 是 ES6（ES2015）新增的数组方法，用来查找数组中满足条件的第一个元素。

find：返回第一个满足条件的元素本身

findIndex：返回第一个满足条件的元素索引

1
arr.find(callback)
2
const arr = [5, 12, 8, 130, 44];
3
const res = arr.find(item => item > 10);
4
console.log(res);//12
5

6
const f = [1, 5, 7, 8, 9, 3].find((value, index, arr) => {
7
  //value 值 index索引 ，arr数组
8
  return value > 8;
9
});
10
console.log(f);//9
11
const f = [1, 5, 7, 8, 9, 3].findIndex((value, index, arr) => {
12
  //value 值 index索引 ，arr数组
13
  return value > 8;
14
});
15
console.log(f);//4
16

17
//第三个参数，修改this指向 普通函数才能修改this
18
const obj = {};
19
const f = [1, 5, 7, 8, 9, 3].findIndex(function (value, index, arr) {
20
  console.log(this);
21
}, obj);
22

23
//应用
24
//find 查对象
25
const users = [
26
  { id: 1, name: 'A' },
27
  { id: 2, name: 'B' }
28
];
29
const user = users.find(u => u.id === 2);
30
console.log(user);//{ id: 2, name: 'B' }
31
//findIndex 查位置
32
const index = users.findIndex(u => u.id === 2);
33
console.log(index);

展开收起

对比	`indexOf()`	`findIndex()`
查找类型	基本类型	任意条件
是否支持对象	❌	✅
是否支持函数判断	❌	✅
返回值	索引	索引

对象相关#

Object.assign()#

Object.assign() 用于把一个或多个源对象的属性“浅拷贝”到目标对象上。

1
//基本用法，会修改原对象
2
const obj1 = { a: 1 };
3
const obj2 = { b: 2 };
4
const result = Object.assign(obj1, obj2);
5
console.log(result);//{ a: 1, b: 2 }
6
console.log(obj1);//{ a: 1, b: 2 }
7

8
//避免污染原对象
9
const result = Object.assign({}, obj1, obj2);
10

11
//浅拷贝
12
const obj = {
13
  a: 1,
14
  b: { c: 2 }
15
};
16
const copy = Object.assign({}, obj);
17
copy.b.c = 999;
18
console.log(obj.b.c);//999
19

20
//数组也可以用，因为数组本质也是对象（key 是索引）不常用
21
const arr1 = [1, 2];
22
const arr2 = [3, 4];
23
Object.assign(arr1, arr2);
24
console.log(arr1);//[3, 4]与本意不符
25

26
//应用
27
const logUser = (UserOption) => {
28
  //默认配置
29
  const DEFAULTS = {
30
    name: 'zhangsan',
31
    age: 0,
32
  };
33
  //合并
34
  const option = Object.assign({}, DEFAULTS, UserOption);
35
  console.log(option);
36
};
37
logUser({ name: 'alex' });

展开收起

Object.keys()、Object.values()和Object.entries()#

这三个方法是 ES8（ES2017）里非常重要的一组 对象遍历工具，本质都是把对象“转成数组再处理”。

区别：

方法	返回什么
`Object.keys()`	键（key）数组
`Object.values()`	值（value）数组
`Object.entries()`	键值对数组

Object.keys()

返回对象所有“键”的数组

1
const obj = {
2
  name: 'Alice',
3
  age: 18
4
};
5
console.log(Object.keys(obj));//['name', 'age']
6
//遍历 key
7
for (const key of Object.keys(obj)) {
8
  console.log(key, obj[key]);
9
}
10
//判断对象是否为空
11
Object.keys({}).length === 0;

Object.values()

返回对象所有“值”的数组

1
const obj = {
2
  name: 'Alice',
3
  age: 18
4
};
5

6
console.log(Object.values(obj));//['Alice', 18]
7
//遍历值
8
for (const value of Object.values(obj)) {
9
  console.log(value);
10
}
11
//判断是否存在某个值
12
Object.values(obj).includes('Alice');

Object.entries()

返回“键值对数组”

1
const obj = {
2
  name: 'Alice',
3
  age: 18
4
};
5
console.log(Object.entries(obj));
6
//输出
7
[
8
  ['name', 'Alice'],
9
  ['age', 18]
10
]
11

12
//遍历对象（推荐写法）
13
for (const [key, value] of Object.entries(obj)) {
14
  console.log(key, value);
15
}
16
//转 Map
17
const map = new Map(Object.entries(obj));
18
//对象转数组处理
19
Object.entries(obj).map(([k, v]) => {
20
  console.log(k, v);
21
});

展开收起

ES6遍历器与for…of循环

Wed, 21 Oct 2026 07:59:18 GMT

Iterator 是什么#

Iterator（迭代器） 是 JavaScript 中一个统一遍历数据结构的机制，核心作用一句话：让不同的数据结构都能用同一种方式逐个访问元素

Iterator的作用

1
//遍历器 遍历；Iterator就是用来遍历
2
for (let i = 1; i < 5; i++) {
3
        console.log(i);
4
      }
5
      [1, 2, 3].forEach((value) => {
6
        console.log(value);
7
      });
8
      new Set([11, 12, 13]).forEach((value) => {
9
        console.log(value);
10
      });

寻找Iterator

1
//2025年才新增的全局构造函数，有些旧版浏览器不支持，打印出来就报错
2
console.log(Iterator);//ƒ Iterator() { [native code] }
3

4
//通过数组的Prototype可以看到 Symbol(Symbol.iterator)
5
console.log([1, 2]);
6
//调用执行
7
 console.log([1, 2][Symbol.iterator]());

使用Iterator

1
const it = [1, 2][Symbol.iterator]();
2
console.log(it.next()); //{value: 1, done: false}
3
console.log(it.next()); //{value: 2, done: false}
4
console.log(it.next()); //{value: undefined, done: true}
5

6
//it 可遍历对象
7
//Symbol.iterator 可遍历对象的生成方法

Iterator 解惑#

为什么需要Iterator 遍历器

1
//数组可以用for或者佛forEach方法
2
//对象可以用for in
3
//Iterator 并不是为数组和对象遍历，而是统一遍历方式
4

5
console.log([][Symbol.iterator]()); //Array Iterator {}  天生具备
6
console.log({}[Symbol.iterator]); //undefined 不具备

如何更方便的使用Iterator

1
// Symbol.iterator->it->next()
2
//我们一般不会直接使用Iteratr去遍历->封装成一个函数
3
// for..of

for…of 的用法#

for...of 是 ES6 新增的循环语法，用来遍历可迭代对象（Iterable）中的值。

for...of 用来遍历可迭代对象的value值，它的底层就是不断调用 Iterator 的 next() 方法。

1
//基本语法
2
for (const item of iterable) {
3
  // 使用 item
4
  //item每次遍历得到的值
5
  //iterable可迭代对象
6
}
7

8
//遍历数组，没有索引
9
const arr = [10, 20, 30];
10
for (const item of arr) {
11
  console.log(item);
12
}
13

14
//遍历字符串
15
const str = 'hello';
16
for (const ch of str) {
17
  console.log(ch);
18
}
19

20
//遍历 Set
21
const set = new Set([1, 2, 3]);
22
for (const item of set) {
23
  console.log(item);
24
}
25

26
//遍历 Map
27
const map = new Map([
28
  ['name', 'Alice'],
29
  ['age', 18]
30
]);
31
for (const item of map) {
32
  console.log(item);
33
}
34
for (const [key, value] of map) {
35
  console.log(key, value);
36
}
37

38
//遍历 DOM 集合
39
const ps = document.querySelectorAll('p');
40
for (const p of ps) {
41
  console.log(p);
42
}
43

44
//不能直接遍历 Object
45
const obj = {
46
  name: 'Alice',
47
  age: 18
48
};
49

50
for (const item of obj) {}//报错
51
//遍历键
52
for (const key of Object.keys(obj)) {
53
  console.log(key);
54
}
55
//遍历值
56
for (const value of Object.values(obj)) {
57
  console.log(value);
58
}
59
//遍历键和值
60
for (const [key, value] of Object.entries(obj)) {
61
  console.log(key, value);
62
}
63

64
//可以配合 break、continue forEach没有break、continue，这是区别
65
for (const n of [1, 2, 3, 4, 5]) {
66
  if (n === 3) break;
67
  console.log(n);
68
}
69
for (const n of [1, 2, 3, 4]) {
70
  if (n % 2 === 0) continue;
71
  console.log(n);
72
}
73
//数组遍历时拿索引怎么办for...of 默认只有值，没有索引。
74
const arr = [1, 2, 3];
75
      console.log(arr.keys());
76
      for (const key of arr.keys()) {
77
        console.log(key);
78
      }
79
      for (const value of arr) {
80
        console.log(value);
81
      }
82
//方法 1：entries() 既想得带value和key
83
const arr = ['a', 'b', 'c'];
84
for (const [index, value] of arr.entries()) {
85
  console.log(index, value);
86
}

展开收起

for…of、for…in、forEach、for、while区别#

一、核心区别表

特性	`for`	`while`	`for...of`	`for...in`	`forEach`
类型	循环语句	循环语句	循环语句	循环语句	数组方法
遍历内容	自己控制	自己控制	值（value）	键（key）	值（value）
是否需要索引	自己维护	自己维护	默认没有	键本身	自带 index
支持数组	✅	✅	✅	⚠️ 不推荐	✅
支持对象 Object	✅	✅	❌	✅	❌
支持 Set	✅	✅	✅	❌	✅
支持 Map	✅	✅	✅	❌	✅
支持 String	✅	✅	✅	⚠️ 可用但少见	❌
支持 NodeList	✅	✅	✅	⚠️ 可用但少见	部分环境支持
支持 Generator	✅	✅	✅	❌	❌
支持 break	✅	✅	✅	✅	❌
支持 continue	✅	✅	✅	✅	❌
支持 return 退出函数	✅	✅	✅	✅	❌（只能退出回调）
支持 await	✅	✅	✅	✅	❌
会遍历原型链属性	自己控制	自己控制	❌	✅
底层依赖 Iterator	❌	❌	✅	❌	❌

二、最常见使用场景

场景	推荐
普通数组遍历	`for...of`
需要索引	`for`
需要中途退出	`for`、`for...of`
需要 `await`	`for...of`
遍历 Object	`for...in`、`Object.entries()`
遍历 Map	`for...of`
遍历 Set	`for...of`
无限循环	`while`
简单数组遍历	`forEach`

三、获取的东西不一样（最容易混）

假设：

1
const arr = ['a', 'b', 'c'];
2
const obj = {
3
  name: 'Alice',
4
  age: 18
5
};

for

1
for (let i = 0; i < arr.length; i++) {
2
  console.log(i, arr[i]);
3
}
4
//0 a
5
//1 b
6
//2 c

for...of

1
for (const v of arr) {
2
  console.log(v);
3
}
4
//a
5
//b
6
//c

for...in

1
for (const k in arr) {
2
  console.log(k);
3
}
4
//0
5
//1
6
//2

forEach

1
arr.forEach((v, i) => {
2
  console.log(i, v);
3
});
4
//0 a
5
//1 b
6
//2 c

while

1
let i = 0;
2

3
while (i < arr.length) {
4
  console.log(arr[i]);
5
  i++;
6
}
7
//输出;abc

四、为什么数组不推荐 for...in？

1
Array.prototype.test = 'hello';
2

3
const arr = [1, 2, 3];
4

5
for (const k in arr) {
6
  console.log(k);
7
}
8
//输出：
9
//0
10
//1
11
//2
12
//test

因为：for...in 遍历的是可枚举属性，包括原型链上的属性。所以：❌不推荐遍历数组。

五、实际开发怎么选？

数组

1
for (const item of arr) {}

数组 + 索引

1
for (let i = 0; i < arr.length; i++) {}
2
//或者：
3
for (const [i, item] of arr.entries()) {}

对象

1
for (const [k, v] of Object.entries(obj)) {}

Map

1
for (const [k, v] of map) {}

Set

1
for (const v of set) {}

异步循环

1
for (const item of arr) {
2
  await fn(item);
3
}

记忆口诀

1
for       —— 最灵活
2
while     —— 条件循环
3
for...of  —— 遍历值（Iterator）
4
for...in  —— 遍历键（Object）
5
forEach   —— 数组工具方法

一句话总结

数组优先 for...of，对象优先 Object.entries()，需要索引用 for，需要异步用 for...of，简单遍历可以用 forEach。

原生可遍历和非原生可遍历#

哪些对象天生（原生）支持 for...of，哪些对象默认不支持。

判断标准只有一个：

1
typeof obj[Symbol.iterator] === 'function'
2
//有这个方法：原生可遍历（Iterable）;没有：非原生可遍历（Non-Iterable）

原生可遍历对象

类型	`for...of`	`Symbol.iterator`
`Array`	✅	有
`String`	✅	有
`Set`	✅	有
`Map`	✅	有
`NodeList`	✅	有
`TypedArray`	✅	有
Generator 返回对象	✅	有
`arguments`（现代浏览器）	✅	有

1
//Array
2
const arr = [1, 2, 3];
3
for (const x of arr) {
4
    console.log(x);
5
}
6

7
//String
8
for (const ch of 'abc') {
9
    console.log(ch);
10
}
11

12
//Set
13
const set = new Set([1, 2, 3]);
14

15
for (const x of set) {
16
    console.log(x);
17
}
18

19
//Map
20
const map = new Map([
21
    ['name', 'Alice'],
22
    ['age', 18]
23
]);
24
for (const [k, v] of map) {
25
    console.log(k, v);
26
}
27

28
//NodeList
29
const ps = document.querySelectorAll('p');
30

31
for (const p of ps) {
32
    console.log(p);
33
}

展开收起

非原生可遍历：

数据类型	原生可遍历
`Object`	❌
`Function`	❌
`Date`	❌
`RegExp`	❌

使用了 Iterator 的场合#

场合总结：

场景	是否使用 Iterator
`for...of`	✅
`...` 扩展运算符	✅
解构赋值	✅
`yield*`	✅
`Array.from()`	✅
`new Set(iterable)`	✅
`new Map(iterable)`	✅
`Promise.all()`	✅
`Promise.race()`	✅
`Promise.any()`	✅
`Promise.allSettled()`	✅
`Iterator.from()`	✅

特例：

1
//数组解构赋值，原生可遍历的都可以被解构赋值
2
const[a,b] = 'hi'
3
//等价于，因为字符串可以天生遍历
4
const[a,b] = [...'hi']
5
//因为Set可以天生遍历
6
const[a,b] = new Set([3,2])

ES6Set和Map数据结构

Wed, 21 Oct 2026 07:46:14 GMT

Set是什么#

Set 是 ES6 引入的一种集合（Collection）类型，特点是存储唯一值，不允许重复元素。有点像数组，但会自动去重。

Set没有下标去标示每一个值，所以Set是无序的，也不能像数组那样通过下标去访问Set的成员

1
const set = new Set();
2
set.add(1);
3
set.add(2);
4
set.add(2);
5
console.log(set);//Set(2) { 1, 2 }

Set实例的方法和属性#

常用方法

add() 添加元素

1
const set = new Set();
2
set.add('Tom').add('Alex');
3
set.add('Jerry');
4
console.log(set);

delete() 删除元素

1
set.delete('Tom');
2
console.log(set);

has()判断是否存在

1
const set = new Set([1, 2, 3]);
2
console.log(set.has(2)); // true
3
console.log(set.has(4)); // false

clear()清空集合

1
set.clear();
2
console.log(set.size); // 0

size获取元素个数

1
const set = new Set([1, 2, 3]);
2
console.log(set.size); // 3
3
//类似数组的：arr.length

遍历 Set获取元素值

for…of

1
const set = new Set([1, 2, 3]);
2

3
for (const item of set) {
4
  console.log(item);
5
}

forEach

1
set.forEach(item => {
2
  console.log(item);
3
});
4
//this指向谁，取决于外部环境，this 指向的是 外层作用域的 this

forEach的this指向问题

以下代码中：this指向谁：

1
const set = new Set();
2
set.add('Tom').add('Alex');
3
set.add('Jerry');
4

5
set.forEach((item) => {
6
  console.log(item);
7
});
8
//对象
9
const obj = {
10
  name: 'A',
11
  run() {
12
    set.forEach((item) => {
13
      console.log(this.name);
14
    });
15
  }
16
};
17
//class
18
class A {
19
  run() {
20
    set.forEach((item) => {
21
      console.log(this);
22
    });
23
  }
24
}
25
//普通函数
26
set.forEach(function(item) {
27
  console.log(this);
28
});
29
//普通函数，forEach第二个参数指定this
30
set.forEach(function(item) {
31
  console.log(this);
32
}, obj);

展开收起

在浏览器普通脚本中：this === window（非严格模式）或 undefined（严格模式）
在对象方法中：这里 this === obj
在 class 中：this === 当前 class 实例
换成普通函数：默认：undefined（严格模式），或 window（非严格模式）或可以通过 forEach 第二个参数 指定

Set 与 Array 对比

特性	Array	Set
允许重复	✅	❌
按索引访问	✅	❌
自动去重	❌	✅
长度	`length`	`size`
查找元素	`includes()`	`has()`

Set构造函数的参数#

Set 构造函数的参数是一个可迭代对象（iterable），用来初始化集合中的元素。

可以是任何可迭代对象，比如：Array（数组）、String（字符串）、Map（会取 key-value 中的 key）、Set、arguments、任何实现了 Symbol.iterator 的对象，如果不传参数，默认创建一个空 Set。

1
//数组
2
const s = new Set([1, 2, 3]);
3
console.log(s); // Set(3) {1, 2, 3}
4
//自动去重（核心特性）
5
const s = new Set([1, 1, 2, 2, 3]);
6
console.log(s); // Set(3) {1, 2, 3}
7
//字符串（按字符拆分）
8
const s = new Set("hello");
9
console.log(s); // Set(4) {'h','e','l','o'}
10
//Map（只取 key）
11
const m = new Map([
12
  ["a", 1],
13
  ["b", 2]
14
]);
15
//Map（只取 key）
16
const s = new Set(m);
17
console.log(s); // Set(2) {'a', 'b'}
18
//不传参数
19
const s = new Set();
20
console.log(s); // Set(0) {}

展开收起

Set 的注意事项#

如何判断重复值

1
//注意点：Set 判断元素是否重复使用的是 SameValueZero（类似 ===，但 NaN 也相等）
2
//对象引用不同即使内容一样也不会去重：
3
const obj = new Set([{a:1}, {a:1}]) // 仍然是两个元素
4
console.log(obj); // Set(2) { { a: 1 }, { a: 1 } }

什么时候用Set

1
//数组或者字符串去重的时候
2
//不需要通过下标访问，只需要遍历时
3
//为了使用Set提供的方法和属性时(add delete clear has forEach size 等)

Set的应用#

黑名单：

1
const blacklist = new Set([
2
  'Tom',
3
  'Jerry'
4
]);
5

6
if (blacklist.has(username)) {
7
  // 禁止访问
8
}

展开set

1
const s = new Set([1,2,3])
2
console.log([...s]);

字符串去重

1
const s = new Set(‘abbaerfghh’)
2
console.log([...s].join(''));//去重之后，重新展开，重新转为字符串 数组的join()方法可以使数组转为字符串

存放DOM元素

1
const selected = new Set(document.querySelectorAll("p"));
2
selected.forEach(el => {
3
  el.style.color = "red";
4
});

Map是什么#

Map 是 JavaScript 中的一种键值对集合结构，和普通对象 {} 类似，但功能更强、更规范。

1
const map = new Map();
2
map.set('name', 'Alice');
3
map.set('age', 18);
4
console.log(map.get('name')); // Alice

Map 和 Object 的核心区别

key 的类型更自由（Map 更强）

1
//Object  key 只能是 字符串 / Symbol
2
const obj = {};
3
obj[1] = "a";
4
obj[true] = "b";
5
console.log(obj); // key 会被转成字符串
6
//Map key 可以是任何类型
7
const map = new Map();
8
map.set(1, "数字key");
9
map.set(true, "布尔key");
10
map.set({}, "对象key");
11

12
console.log(map.get(1)); // 数字key

Map 保持插入顺序

1
const map = new Map();
2
map.set("a", 1);
3
map.set("b", 2);
4
map.set("c", 3);
5
for (const [k, v] of map) {
6
  console.log(k, v);
7
}

Map 自带 size

1
const map = new Map();
2
map.set("a", 1);
3
map.set("b", 2);
4
console.log(map.size); // 2

Map 实例的属性和方法#

常用方法

set（添加/修改）

1
map.set("name", "Tom");

get（获取）

1
map.get("name");

delete() 删除

1
map.delete("name");

has()判断是否存在

1
map.has("name"); // true

clear()清空

1
map.clear();

size获取个数

1
map.size();

遍历Map获取元素值

for…of

1
for (const [key, value] of map) {
2
  console.log(key, value);
3
}

forEach(callback)

1
const map = new Map([
2
  ["a", 1],
3
  ["b", 2]
4
]);
5

6
map.forEach((value, key) => {
7
  console.log(key, value);//注意顺序是：value 在前，key 在后（和 set 不同）
8
});

keys / values / entries

1
for (const key of map.keys()) {
2
  console.log(key);
3
}
4
for (const value of map.values()) {
5
  console.log(value);
6
}
7
for (const entry of map.entries()) {
8
  console.log(entry);
9
}
10
for (const [k, v] of map) {
11
  console.log(k, v);
12
}
13
//map.keys();
14
//map.values();
15
//map.entries();

展开收起

Map 构造函数的参数#

Map 构造函数的参数是一个可迭代对象（iterable），用于在创建 Map 时初始化键值对数据。

set、map、键值对数组

1
//数组，必须是二维结构
2
const map = new Map([
3
  ["name", "Alice"],
4
  ["age", 18]
5
]);
6
// new Map(["a", "b"]);//❌ 错误用法
7
console.log(map.get("name")); // Alice
8

9
//由 Map 构造 Map（复制）相当于浅拷贝（key/value 引用不变）
10
const m1 = new Map([
11
  ["a", 1],
12
  ["b", 2]
13
]);
14
const m2 = new Map(m1);
15
console.log(m2.get("a")); // 1
16

17
//Set ❌ 不能直接用（容易踩坑）
18
new Map(new Set([1, 2, 3]));//❌ 错误用法

展开收起

Map 的注意事项#

key 不会自动转换类型

1
const map = new Map();
2

3
map.set(1, "number");
4
map.set("1", "string");
5

6
console.log(map.size); // 2，在 Object 里 "1" 和 1 可能会混在一起，但 Map 不会

NaN 是相等的（特殊规则）

1
const map = new Map();
2

3
map.set(NaN, 1);
4
map.set(NaN, 2);
5

6
console.log(map.size); // 1
7
console.log(map.get(NaN)); // 2

对象 key 比较的是“引用”

1
const map = new Map();
2

3
map.set({}, 1);
4
map.set({}, 2);
5

6
console.log(map.size); // 2

delete 返回值很重要

1
map.delete("a"); // true / false用来判断是否真的删除成功

Map 不会自动去重 value

1
map.set("a", 1);
2
map.set("b", 1);
3

4
console.log(map.size); // 2去重只针对 key，不针对 value

如何判断键名是否相同：Map 的 key 判断遵循 ===

1
//基本类型（字符串/数字/布尔）相同 key（直接覆盖）
2
map.set("a", 1);
3
map.set("a", 2);
4

5
//NaN 特殊处理 认为相同 key
6
map.set(NaN, 1);
7
map.set(NaN, 2);
8

9
//对象，引用比较，不相同（不同引用）
10
map.set({a:1}, 1);
11
map.set({a:1}, 2);
12

13
//同一个对象才算同一个 key
14
const obj = {a:1};
15
map.set(obj, 1);
16
map.set(obj, 2);
17
console.log(map.size); // 1

展开收起

什么时候用Map

1
//key 不是字符串时（必须用 Map）Object 做不到（会变成 "[object Object]"）
2
const map = new Map();
3
const el = document.querySelector("div");
4
map.set(el, { clicked: true });
5

6
//频繁增删数据；Map 比 Object 更稳定，不会触发 hidden class 变化
7
map.set("a", 1);
8
map.delete("a");
9

10
//需要有序数据结构；遍历顺序 = 插入顺序
11
map.set("a", 1);
12
map.set("b", 2);
13
map.set("c", 3);
14

15
//需要快速查找 + 动态变化
16
//缓存
17
const cache = new Map();
18
function getData(key) {
19
  if (cache.has(key)) return cache.get(key);
20
  const result = key * 2;
21
  cache.set(key, result);
22
  return result;
23
}
24
//DOM 状态管理
25
const selected = new Map();
26
selected.set(dom, true);
27

28
//需要避免 Object 原型污染Map 没有这个问题
29
const obj = {};
30
obj.__proto__ = "hack";

展开收起

什么时候不用 Map

1
//静态数据（推荐 Object）更简单 + JSON 友好
2
const user = {
3
  name: "Alice",
4
  age: 18
5
};
6
//需要 JSON 序列化：Map 不能直接 stringify
7
//简单配置数据 Object 更清晰

Map的应用#

1
<!doctype html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
    <title>Document</title>
7
    <style>
8
      /* p {
9
        background-color: orange;
10
        font-size: 40px;
11
      } */
12
    </style>
13
  </head>
14
  <body>
15
    <p>1</p>
16
    <p>2</p>
17
    <p>3</p>
18
    <script>
19
      const p = document.querySelectorAll('p');
20
      // console.log(p);
21
      //解构
22
      const [p1, p2, p3] = document.querySelectorAll('p');
23
      const m = new Map([
24
        [p1, { color: 'red', backgroundColor: 'pink', fontSize: '40px' }],
25
        [p2, { color: 'blue', backgroundColor: 'orange', fontSize: '40px' }],
26
        [p3, { color: 'yellow', backgroundColor: 'green', fontSize: '40px' }],
27
      ]);
28
      m.forEach((propObject, elem) => {
29
        //console.log(propObject);
30
        for (const p in propObject) {
31
          // console.log(propObject);
32
          // console.log(p);
33
          // console.log(propObject[p]);
34
          elem.style[p] = propObject[p];
35
          //elem.style.p = propObject[p]; 错误，这是静态调用
36
        }
37
      });
38
    </script>
39
  </body>
40
</html>

展开收起

把对象改为Map：

1
<!doctype html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
    <title>Document</title>
7
    <style>
8
      /* p {
9
        background-color: orange;
10
        font-size: 40px;
11
      } */
12
    </style>
13
  </head>
14
  <body>
15
    <p>1</p>
16
    <p>2</p>
17
    <p>3</p>
18
    <script>
19
      const p = document.querySelectorAll('p');
20
      // console.log(p);
21
      //解构
22
      const [p1, p2, p3] = document.querySelectorAll('p');
23
      const m = new Map([
24
        [
25
          p1,
26
          new Map([
27
            ['color', 'red'],
28
            ['backgroundColor', 'pink'],
29
            ['fontSize', '40px'],
30
          ]),
31
        ],
32

33
        [
34
          p2,
35
          new Map([
36
            ['color', 'blue'],
37
            ['backgroundColor', 'orange'],
38
            ['fontSize', '40px'],
39
          ]),
40
        ],
41

42
        [
43
          p3,
44
          new Map([
45
            ['color', 'yellow'],
46
            ['backgroundColor', 'green'],
47
            ['fontSize', '40px'],
48
          ]),
49
        ],
50
      ]);
51
      m.forEach((styleMap, elem) => {
52
        styleMap.forEach((value, key) => {
53
          elem.style[key] = value;
54
        });
55
      });
56
    </script>
57
  </body>
58
</html>

展开收起

ES6展开运算符

Wed, 21 Oct 2026 07:40:53 GMT

数组展开运算符的基本用法#

数组展开运算符是 ES6 的 ... 语法，用来把“数组拆开成单个元素”。

基本语法

1
const arr = [1, 2, 3];
2
console.log(...arr);
3
//等价于
4
console.log(1, 2, 3);

区分剩余参数和展开运算符#

与剩余参数的区别：剩余参数是把多个值收集成数组，展开运算符是把数组拆成多个值；同一个符号，不同位置决定含义

写法	位置	作用
`...args`	函数参数	收集剩余参数
`...arr`	调用/表达式	展开数组

例子：

1
//剩余参数
2
const add = (...args) => {
3
  console.log(...args); //扩展运算符
4
};
5
add(1, 2, 3);
6

7
console.log([...[1, 2, 3], 4]); //扩展运算符[ 1, 2, 3, 4 ]

数组展开运算符的应用#

例子：

1
//数组合并
2
const a = [1, 2];
3
const b = [3, 4];
4
const c = [...a, ...b];
5
console.log(c); // [1, 2, 3, 4]
6

7
//数组拷贝（浅拷贝）
8
const arr1 = [1, 2, 3];
9
const arr2 = [...arr1];
10
console.log(arr2); // [1, 2, 3]
11

12
//函数传参展开
13
function sum(a, b, c) {
14
  return a + b + c;
15
}
16
const nums = [1, 2, 3];
17
console.log(sum(...nums)); // 6
18

19
//找最大/最小值
20
const nums = [5, 2, 9];
21
console.log(Math.max(...nums)); // 9
22

23
//字符串转数组
24
const str = "abc";
25
console.log([...str]); // ['a', 'b', 'c']
26

27
//类数组转数组
28
function fn() {
29
  const arr = [...arguments];
30
  console.log(arr);
31
}
32
fn(1, 2, 3);
33
//nodelist也是类数组
34
const nodes = document.querySelectorAll("div");
35
const arr = [...nodes];
36
console.log(arr);

展开收起

对象展开运算符的基本用法#

展开对象

1
const obj = { a: 1, b: 2 };
2

3
console.log({...arr} === obj);

合并对象

1
const obj1 = {
2
  name: "Tom"
3
};
4

5
const obj2 = {
6
  age: 18////如果属性相同，会覆盖前面对象的属性
7
};
8

9
const result = {
10
  ...obj1,
11
  ...obj2
12
};
13

14
console.log(result);
15
// { name: 'Tom', age: 18 }

展开收起

对象展开的疑惑

“展开（spread）”这个名字容易让人误以为：

1
const obj = { a: 1, b: 2 };
2
...obj
3
//会变成
4
a: 1, b: 2

然后单独存在。实际上 对象展开只能出现在另一个对象字面量中，它的作用是：将源对象的可枚举属性复制到当前对象中。

1
const obj = { a: 1, b: 2 };
2

3
const newObj = {
4
  ...obj
5
};
6
//JavaScript 引擎实际上会理解成类似：
7
const newObj = {
8
  a: 1,
9
  b: 2
10
};

这里确实发生了“展开”，但展开后的结果必须放进一个新的对象里。

为什么数组看起来更像“展开”？

1
const arr = [1, 2, 3];
2

3
console.log(...arr);//1 2 3

因为数组的展开运算符会把元素变成多个独立值，所以数组的“展开感”特别强。

对象为什么不能这样？假设允许：

1
console.log(...obj);
2
console.log(a:1, b:2)  // 这根本不是合法JS

对象本身不是一个值序列，而是一组 key-value 映射。因此对象展开只能出现在需要属性列表的地方

1
{
2
  ...obj
3
}

因此对象展开运算符的本质不是：把对象拆开；而是：把对象的属性复制到当前位置的对象中

所以很多开发者更愿意把对象展开理解成：

1
Object.assign({}, obj)

的语法糖，而不是像数组那样真正意义上的“展开成多个值”。这样理解会更准确。

对象展开运算符的注意事项#

空对象的展开

1
console.log({ ...{} });//{}

非对象展开

如果不是对象，会转其对象，然后将属性展开

1
console.log({ ...1 });
2
//等价于
3
console.log(new Object(1));
4
//console.log({ ...new Object(1) });
5

6
console.log({ ...'hello' }); //特殊，类数组：{ '0': 'h', '1': 'e', '2': 'l', '3': 'l', '4': 'o' }
7
console.log({ ...[1, 2, 3] });//在对象中展开数组类数组：{ '0': 1, '1': 2, '2': 3 }

对象中的对象属性展开

不会展开对象中的对象属性

1
const user = {
2
  name: 'Tom',
3
  address: {
4
    city: 'Beijing',
5
    street: 'xxx',
6
  },
7
};
8
const user1 = {
9
  name: 'Alex',
10
  address: {
11
    city1: 'Shenzheng',
12
    street1: 'xxx',
13
  },
14
};
15
console.log({ ...user });
16
console.log({ ...user, ...user1 }); //addr没有展开所以覆盖了{ name: 'Alex', address: { city1: 'Shenzheng', street1: 'xxx' } }
17

18
//正常的合并对象只有属性名相同才会覆盖否则不会
19
const address = {
20
  city: 'Beijing',
21
  street: 'xxx',
22
};
23
const address1 = {
24
  city1: 'Beijing',
25
  street1: 'xxx',
26
};
27
console.log({ ...address, ...address1 }); //{ city: 'Beijing', street: 'xxx', city1: 'Beijing', street1: 'xxx' }

展开收起

对象展开运算符的应用#

1
//使用展开运算符设置默认配置
2
function createUser(options = {}) {
3
  const config = {
4
    name: 'Guest',
5
    age: 18,
6
    ...options
7
  };
8

9
  return config;
10
}
11

12
createUser({
13
  name: 'Tom'
14
});
15

16
//删除属性（结合解构）
17
const user = {
18
  name: 'Tom',
19
  age: 18,
20
  password: '123456',
21
};
22
const { password, ...safeUser } = user;
23
console.log(password, safeUser); //123456 { name: 'Tom', age: 18 }
24

25
//展开嵌套对象属性
26
const user = {
27
  name: 'Tom',
28
  address: {
29
    city: 'Beijing',
30
    street: 'xxx'
31
  }
32
};
33

34
const result = {
35
  ...user,
36
  ...user.address
37
};
38

39
//条件添加属性
40
const isAdmin = true;
41
const user = {
42
  name: 'Tom',
43
  ...(isAdmin && {
44
    role: 'admin'
45
  })
46
};
47

48
//更新对象属性
49
const user = {
50
  name: 'Tom',
51
  age: 18
52
};
53
const updatedUser = {
54
  ...user,
55
  age: 20
56
};

展开收起

ES6剩余参数

Wed, 21 Oct 2026 07:37:11 GMT

剩余参数是什么#

剩余参数（Rest Parameters）是 ES6 提供的一种语法，用来把函数中“多出来的参数”收集成一个数组。把不确定数量的参数打包成一个数组

1
const add = (...args) => {
2
  console.log(args);
3
};
4
add(1, 2, 3, 4, 5, 6, 7, 8, 9);//[1,2,3,4, 5, 6, 7, 8, 9 ]

剩余参数的本质：是数组

1
const add = (x, y, z, ...args) => {
2
  console.log(x, y, z, args);
3
};
4
add(1, 2, 3, 4, 5, 6, 7, 8, 9);//1 2 3 [ 4, 5, 6, 7, 8, 9 ]

剩余参数的注意事项#

箭头函数的剩余参数

1
const add = (...args) => {
2
  //即使只有一个剩余参数，括号不能省略
3
  console.log(args);
4
};
5
add(1, 2, 3, 4, 5, 6, 7, 8, 9);

代替arguments获取实际参数

1
//箭头函数没有arguments
2
// const add = () => {
3
//   console.log(arguments);
4
// };
5
// add(1, 2);
6

7
//普通函数获取剩余参数
8
// const add1 = function () {
9
//   console.log(arguments[0]); //{ '0': 1, '1': 2 }类数组
10
// };
11
// add1(1, 2);
12

13
//箭头函数获取剩余参数
14
const add = (...args) => {
15
  console.log(args); //[ 1, 2 ]真数组
16
};
17
add(1, 2);

展开收起

剩余参数的书写位置

1
//剩余参数的书写位置：只能写到最后，否则报错
2
const add = (...args,x) => {
3
  console.log(args); //[ 1, 2 ]真数组
4
};
5
add(1, 2);//报错

剩余参数的应用#

1
//参数累加
2
// const add = (...args) => {
3
//   let sum = 0;
4
//   for (let i = 0; i < args.length; i++) {
5
//     sum += args[i];
6
//   }
7
//   return sum;
8
// };
9
// console.log(add(1, 2));
10
//必须最后一个
11
// const [num, ...args] = [1, 2, 3, 4, 5, 6];
12
// console.log(num, args);
13
//数组参数也能使用
14
// const func = ([num, ...args]) => {
15
//   console.log(num, args);
16
// };
17
// func([1, 2, 3]);
18

19
// const { x, y, ...z } = { a: 3, x: 1, y: 2, b: 4 };
20
// console.log(x, y, z); //输出 1 2 { a: 3, b: 4 }
21

22
const func = ({ x, y, ...z }) => {
23
  console.log(x, y, z);
24
};
25
func({ a: 3, x: 1, y: 2, b: 4 });

展开收起

ES6对象字面量的增强与函数参数默认值

Wed, 21 Oct 2026 07:31:36 GMT

对象字面量的增强#

属性和方法的简洁表示法#

对象字面量是什么

在 JavaScript 中用一对 {} 直接创建对象的一种写法

1
//这整段 { name: "Alice", age: 20 } 就叫 对象字面量。
2
//直接写出来就代表一个值，而不是通过 new 或函数生成
3
const obj = {
4
  name: "Alice",
5
  age: 20
6
};
7
//构造方式（不是字面量）
8
const obj = new Object();
9
obj.name = "Alice";

属性的简洁表示法

当 变量名 = 属性名 时，可以直接写变量名。

1
//标准
2
const name = "Alice";
3
const age = 20;
4
const obj = {
5
  name: name,
6
  age: age
7
};
8

9
//简洁
10
const name = "Alice";
11
const age = 20;
12
const obj = {
13
  name,
14
  age
15
};

展开收起

方法的简洁表示法

在对象里定义函数时，可以省略 function 关键字和冒号 :。

1
//传统
2
const obj = {
3
  say: function () {
4
    console.log("Hello");
5
  }
6
};
7
//简洁
8
const obj = {
9
  say() {
10
    console.log("Hello");
11
  }
12
};

方括号语法#

方括号语法是 JavaScript 对象字面量里的一种写法，用来动态决定对象的属性名。

基本用法：

1
//传统
2
const obj = {
3
  name: "Alice"
4
};
5
console.log(obj.name); // Alice
6

7
//方括号语法
8
const key = "name1";
9
const obj = {
10
  [key]: "Alice"
11
};
12
console.log(obj.name1); // Alice

方括号语法可以放什么

1
//方括号里不只是变量，还可以是表达式，只要能求值：
2
const obj = {
3
  ["user" + "Name"]: "Alice"
4
};
5

6
console.log(obj.userName); // Alice

函数参数默认值#

函数参数的默认值是什么#

**函数参数的默认值（Default Parameters）**是 ES6 提供的语法，用来给函数的参数设置“默认值”。简单说：如果调用函数时没传这个参数，就用默认值

基本语法

1
function greet(name = "Guest") {
2
  console.log("Hello " + name);
3
}
4
greet();        // Hello Guest
5
greet("Alice"); // Hello Alice

多个参数

1
function add(a = 1, b = 2) {
2
  return a + b;
3
}
4

5
add();      // 3
6
add(5);     // 7
7
add(5, 10); // 15

函数参数默认值的注意事项#

只在“undefined”时生效

1
function test(x = 10) {
2
  console.log(x);
3
}
4

5
test(undefined); // 10
6
test(null);      // null ❗不会用默认值

默认值可以是表达式

1
function getTime(time = Date.now()) {
2
  return time;
3
}
4
function random(num = Math.random()) {
5
  return num;
6
}
7
//每次调用都会重新计算

默认值可以依赖其他参数

1
function sum(a = 1, b = a + 1) {
2
  return a + b;
3
}
4
sum(); // 1 + 2 = 3

开发小技巧：默认值最好从右边开始设置

1
//左边设置
2
const add {x=1,y} => x+y;
3
add(undefined,5)//6
4

5
//右边设置
6
const add {x,y=1} => x+y;
7
add(5)//6

函数参数默认值的应用#

1
//接受多个参数
2
// const logUser = (username = '张三', age = 0, sex = 'male') => {
3
//   console.log(username, age, sex);
4
// };
5

6
// logUser('Alex', 18, 'male');
7
// logUser();
8

9
//接受一个对象
10
// const logUser = (options) => {
11
//   console.log(options.username, options.age, options.sex);
12
// };
13
// logUser({ username: '张三', age: 0, sex: 'male' });
14

15
//接受一个对象，用解构赋值
16
// const logUser = ({ username, age, sex }) => {
17
//   console.log(username, age, sex);
18
// };
19
// logUser({ username: '张三', age: 0, sex: 'male' });
20

21
//接受一个对象，用解构赋值，用默认值,如果什么都不传，有问题，不传是undefined，undefined不能解构赋值
22
// const logUser = ({ username = '默认名字', age = 0, sex = '未知' }) => {
23
//   console.log(username, age, sex);
24
// };
25
// logUser({ username: '张三', age: 0 });
26

27
//
28
const logUser = ({ username = '默认名字', age = 0, sex = '未知' } = {}) => {
29
  console.log(username, age, sex);
30
};
31
logUser();

展开收起

ES6解构赋值

Wed, 21 Oct 2026 06:22:04 GMT

解构赋值是什么#

认识解构赋值

1
// 下标获取数组
2
const arr = [1, 2, 3];
3
const a = arr[0];
4
const b = arr[1];
5
const c = arr[2];
6
console.log(a);
7
console.log(b);
8
console.log(c);
9
//解构赋值
10
const [a, b, c] = [1, 2, 3];
11
console.log(a, b, c);

什么是解构赋值：解析某一数据结构，将我们想要的的东西提取出来，赋值给变量或

数组解构赋值的原理#

模式（结构）匹配

1
const [a, b, c] = [a,b,c];
2
console.log(a, b, c);

等价于“按位置匹配数组元素”：第 0 位 → a；第 1 位 → b；第 2 位 → c；底层逻辑是：左边是“结构模板”，右边是“数据源”

索引值相同的完成赋值

1
const [a, [, , b], c] = [1, [2, 4, 5], 3];
2
console.log(a, c, b);//1,3,5  不取的，可以直接用逗号跳过

先求值右侧表达式

1
function getArr() {
2
  console.log('getArr 被调用');
3
  return [10, 20, 30];
4
}
5
const [a, b, c] = getArr();
6
console.log(a, b, c);

数组解构赋值的默认值#

数组解构赋值的默认值机制，本质是：当“取到的值是 undefined 时”，才使用默认值，注意：不是 null，也不是“没有值”，而是 严格 === undefined

1
//基本用法
2
const [a = 10, b = 20] = [];
3
console.log(a, b);
4

5
//正常有值时，不使用默认值
6
const [a = 10, b = 20] = [1];
7
console.log(a); // 1
8
console.log(b); // 20
9

10
//只有 undefined 才触发默认值，重点
11
const [a = 10] = [null];
12
console.log(a); // null ❗不是 10
13

14
//位置缺失才会触发默认值
15
const [a = 10, b = 20, c = 30] = [1, undefined];
16
console.log(a); // 1
17
console.log(b); // 20
18
console.log(c); // 30
19

20
//默认值可以是表达式（惰性执行）
21
function getValue() {
22
  console.log("执行了 getValue");
23
  return 99;
24
}
25
const [a = getValue()] = [];
26
console.log(a);
27

28
//默认值不会重复执行（只在需要时执行）
29
const [a = getValue()] = [1];
30
console.log(a);//不会打印 "执行了 getValue"因为a 已经是 1不需要默认值

展开收起

数组解构赋值的应用#

快速交换变量（最经典）：不用临时变量，本质是用数组打包 → 再解构

1
let a = 1;
2
let b = 2;
3

4
[a, b] = [b, a];
5
console.log(a, b); // 2 1

函数返回多个值：替代“返回对象+手动取属性”

1
function getUser() {
2
  return ["Tom", 18];
3
}
4

5
const [name, age] = getUser();
6
console.log(name); // Tom
7
console.log(age);  // 18

忽略不需要的值：中间用空位跳过

1
const [a, , c] = [1, 2, 3];
2

3
console.log(a); // 1
4
console.log(c); // 3

结合默认值（防 undefined）：常用于接口数据不完整时

1
const [a = 10, b = 20] = [1];
2

3
console.log(a); // 1
4
console.log(b); // 20

拆分函数返回的数组（API常见）：很多“Promise封装库”都这么设计

1
const [data, error] = await fetchData();
2

3
if (error) {
4
  console.log("出错了");
5
} else {
6
  console.log(data);
7
}

处理 split 字符串结果：超高频使用

1
const [year, month, day] = "2026-06-17".split("-");
2

3
console.log(year);  // 2026
4
console.log(month); // 06
5
console.log(day);   // 17

遍历数组时同时取 index / value：配合 entries：

1
const arr = ["a", "b", "c"];
2

3
for (const [index, value] of arr.entries()) {
4
  console.log(index, value);
5
}
6
//输出：
7
//0 a
8
//1 b
9
//2 c

解构 Map Map 天然就是可解构结构

1
const map = new Map([
2
  ["name", "Tom"],
3
  ["age", 18]
4
]);
5

6
for (const [key, value] of map) {
7
  console.log(key, value);
8
}

函数参数解构（非常重要）：直接在参数里解构数组

1
function sum([a, b]) {
2
  return a + b;
3
}
4

5
console.log(sum([3, 5])); // 8

类数组解构

1
function fn() {
2
  const [a, b, c] = arguments;
3
  console.log(a, b, c);
4
}
5
fn(10, 20, 30);

对象解构赋值的原理#

从对象中快速提取属性并赋值给变量。

模式（结构）匹配

1
{}={}

属性名相同的完成赋值

1
const { age, name } = { name: 'Alex', age: 18 };
2
console.log(age, name);

对象解构的本质

对象解构并不是创建新的对象，而是根据属性名从对象中读取对应的值，然后赋值给变量。

1
const { name, age } = user;
2
//本质上等价于
3
const name = user.name;
4
const age = user.age;

属性重命名

如果不想使用同名变量，可以进行重命名：

1
const user = { name: 'Tom', age: 18 };
2
const { name: userName } = user;
3
//等价于
4
// const userName = user.name;
5
console.log(userName); // Tom

对象解构赋值的注意事项#

对象解构赋值的默认值，默认值仅在属性值为 undefined 时生效。

1
/**
2
 * 1. 基本用法：没有对应属性时使用默认值
3
 */
4
const obj1 = {};
5

6
const { a = 10, b = 20 } = obj1;
7

8
console.log('1:', a, b); // 10 20
9

10
/**
11
 * 2. 有值时不使用默认值
12
 */
13
const obj2 = { a: 1 };
14

15
const { a: a2 = 10, b: b2 = 20 } = obj2;
16

17
console.log('2:', a2); // 1
18
console.log('2:', b2); // 20
19

20
/**
21
 * 3. 重点：只有 undefined 才会触发默认值
22
 * null 不会触发默认值
23
 */
24
const obj3 = { a: null };
25

26
const { a: a3 = 10 } = obj3;
27

28
console.log('3:', a3); // null ❗不是 10
29

30
/**
31
 * 4. 属性缺失 / undefined 才会触发默认值
32
 */
33
const obj4 = { a: 1, b: undefined };
34

35
const { a: a4 = 10, b: b4 = 20, c: c4 = 30 } = obj4;
36

37
console.log('4:', a4); // 1
38
console.log('4:', b4); // 20（undefined -> 默认值）
39
console.log('4:', c4); // 30（不存在 -> 默认值）
40

41
/**
42
 * 5. 默认值可以是表达式（惰性执行）
43
 */
44
function getValue() {
45
  console.log('执行了 getValue()');
46
  return 99;
47
}
48

49
const obj5 = {};
50

51
const { a: a5 = getValue() } = obj5;
52

53
console.log('5:', a5); // 会触发 getValue()
54

55
/**
56
 * 6. 默认值不会重复执行（只有需要时才执行）
57
 */
58
const obj6 = { a: 1 };
59

60
const { a: a6 = getValue() } = obj6;
61

62
console.log('6:', a6);
63
// 不会执行 getValue()
64

65
/**
66
 * 7. 属性重命名 + 默认值
67
 */
68
const obj7 = {};
69

70
const { a: x7 = 10 } = obj7;
71

72
console.log('7:', x7); // 10
73

74
/**
75
 * 8. 嵌套对象解构 + 默认值
76
 */
77
const obj8 = {};
78

79
const {profile: { name: name8 = 'Anonymous' } = {} } = obj8;// ⚠️ 防止 profile 是 undefined
80

81
console.log('8:', name8); // Anonymous

展开收起

将一个已经声明的变量用于解构赋值

1
let b = 1;
2
const { b } = { b: 2 };
3
console.log(b);//报错
4

5
var b = 1;
6
const { b } = { b: 2 };
7
console.log(b);//报错
8

9
let c = 5;
10
[c] = [2, 3, 4];
11
console.log(c);//2 覆盖let c = 5
12

13
const c = 5;
14
[c] = [2, 3, 4];
15
console.log(c);//报错，接口出变量c，c是常量无法更改

展开收起

可以取到继承的属性

1
const { toString } = {};
2
console.log(toString);

1
const parent = {
2
  a: 10
3
};
4

5
const obj = Object.create(parent);
6

7
obj.b = 20;
8

9
const { a, b } = obj;
10

11
console.log(a); // 10
12
console.log(b); // 20

对象解构：

1
obj
2
 ├── b: 20 (自身属性)
3
 └── [[Prototype]]
4
       └── a: 10 (继承属性)

解构时：b → 在自身找到；a → 在原型链找到

常见错误：

解构 undefined

1
const { name } = undefined;
2
//报错TypeError: Cannot destructure property 'name' of undefined
3
//undefined.name 本身就是非法操作。

解构 null

1
const { name } = null;
2
//TypeError
3
//null.name本身就是非法操作。

解构只“读取”，不复制结构

1
const parent = {
2
  a: 1,
3
};
4

5
const obj = Object.create(parent); //obj = {} 创建一个新对象 obj，并让它的原型指向 parent
6

7
const { a } = obj; //const a = 1
8

9
obj.a = 999;//这是在解构之后赋值的，所以a还是1，如果写在解构之前，a就是999
10

11
console.log(a); // 1 ❗不会变
12
console.log(obj); //999
13
console.log(parent.a); //1

对象解构与数组解构的区别

特性	对象解构	数组解构
匹配方式	按属性名匹配	按位置匹配
是否依赖顺序	否	是
底层原理	属性读取	迭代器读取
典型写法	`{ name }`	`[first]`

对象解构赋值的应用#

1
//函数参数的解构赋值
2
const logPersonInfo = ({ username, age }) => console.log(username, age);
3

4
logPersonInfo({ username: 'alex', age: 18 });
5

6
//复杂嵌套 模式匹配-跳过的用逗号
7
const obj = {
8
  x: 1,
9
  y: [3, 4, 5],
10
  z: {
11
    a: 5,
12
    b: 6,
13
  },
14
};
15
// const { x, y, z } = obj;
16
// console.log(x, y, z);
17
const {
18
  x,
19
  y: [, b, c], //这个一定要写对属性名，根据属性名匹配
20
  y: y, //第一个y是属性值，第二个y是常量
21
  y, //简写
22
} = obj;
23
console.log(b, y);

展开收起

其它数据类型的解构赋值#

字符串解构赋值：

1
//字符串解构赋值，可以数组解构也可以是对象
2
const [a, b, c, , d] = 'hello';
3
console.log(a, b, c, d);
4

5
const { 0: e, 1: f, length } = 'hello';
6
console.log(e, f, length);

数值和布尔值

1
// 数值和布尔值的解构赋值-没有意义-只能拿到的是方法，不是数字的“结构内容”。
2
// 先将右边的值转为对象
3
const { toString } = 123; //等价于：const { toString }new Number(123);
4
console.log(toString);
5
// 布尔值也一样
6
const flag = true;
7
const { toString, valueOf } = flag;
8
console.log(toString); // function toString()

undefined和null

这两个没法解构赋值，直接报错

ES6箭头函数

Wed, 21 Oct 2026 03:01:10 GMT

箭头函数是什么#

认识箭头函数

箭头函数本质上还是函数，只是写法更短、更清晰。

1
function add(a, b) {
2
  return a + b;
3
}
4
//声明的函数一般不会再赋值，所以一般使用const
5
const add = (a, b) => {
6
  return a + b;
7
};
8
const add = (a, b) => a + b;

箭头函数结构

1
(参数) => { 函数体 }

参数部分：0 个参数：()；1 个参数：可以省略括号；多个参数：必须加括号

1
const f1 = () => console.log("hello");
2
const f2 = x => x * 2;
3
const f3 = (x, y) => x + y;

箭头 =>：这是箭头函数的标志，用来连接“参数”和“函数体”。

函数体：多行代码需要大括号；单行表达式可省略 return 和大括号，自动返回结果

如何将一般函数改写成箭头函数

普通函数

1
function square(x) {
2
  return x * x;
3
}
4
//改成箭头函数
5
const square = (x) => {
6
  return x * x;
7
};
8
//再简化
9
const square = x => x * x;

多个参数

1
function add(a, b) {
2
  return a + b;
3
}
4
//改成箭头函数
5
const add = (a, b) => a + b;

无参数

1
function greet() {
2
  return "hello";
3
}
4
//改成箭头函数
5
const greet = () => "hello";

有多行逻辑

1
function max(a, b) {
2
  if (a > b) {
3
    return a;
4
  }
5
  return b;
6
}
7
//改成箭头函数
8
const max = (a, b) => {
9
  if (a > b) {
10
    return a;
11
  }
12
  return b;
13
};

单行对象

1
function add(x, y) {
2
  return { value: x + y };
3
}
4
console.log(add(1, 2));
5
//常规改写
6
const add1 = (x, y) => {
7
  return { value: x + y };
8
};
9
console.log(add1(1, 2));
10
//隐式返回对象，箭头函数想直接返回对象，必须用 (),箭头函数没有 return,默认返回undefined
11
const add2 = (x, y) => ({
12
  value: x + y,
13
});
14
console.log(add2(1, 2));

数组

1
const add3 = (x, y) => [x, y];
2
console.log(add3(1, 2));

提前预习：

this 绑定不同：普通函数：this 取决于调用方式；箭头函数：this 继承外层作用域

箭头函数的注意事项#

没有自己的 this#

1
const obj = {
2
  name: "Tom",
3
  say: () => {
4
    console.log(this.name);
5
  }
6
};
7

8
obj.say();//输出：undefined

1
const obj = {
2
  name: "Tom",
3
  say() {
4
    console.log(this.name);
5
  }
6
};

对象方法、类方法不要用箭头函数

不能作为构造函数（不能 new）#

1
const Person = (name) => {
2
  this.name = name;
3
};
4

5
const p = new Person("Tom"); // ❌ 报错

1
function Person(name) {
2
  this.name = name;
3
}
4

5
const p = new Person("Tom");

构造函数需要this和prototype，但箭头函数没有这两个机制

没有arguments#

1
const fn = () => {
2
  console.log(arguments);
3
};
4

5
fn(1, 2, 3);//报错：arguments is not defined

1
const fn = (...args) => {
2
  console.log(args);
3
};
4

5
fn(1, 2, 3);

箭头函数必须用 …args 替代 arguments

不能用作 prototype 方法（不适合对象方法）#

1
function Person(name) {
2
  this.name = name;
3
}
4

5
Person.prototype.say = () => {
6
  console.log(this.name);
7
};

1
Person.prototype.say = function () {
2
  console.log(this.name);
3
};

原型方法必须用普通函数，如果使用箭头函数，this 指向会错误，变成外层。

不能使用 yield（不能当 Generator）#

1
const gen = *() => {
2
  yield 1;
3
};

1
function* gen() {
2
  yield 1;
3
}

语法错误

总结：箭头函数适合“短逻辑 + 回调”，但不适合“对象方法 + 构造函数 + 需要动态 this 的场景”

非箭头函数中的 this 指向#

复习之前的上下文规则：分为全局作用域中this指向和一般函数的this

1
// 'use strict';
2
//console.log(this); //window
3
function add() {
4
  console.log(this);
5
}
6
//只有函数执行才能明确this指向
7
//this指向和函数在哪里调用哪调用没关系，只和谁调用有关
8
// add(); //非严格模式下window/global 严格模式下undefined
9
const calc = {
10
  add: add,
11
};
12
calc.add(); //指向这个对象
13
const adder = calc.add;
14
adder(); //非严格模式下window/global 严格模式下undefined

只有函数执行才能明确this指向
this指向和函数在哪里调用哪调用没关系，只和谁调用有关

箭头函数中的 this 指向#

箭头函数没有this指向，没有自己的this

1
const calc = {
2
  add: () => {
3
    console.log(this);
4
  },
5
};
6
calc.add(); //window,箭头函数没有自己的this，会往外找this

1
//练习
2
global.a = 2; //node环境这么写
3
var a = 2; //浏览器，var会挂在全局window上，let和const不会
4
const calc = {
5
  a: 1,
6
  add: function () {
7
    const adder = () => {
8
      console.log(this.a);
9
    };
10
    adder();
11
  },
12
};
13
calc.add(); //箭头函数this，往外找是function 函数，calc.add()this指向calc
14
const adder = calc.add;
15
adder();//2，this指向全局window

展开收起

不适用箭头函数的场景#

在箭头函数的注意事项已经有提到：

❌ 不能作为构造函数（不能 new）
❌ 需要this指向调用对象的时候
❌ 没有 arguments

箭头函数的应用#

按钮点击 → 每秒数字 +1 → 显示在页面
用箭头函数把“多层函数中的 this 丢失问题”变成“稳定继承链”

1
<!DOCTYPE html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <title>箭头函数的应用</title>
6
    <style>
7
      body {
8
        padding: 50px 0 0 250px;
9
        font-size: 30px;
10
      }
11

12
      #btn {
13
        width: 100px;
14
        height: 100px;
15
        margin-right: 20px;
16
        font-size: 30px;
17
        cursor: pointer;
18
      }
19
    </style>
20
  </head>
21
  <body>
22
    <button id="btn">开始</button>
23
    <span id="result">0</span>
24

25
    <script>
26
      const btn = document.getElementById('btn');
27
      const result = document.getElementById('result');
28

29
      // const timer = {
30
      //   time: 0,
31
      //   start: function () {
32
      //     // this
33
      //     var that = this;
34
      //     // var self = this;
35
      //     btn.addEventListener(
36
      //       'click',
37
      //       function () {
38
      //         setInterval(function () {
39
      //           console.log(this);
40
      //           // this.time++;
41
      //           // result.innerHTML = this.time;
42
      //           that.time++;
43
      //           result.innerHTML = that.time;
44
      //         }, 1000);
45
      //       },
46
      //       false
47
      //     );
48
      //   }
49
      // };
50

51
      const timer = {
52
        time: 0,
53
        start: function () {
54
          // this
55
          btn.addEventListener(
56
            'click',
57
            () => {
58
              // this
59
              setInterval(() => {
60
                console.log(this);
61
                this.time++;
62
                result.innerHTML = this.time;
63
              }, 1000);
64
            },
65
            false
66
          );
67
        }
68
      };
69

70
      timer.start();
71
    </script>
72
  </body>
73
</html>

展开收起

this 一共经历了 3 层：
第一层：timer.start()
```
1
timer.start();
```
start 是谁调用的？ this = timer
第二层：点击事件函数
```
1
btn.addEventListener('click', () => { ... })
```
这里是箭头函数 ，箭头函数不会绑定自己的 this，它继承外层 this，外层是谁？this = timer
第三层：setInterval
```
1
setInterval(() => {
2
  this.time++;
3
}, 1000);
```
这里又是箭头函数，外层是 click 箭头函数，click 箭头函数 this = timer，所以最终 this === timer，永远指向 timer

ES6模板字符

Wed, 21 Oct 2026 02:54:08 GMT

模板字符串是什么#

在 JavaScript 里，模板字符串用 **反引号 “**表示，而不是单引号或双引号。

基本用法：嵌入变量

1
const name = "Alice";
2
const msg = `Hello, ${name}!`;
3

4
console.log(msg); // Hello, Alice!

支持表达式

1
const a = 5;
2
const b = 3;
3

4
console.log(`Sum = ${a + b}`); // Sum = 8

支持多行字符串

1
const text = `第一行
2
第二行
3
第三行`;
4

5
console.log(text);

模板字符串的注意事项#

必须用反引号
${} 里可以写任意表达式（函数调用、运算等）
在模板字符串中，所有的空格、换行或者缩进都会保留到输出中

输出反引号和反斜杆，在前面写反斜杆

1
const info = `\\\``;
2
console.log(info);\\  输出：\`

模板字符串的应用#

1
<!doctype html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <title>模板字符串的应用</title>
6
    <style>
7
      body {
8
        padding: 50px 0 0 300px;
9
        font-size: 22px;
10
      }
11

12
      ul {
13
        padding: 0;
14
      }
15

16
      p {
17
        margin-bottom: 10px;
18
      }
19
    </style>
20
  </head>
21
  <body>
22
    <p>学生信息表</p>
23
    <ul id="list">
24
      <li style="list-style: none">信息加载中……</li>
25
    </ul>
26

27
    <script>
28
      // 数据
29
      const students = [
30
        {
31
          username: 'Alex',
32
          age: 18,
33
          sex: 'male',
34
        },
35
        {
36
          username: 'ZhangSan',
37
          age: 28,
38
          sex: 'male',
39
        },
40
        {
41
          username: 'LiSi',
42
          age: 20,
43
          sex: 'female',
44
        },
45
      ];
46

47
      const list = document.getElementById('list');
48

49
      let html = '';
50

51
      for (let i = 0; i < students.length; i++) {
52
        html += `<li>我的名字是：${students[i].username},${students[i].sex},${students[i].age}</li>`;
53
      }
54

55
      // console.log(html);
56
      list.innerHTML = html;
57
    </script>
58
  </body>
59
</html>

展开收起

ES6初识和ES6变量

Wed, 21 Oct 2026 00:41:19 GMT

ES6 简介#

ECMAScript 是语言的标准；6 是版本号；ES6 = ECMAScript 这门语言的第 6 代标准

什么是ECMAScript

是欧洲计算机制造商协会，一个标准化组织，ECMAScript 是由 ECMA 这个标准化组织制定的一个语言标准

具体是什么

ECMAScript规定了语法和API，ECMAScript = 语法 + API

历史版本

ES1 ~ 3、ES5 ~ 6
ES4 被废弃了（太激进）
ES3：do while、switch、正则表达式等
ES5：forEach、map、filter、Object.create、Object.defineProperty 等

命名方式

ES6->ES7->ES8->… = ES6+
ES2015->ES2016->ES2017->…

ES 与 JavaScript 的关系

JavaScript(浏览器端) = ECMAScript(语法+API) + DOM + BOM
主流浏览器的最新版本几乎全部支持 ES6
IE 老版本等不支持的浏览器，可以用 Babel 转码

ES6新增变量let 和 const#

let 和 const 是什么

let 用来声明可变变量。代替var
const 用来声明常量（不可重新赋值的变量）。

let 和 const 的用法

let基本用法

1
let name = "Alice";
2
name = "Bob"; // 可以重新赋值

const基本用法

1
const PI = 3.14;

什么是变量，什么是常量

var、let声明的就是变量，变量一旦初始化之后，还可以重新赋值
const声明的就是常量，一旦初始化，就不能重新赋值

const#

为什么需要 const

避免变量被误修改（防止 bug）；如果只用 let / var，变量很容易被不小心改掉：

1
let PI = 3.14;
2
PI = 100; // ❌ 可能是误操作，但不会报错
3

4
const PI = 3.14;
5
PI = 100; // ❌ 直接报错，防止 bug

让代码语义更清晰（可读性更强）；看到 const，别人就能立刻理解：这个值不会变

1
const API_URL = "https://api.example.com";
2
const MAX_COUNT = 10;
3
//相比let
4
let API_URL = "..."; // 不确定会不会变

降低维护成本（大型项目很重要）；在大项目中：一个变量被多处引用，如果可以随意修改，很容易出错

1
const config = {...};// 防止重新赋值
2

3
let config = {...};// 多个地方可能修改 config

符合函数式编程思想；现代前端（React / Vue）倾向：数据尽量不可变（Immutable）

1
//不直接修改原数据，更安全
2
const list = [1, 2, 3];
3
const newList = [...list, 4];

提升性能优化空间：虽然 JS 引擎会优化很多情况，但不可变数据更容易优化，更少副作用

关键误区

const ≠ “完全不可变”；const 只限制：不能重新赋值（引用不能变）

1
const obj = { name: "Tom" };
2
obj.name = "Jerry"; // ✔ 可以

const 的注意事项

一旦声明，就必须立即初始化，不能留到后面复制；
使用const声明的常量允许在不重新赋值的情况下修改他的值（关键误区）

什么时候用let，什么时候需要使用const

let 和 const 的选择核心原则其实很简单：默认用 const，需要“重新赋值”时才用 let
不会重新赋值的变量用const；引用类型（对象/数组）通常用 const，因为可以修改对象内容，不能整体重新赋值；配置、常量、固定数据用const；函数 / 导入模块用const
什么时候用 let（必须会变才用）：值会变化的变量；循环变量；需要重新赋值的状态；条件赋值

let、const 与 var 的区别#

重复声明

var可以重复声明； let、const不允许重复声明

1
var a = 1;
2
var a = 2; // ✔ 不报错；容易出 bug
3
console.log(a); // 2
4

5
let a = 1;
6
let a = 2; // ❌ 报错
7

8
const a = 1;
9
const a = 2; // ❌ 报错
10

11
function fun(a){
12
    let a = 1;//❌ 报错
13
}

变量提升

var存在变量提升，但值是 undefined；

1
console.log(a); // undefined
2
var a = 10;
3
//等价于
4
var a;
5
console.log(a);
6
a = 10;

let / const：也会提升，但不能访问;暂时性死区

1
console.log(a); // ❌ 报错
2
let a = 10;
3
console.log(b); // ❌ 报错
4
const b = 20;

这里的a已经被提升，但是未被初始化，此时处于暂时性死区，变量已经存在，但不能访问它的值，访问这些变量会导致ReferenceError错误

变量的声明周期：声明（在作用域内声明这个变量，此时变量已被标记为存在。）——- 初始化（在内存中为这个变量开辟一块空间，此时由于没有赋值，所以会初始化为undefined。） ——— 赋值（将值赋给这个变量。）

var: 在执行上下文执行之前的预解析阶段，会有声明提升，和初始化提升，这时js会把var存放在变量环境中(你可以简单理解为一个存放变量的地方，函数声明也会放在这个地方)，且值为undefined，因此我们可以提前访问，结果为undefined。
let: 在执行上下文执行之前的预解析阶段，仅有声明提升，不会给它初始化，更不会给他赋值，此时存储中有这个变量，但我们无法访问。（let和const存放在词法环境中，你可以简单理解为另一个地方）这也就是所说的暂时性死区当执行到真正的赋值语句的时候，才会执行初始化操作并赋值。
const： 与let的创建顺序基本一致，仅有 声明提升，但非常重要的区别是const本身不存在赋值这一个概念，当执行到 const a = 2时，是直接将const初始化为2。也就是我们所说的const是常量。因为它根本无法赋值，也因此在声明时必须给它一个值。（相当于Promise内部状态只能修改一次，因为Promise源码里后续也没有为状态赋值的操作。）而对于引用数据类型来说，const初始化的是一个栈内存里分配的指针。你虽然无法修改指针的指向，但可以修改指针指向的堆里面的内容，也就是我们所说的cosnt声明的引用数据类型可以更改。
作者：孙泓旻链接：https://juejin.cn/post/7209939789808812093 来源：稀土掘金著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

暂时性死区

只要作用域内存在let、const，它们所声明的变量或常量就自动”绑定”这个区域，不再受到外部作用域的影响

1
let a = 2;
2
let b = 4;
3
function fun() {
4
  //console.log(a);//应为函数作用域绑定了a，所以没法往外找，报错
5
  console.log(b); //相反，函数作用域内没找到b，就往外找
6
  //let a = 1;
7
}
8
fun();

window 对象的属性和方法（全局作用域中）

var会挂到 window 上，全局污染问题

1
var a = 10;
2
console.log(window.a); // 10

let / const：不会挂到 window，更安全，不污染全局对象

1
let a = 10;
2
const b = 20;
3

4
console.log(window.a); // undefined
5
console.log(window.b); // undefined

块级作用域

var没有块级作用域（只有函数作用域）

1
if (true) {
2
  var a = 10;
3
}
4
console.log(a); // 10，if / for 里的变量“泄露”到外面
5

6
for (var i = 0; i < 3; i++) {
7
  console.log(i);
8
}
9
console.log(i); //3

let / const：有块级作用域

1
if (true) {
2
  let a = 10;
3
  const b = 20;
4
}
5
console.log(a); // ❌ 报错
6
console.log(b); // ❌ 报错
7

8
for (let a = 0; a < 3; a++) {
9
  console.log(a);
10
}
11
console.log(a); //❌ 报错

作用域链

1
let a = 1;
2
function foo() {
3
  let b = 2;
4
  function bar() {
5
    let c = 3;
6
    console.log(a); // ?1
7
    console.log(b); // ?2
8
    console.log(c); // ?3
9
  }
10
  bar();
11
}
12

13
foo();

查找过程（关键）

1️⃣ 找 c

在 bar 内部 → 直接找到

2️⃣ 找 b

bar 没有 → 去上一层 foo → 找到

3️⃣ 找 a

bar 没有 → foo 没有 → 去全局 → 找到

总结：函数定义时的作用域嵌套关系，而不是调用时决定的，访问变量时：先在当前作用域找，找不到 → 去上一级作用域，一直找到全局作用域，还找不到 → 报错 ReferenceError

常见误区：

作用域链是运行时决定的；错！作用域链在函数定义时就已经确定
跟 this 是一回事；完全不同：作用域链作用是找变量；this作用指向对象

总结

特性	var	let	const
重复声明	✔ 可以	❌ 不可以	❌ 不可以
变量提升	✔ 有（undefined）	✔ 有（TDZ）	✔ 有（TDZ）
暂时性死区	❌ 没有	✔ 有	✔ 有
块级作用域	❌ 没有	✔ 有	✔ 有
window属性	✔ 会挂载	❌ 不会	❌ 不会

let 和 const 的应用#

示例：点击按钮1打印1，点击按钮2打印2，点击按钮3打印3

1
  <button class="btn">1</button>
2
  <button class="btn">2</button>
3
  <button class="btn">3</button>
4
  <script>
5
    var btns = document.querySelectorAll('.btn');
6
    for (var i = 0; i < btns.length; i++) {
7
      btns[i].addEventListener('click', function () {
8
        console.log(i); //都是3
9
      });
10
    }
11
  </script>

为什么打印出来都是3？

因为点击的时候：for 循环已经执行完了，i 早就变成 3 了

拆解：

1️⃣ var 没有块级作用域

1
for (var i = 0; i < 3; i++) {}

等价于：

1
var i; // 只有一个 i

👉 只有一个共享的 i

2️⃣ addEventListener 里的函数“没有立即执行”

1
function () {
2
  console.log(i);
3
}

👉 它只是“注册”，不是执行

3️⃣ 点击发生时才执行函数

当你真正点击时：

👉 for 循环早就结束了

1
i === 3

4️⃣ 作用域链在找 i

点击时执行函数：

1
console.log(i);

查找过程：

1
当前函数作用域 → 没有 i
2
外层作用域（for 所在函数 / 全局）→ i = 3

👉 所以打印 3

闭包方式解决：

1
  <button class="btn">1</button>
2
  <button class="btn">2</button>
3
  <button class="btn">3</button>
4
  <script>
5
    var btns = document.querySelectorAll('.btn');
6
    for (var i = 0; i < btns.length; i++) {
7
      (function (index) {
8
        btns[index].addEventListener('click', function () {
9
          console.log(index + 1);
10
        });
11
      })(i);
12
    }
13
  </script>

立即执行函数形成了函数作用域，这个函数作用域会保存这个index，当点击的时候触发点击事件，向外找这个index

正确示例：

1
  <button class="btn">1</button>
2
  <button class="btn">2</button>
3
  <button class="btn">3</button>
4
  <script>
5
    var btns = document.querySelectorAll('.btn');
6
    for (let i = 0; i < btns.length; i++) {
7
      btns[i].addEventListener('click', function () {
8
        console.log(i + 1);
9
      });
10
    }
11
  </script>

let 在 for 循环中有一个特殊机制：每一轮循环，都会创建一个新的 i 绑定
let 的本质：形成多个闭包环境；每个循环

JavaScript正则表达式

Tue, 20 Oct 2026 10:37:18 GMT

本文学习JavaScript正则表达式，内容很复杂，但是现在AI流行的情况下，完全可以让AI写，但是作为开发人员，还是必须懂这些内容的

什么是正则表达式#

正则表达式（regular expression）描述了字符串的“构成模式”，经常被用于检查字符串是否符合预定的格式要求

快速感知正则表达式

用一个例子快速演示正则表达式基本使用方法：检查某个字符串是否是6位数字

1
// 要检查的字符串
2
var str = '456789';
3
// 正则表达式规则
4
var regexp = /^\d{6}$/;///^\d{6}$/就是正则表达式，，它描述了字符串必须是“6位数字”的构成规则
5
// 检查
6
if (regexp.test(str)) {//正则表达式可以调用test()方法，检查某字符串是否符合正则表达式规定的规则
7
  //alert('符合规则');
8
  console.log('符合规则');
9
} else {
10
  //alert('不符合规则');
11
  console.log('不符合规则');
12
}

正则表达式“按位”描述规则

正则表达式“按位”描述规则，是指它是一位一位的描述字符串的构成形式
比如检查字符串是不是这样的：以字母m开头，然后是3个数字，最后以字母n结尾
```
1
/^m\d\d\dn$/   //^表示开头，$表示结尾，\d表示数字\d\d\d也可以写作\d{3}
```

正则表达式的创建#

使用/内容/的语法形式，可以快速创建正则表达式
也可以使用new RegExp(‘内容’)的形式，创建正则表达式

使用typeof运算符检查正则表达式的类型，结果是object

1
var regexp1 = /^\d{6}$/;
2
var regexp2 = new RegExp('^\\d{6}$');
3

4
var str = '123456';
5

6
console.log(regexp1.test(str));
7
console.log(regexp2.test(str));

元字符#

元字符”是指一位指定类型的字符

元字符	功能
\d	匹配一个数字
\D	匹配一个非数字字符
\w	匹配一个单字字符（字母、数字或者下划线）
\W	匹配一个非单字字符
\s	匹配一个空白字符，包括空格、制表符和换行符
.	任意字符

开头和结尾

元字符	功能
^	匹配开头
$	匹配结尾

元字符注意事项

如果使用new RegExp()写法，反斜杠需要多写一个
比如/^\d$/和new RegExp('^\\d$')是相同的意思

元字符使用举例

某快递公司运单号形式是这样的：123-4567-890，请使用正则表达式检查某字符串是否符合此格式

1
const reg = /^\d{3}-\d{4}-\d{3}$/;
2

3
console.log(reg.test("123-4567-890")); // true
4
console.log(reg.test("12-4567-890"));   // false
5
console.log(reg.test("123-456-890"));   // false
6
console.log(reg.test("123-4567-8901")); // false

某产品的验证秘钥形式是这样的：□□□-□□□□-□□□，其中□ 表示字母数字或者下划线，请使用正则表达式检查某字符串是否符合此格式

1
const reg = /^[A-Za-z0-9_]{3}-[A-Za-z0-9_]{4}-[A-Za-z0-9_]{3}$/;
2

3
console.log(reg.test("a1_-B2c3-9Zx"));   // true
4
console.log(reg.test("abc-1234-xyz"));   // true
5
console.log(reg.test("ab-1234-xyz"));    // false（第一段少1位）
6
console.log(reg.test("abc-123-xyz"));    // false（第二段少1位）
7
console.log(reg.test("abc1234xyz"));     // false（缺少 -）

字符的转义

在特殊字符之前的反斜杠\表示下一个字符不是特殊字符，应该按照字面理解

1
/^.$/ 检查字符串是不是任意字符
2
/^\.$/检查字符串是不是一个点
3
/^\\$/检查字符串是不是一个反斜杠

不管一个符号有没有特殊意义，都可以在其之前加上一个\以确保它表达的是这个符号本身

举例：某产品批号形式为：123.45^67#89，请使用正则表达式检查某字符串是否符合此格式

1
const reg = /^\d{3}\.\d{2}\^\d{2}#\d{2}$/;
2

3
console.log(reg.test("123.45^67#89")); // true
4
console.log(reg.test("12.45^67#89"));  // false
5
console.log(reg.test("123.4^67#89"));  // false
6
console.log(reg.test("123.45^67#890")); // false
7
console.log(reg.test("abc.45^67#89"));  // false

方括号表示法#

使用方括号，比如[xyz]，可以创建一个字符集合，表示匹配方括号中的任意字符
比如某学校的学号规定：第1位是一个字母，b表示本科生， y表示研究生，后面是7位数字，用正则表示为：
```
1
/^[by]\d{7}$/
```
可以使用短横-来指定一个字符范围，^表示否定

元字符	等价的方括号表示法
\d	[0-9]
\D	0-9
\w	[A-Za-z0-9_]
\W	A-Za-z0-9_

请验证某字符串是否是5位字母，大小写均可

1
const reg = /^[A-Za-z]{5}$/;
2

3
console.log(reg.test("abcde")); // true
4
console.log(reg.test("ABCDE")); // true
5
console.log(reg.test("AbCdE")); // true
6

7
console.log(reg.test("abcd"));   // false（少1位）
8
console.log(reg.test("abcdef"));  // false（多1位）
9
console.log(reg.test("abc12"));   // false（含数字）
10
console.log(reg.test("abc_d"));   // false（含下划线）

请验证某字符串是否是5位，且仅有小写字母、点构成

1
const reg = /^[a-z.]{5}$/;
2

3
console.log(reg.test("abcde")); // true
4
console.log(reg.test("a.b.c"));  // true
5
console.log(reg.test("ab.cd"));  // true
6

7
console.log(reg.test("ABcde"));  // false（有大写）
8
console.log(reg.test("abc12"));  // false（有数字）
9
console.log(reg.test("abcd"));    // false（少1位）
10
console.log(reg.test("abcdef"));  // false（多1位）
11
console.log(reg.test("abc_d"));   // false（有下划线）

请验证某字符串是否是4位小写字母，且最后一位不能是m字母

1
const reg = /^[a-z]{3}[a-ln-z]$/;
2

3
console.log(reg.test("abcd")); // true
4
console.log(reg.test("abcz")); // true
5
console.log(reg.test("abcm")); // false ❌（最后是m）
6

7
console.log(reg.test("abc"));  // false（少1位）
8
console.log(reg.test("abcde")); // false（多1位）

量词#

量词	意义
*	匹配前一个表达式0次或多次。等价于{0,}
+	匹配前面一个表达式1次或者多次。等价于{1,}
?	匹配前面一个表达式0次或者1次。等价于{0,1}
{n}	n是一个正整数，匹配了前面一个字符刚好出现了n次
{n,}	n是一个正整数，匹配前一个字符至少出现了n次
.{n,m}	n和m都是整数。匹配前面的字符至少n次，最多m次

请验证字符串是否符合手机号码的规则：11位数字，并且肯定以1开头

1
const reg = /^1\d{10}$/;
2

3
console.log(reg.test("13812345678")); // true
4
console.log(reg.test("19876543210")); // true
5

6
console.log(reg.test("23812345678")); // false（不是1开头）
7
console.log(reg.test("1381234567"));  // false（少1位）
8
console.log(reg.test("138123456789")); // false（多1位）
9
console.log(reg.test("1a812345678"));  // false（含字母）

请验证某字符串是否是这样的：以字母开头，中间是任意位数字（最少1位）构成，并以字母结尾

1
const reg = /^[A-Za-z]\d+[A-Za-z]$/;
2

3
console.log(reg.test("a123b"));   // true
4
console.log(reg.test("Z9x"));     // true
5

6
console.log(reg.test("a1"));      // false（结尾不是字母）
7
console.log(reg.test("123a"));    // false（开头不是字母）
8
console.log(reg.test("a12b3"));   // false（结尾不是字母）
9
console.log(reg.test("ab"));      // false（中间没有数字）

请验证某字符串是否符合网址规则：以www.开头，中间是任意位的字符（字母数字下划线），最后以.com结尾，也可以以.com.cn结尾

1
const reg = /^www\.\w+(?:\.com|\.com\.cn)$/;
2

3
console.log(reg.test("www.baidu.com"));      // true
4
console.log(reg.test("www_baidu.com.cn"));   // true
5
console.log(reg.test("www_abc123.com"));     // true
6

7
console.log(reg.test("http://www.baidu.com"));// false（多了http）
8
console.log(reg.test("www.baidu.net"));       // false（不支持.net）
9
console.log(reg.test("www..com"));            // false（中间为空）
10
console.log(reg.test("ww.baidu.com"));        // false（不是www开头）

修饰符#

修饰符也叫作标志（flags），用于使用正则表达式实现高级搜索

修饰符	意义
i	不区分大小写搜索
g	全局搜索

修饰符的使用：

1
var re = /m/gi; //在正则表达式的第二个/后面写修饰符，可以多个连写
2

3
var re = new RegExp('m','gi');//new RegExp()形式的正则表达式，以字符串形式写在第二个参数

正则表达式的相关方法#

正则表达式可以“打点”调用哪些方法呢？

方法	简介
test()	测试某字符串是否匹配正则表达式，返回布尔值
exec()	根据正则表达式，在字符串中进行查找，返回结果数组或者null

test()方法

正则表达式的test()方法用来测试某字符串是否匹配此正则表达式，它返回true或false
```
1
/^[a-z]{3}[a-ln-z]$/.test('abcd')
```

exec()

exec()方法功能是：在一个指定字符串中执行一个搜索匹配查找，返回一个结果数组或null
```
1
var str ='abc123def456ghi789';
2
var regexp = /\d+/;
3
var result1 = regexp.exec(str);
```

exec()方法的逐条遍历

exec()方法最有趣的是，有“g”修饰符的正则表达式将自动成为“有状态”的，这意味着可以对单个字符串中的多次匹配结果进行逐条的遍历

1
var str ='abc123def456ghi789';
2
var regexp = /\d+/g; // 有g修饰符
3
var result1 = regexp.exec(str);
4
var result2 = regexp.exec(str);
5
var result3 = regexp.exec(str);
6
var result4 = regexp.exec(str);
7
console.log(result1);
8
console.log(result2);
9
console.log(result3);
10
console.log(result4);

1
var str ='abc123def456ghi789';
2
var regexp = /\d+/g; // 有g修饰符
3
var result;
4
while (result = regexp.exec(str)) {
5
  console.log(result);
6
}

字符串的相关正则方法#

字符串有哪些方法可以使用正则表达式呢？

方法	简介
search()	在字符串中根据正则表达式进行查找匹配，返回首次匹配到的位置索引，测试不到则返回-1
match()	在字符串中根据正则表达式进行查找匹配，返回一个数组，找不到则返回null
replace()	使用替换字符串替换掉匹配到的子字符串，可以使用正则表达式
split()	分隔字符串为数组，可以使用正则表达式

正则表达式的应用#

用正则表达式进行表单验证

用正则表达式进行表单验证是正则表达式最重要的实际应用
实际上，很多正则表达式不需要我们自己写，可以通过搜索引擎和AI查找，可以拿来即用

JavaScript包装类

Tue, 20 Oct 2026 10:37:03 GMT

本文主要学习JavaScript包装类和Math、Date对象

包装类#

什么是包装类

Number()、String()和Boolean()分别是数字、字符串、布尔值的“包装类”

很多编程语言都有“包装类”的设计，包装类的目的就是为了让基本类型值可以从它们的构造函数的prototype上获得方法

1
var a = new Number(123);
2
var b = new String('柚子177');
3
var c = new Boolean(true);
4

5
console.log(typeof a); //object
6
console.log(typeof b); //object
7
console.log(typeof c); //object
8

9
console.log(5 + a); //可以参与运算
10
console.log(b.slice(0, 2));
11
console.log(c && true);
12

13
var d = 1234;
14
console.log(d.__proto__ == Number.prototype); //true

a、b、c是基本类型值么？它们和普通的数字、字符串、布尔值有什么区别么？

Number()、String()和Boolean()的实例都是object类型，它们的PrimitiveValue属性存储它们的本身值
new出来的基本类型值可以正常参与运算
包装类的目的就是为了让基本类型值可以从它们的构造函数的prototype上获得方法

Math（数学）对象#

已经学习过的Math对象的方法

幂和开方：Math.pow()、Math.sqrt()
向上取整和向下取整：Math.ceil()、Math.floor()

四舍五入Math.round()

Math.round()可以将一个数字四舍五入为整数

1
console.log(Math.round(3.4)); // 3
2
console.log(Math.round(3.5)); // 4
3
console.log(Math.round(3.98)); // 4
4
console.log(Math.round(3.49)); // 3

四舍五入到小数点后某位

1
function roundTo(num, digits) {
2
  const factor = Math.pow(10, digits);
3
  return Math.round(num * factor) / factor;
4
}
5

6
roundTo(3.14159, 2); // 3.14
7
roundTo(3.145, 2);   // 3.15
8
roundTo(3.1, 3);     // 3.100

Math.max()和Math.min()

Math.max()可以得到参数列表的最大值

Math.min()可以得到参数列表的最小值

1
console.log(Math.max(6, 2, 9, 4)); // 9
2
console.log(Math.min(6, 2, 9, 4)); // 2

如何利用Math.max()求数组最大值

Math.max()要求参数必须是“罗列出来”，而不能是数组
还记得apply方法么？它可以指定函数的上下文，并且以数组的形式传入“零散值”当做函数的参数
```
1
var arr = [3, 6, 9, 2];
2
var max = Math.max.apply(null, arr);
3
console.log(max); // 9
```

随机数Math.random()

Math.random()可以得到0~1之间的小数
为了得到[a, b]区间内的整数，可以使用这个公式：
```
1
parseInt(Math.random() * (b - a + 1)) + a
```

Date（日期）对象#

使用new Date()即可得到当前时间的日期对象，它是object类型值
使用new Date(2020, 11, 1)即可得到指定日期的日期对象，注意第二个参数表示月份，从0开始算，11表示12月
也可以是new Date(‘2026-06-16’)这样的写法

日期对象的常见的方法

方法	功能
getDate()	得到日期1~31
getDay()	得到星期0~6
getMonth()	得到月份0~11
getFullYear()	得到年份
getHours()	得到小时数0~23
getMinutes()	得到分钟数0~59
getSeconds()	得到秒数0~59

时间戳

时间戳表示1970年1月1日零点整距离某时刻的毫秒数
通过getTime()方法或者Date.parse()函数可以将日期对象变为时间戳
通过new Date(时间戳)的写法，可以将时间戳变为日期对象

小案例：倒计时小程序

在页面上实时显示距离2027年高考还有多少天、多少时、多少分、多少秒

1
<div>
2
  距离2027年高考还有：
3
  <span id="days">0</span> 天
4
  <span id="hours">0</span> 时
5
  <span id="minutes">0</span> 分
6
  <span id="seconds">0</span> 秒
7
</div>
8

9
<script>
10
  // 🎯 目标时间（2027高考）
11
  const targetDate = new Date("2027-06-07 00:00:00").getTime();
12

13
  function updateCountdown() {
14
    const now = new Date().getTime();
15
    const diff = targetDate - now;
16

17
    // 如果已经过了
18
    if (diff <= 0) {
19
      document.body.innerHTML = "⏰ 高考时间已到！";
20
      clearInterval(timer);
21
      return;
22
    }
23

24
    // 计算时间
25
    const seconds = Math.floor(diff / 1000);
26
    const days = Math.floor(seconds / (60 * 60 * 24));
27
    const hours = Math.floor((seconds % (60 * 60 * 24)) / (60 * 60));
28
    const minutes = Math.floor((seconds % (60 * 60)) / 60);
29
    const secs = seconds % 60;
30

31
    // 写入页面
32
    document.getElementById("days").textContent = days;
33
    document.getElementById("hours").textContent = hours;
34
    document.getElementById("minutes").textContent = minutes;
35
    document.getElementById("seconds").textContent = secs;
36
  }
37

38
  // 先执行一次（避免1秒空白）
39
  updateCountdown();
40

41
  // 每秒更新
42
  const timer = setInterval(updateCountdown, 1000);
43
</script>
44
<body>
45
  <h1>2027年高考倒计时</h1>
46
  <h2 id="info"></h2>
47
  <script>
48
    var info = document.getElementById('info');
49
    function updateCountdown() {
50
      // 现在的日期
51
      var nd = new Date();
52
      // 目标的日期，5表示六月
53
      var td = new Date(2027, 5, 7);
54

55
      // 毫秒差
56
      var diff = td - nd;
57

58
      // 任务很简单，就是把diff换算为天、小时、分钟、秒
59
      // 换算为多少天，除以一天的总毫秒数，不就是换算为多少天么
60
      var day = parseInt(diff / (1000 * 60 * 60 * 24));
61
      // 零多少小时呢？？差的总毫秒数与1天的毫秒数的相除的余数，就是零头的毫秒数
62
      var hours = parseInt((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
63
      // 零多少分钟呢？？
64
      var minutes = parseInt((diff % (1000 * 60 * 60)) / (1000 * 60));
65
      // 零多少秒呢？？
66
      var seconds = parseInt(
67
        ((diff % (1000 * 60 * 60)) % (1000 * 60)) / 1000,
68
      );
69
      info.innerText =
70
        day + '天' + hours + '时' + minutes + '分' + seconds + '秒';
71
    }
72
    updateCountdown(); //// 先执行一次（避免1秒空白）
73
    setInterval(updateCountdown, 1000);
74
  </script>
75
</body>

展开收起

JavaScript面向对象之类和实例

Tue, 20 Oct 2026 07:26:44 GMT

本文学习JavaScript的构造函数、类和实例、了解原型链和继承

构造函数#

什么是构造函数

用new调用一个函数，这个函数就被称为“构造函数”，任何函数都可以是构造函数，只需要用new调用它
顾名思义，构造函数用来“构造新对象”，它内部的语句将为新对象添加若干属性和方法，完成对象的初始化
构造函数必须用new关键字调用，否则不能正常工作，正因如此，开发者约定构造函数命名时首字母要大写

构造函数名称首字母约定大写

1
function People(name, age, sex) {
2
  this.name = name;
3
  this.age = age;
4
  this.sex = sex;
5
}
6
var xiaoming = new People('小明', 12, '男');
7
var xiaohong = new People('小红', 10, '女');
8
var xiaogang = new People('小刚', 13, '男');

一定要记住：一个函数是不是构造函数，要看它是否用new 调用，而至于名称首字母大写，完全是开发者的习惯约定

如果不用new调用构造函数

1
function People(name, age, sex) {
2
  this.name = name;
3
  this.age = age;
4
  this.sex = sex;
5
}
6
People('小明', 12, '男');
7
People('小红', 10, '女');
8
People('小刚', 13, '男');

这个时候会变成一个全局变量name，这个name的值为小刚

构造函数中的this不是函数本身

构造函数的this指向的是空对象，具体参考函数四步走

尝试为对象添加方法

1
function People(name, age, sex) {
2

3
  this.name = name;
4
  this.age = age;
5
  this.sex = sex;
6
  this.sayHello = function () {
7
    console.log('我是' + this.name + '，我' + this.age + '岁了');
8
  };
9
}
10
var xiaoming = new People('小明', 12, '男');
11
var xiaohong = new People('小红', 10, '女');
12
var xiaogang = new People('小刚', 13, '男');
13
xiaoming.sayHello(); //我是小明，我12岁了  规则1 this指向这个对象xiaoming
14
xiaohong.sayHello(); //我是小红，我10岁了
15
xiaogang.sayHello(); //我是小刚，我13岁了

展开收起

这种方式并不推荐：

每次 new People()，都会重新创建一个 sayHello 函数并挂到实例上，它们是不同的函数对象
浪费内存，建了 3 个对象，就有 3 份完全一样的函数
无法共享方法，方法本质应该是“行为”，不是“每个对象独有数据”。现在写法是：每个对象都“自带一份行为副本”

更推荐的方式：放到 prototype

1
function People(name, age, sex) {
2
  this.name = name;
3
  this.age = age;
4
  this.sex = sex;
5
}
6

7
People.prototype.sayHello = function () {
8
  console.log('我是' + this.name + '，我' + this.age + '岁了');
9
};

类和实例#

类好比是“蓝图”

如同“蓝图”一样，类只描述对象会拥有哪些属性和方法，但是并不具体指明属性的值

构造函数和“类”

可以把构造函数看作是类，把new出来看作是实例
Java、C++等是“面向对象”（object-oriented）语言
JavaScript是“基于对象”（object-based）语言
JavaScript中的构造函数可以类比于OOP语言中的“类”，写法的确类似，但和真正OO语言还是有本质不同，在后续课程还将看见JS和其他OO语言完全不同的、特有的原型特性

关于更多class。再后续ES6会有更多讲解。

prototype和原型链查找#

什么是prototype

任何函数都有prototype属性，prototype是英语“原型” 的意思

prototype属性值是个对象，它默认拥有constructor属性指回函数

1
函数  -》  函数.prototype
2
函数.prototype -> 函数

1
<body>
2
  <script>
3
    function sum(a, b) {
4
      return a + b;
5
    }
6
    console.log(sum.prototype);
7
    console.log(typeof sum.prototype);
8
    console.log(sum.prototype.constructor === sum);
9
  </script>
10
</body>

普通函数来说的prototype属性没有任何用处，而构造函数的prototype属性非常有用
构造函数的 prototype 对象，会成为“由它 new 出来的实例的原型对象”
实例没有 prototype 属性！！实例有的是 *proto*

构造函数的 prototype 是“未来实例共享方法的公共原型对象”

1
                ┌─────────────────────┐
2
                │   Function 构造器    │
3
                │   (Person函数本身)   │
4
                └─────────┬───────────┘
5
                          │ prototype
6
                          ↓
7
        ┌────────────────────────────────┐
8
        │      Person.prototype         │  ←── 公共方法区
9
        │   sayHello() 等共享方法       │
10
        └─────────┬──────────────────────┘
11
                  │ __proto__
12
                  ↓
13
        ┌────────────────────────────────┐
14
        │      Object.prototype         │  ←── JS顶层原型
15
        │  toString() / valueOf() 等    │
16
        └─────────┬──────────────────────┘
17
                  │ __proto__
18
                  ↓
19
               null（原型链终点）
20

21

22
────────────────────────────────────────────
23

24
                实例对象层
25

26
        ┌─────────────────────┐
27
        │   const p = new     │
28
        │   Person("小明")    │
29
        └─────────┬───────────┘
30
                  │ __proto__
31
                  ↓
32
        ┌────────────────────────────────┐
33
        │      Person.prototype         │
34
        └────────────────────────────────┘

展开收起

一张图解释：

img

1
function People(name, age, sex) {
2
  this.name = name;
3
  this.age = age;
4
  this.sex = sex;
5
}
6
var xiaoming = new People('小名', 12, '男');
7
//证明xiaoming的__proto__是People.prototype
8
console.log(xiaoming.__proto__ === People.prototype);//true

原型链的查找

JavaScript规定：实例可以打点访问它的原型的属性和方法，这被称为“原型链查找

当访问一个对象的属性/方法时，如果对象本身没有，就会沿着 __proto__ 一层一层往上找，直到找到或到 null 为止。

1
function People(name, age, sex) {
2
  this.name = name;
3
  this.age = age;
4
  this.sex = sex;
5
}
6
People.prototype.nationality = '中国';//在构造函数的prototype上添加nationality属性
7
var xiaoming = new People('小明', 12, '男');
8
console.log(xiaoming.nationality);//中国；实例可以打点访问原型的属性和方法

原型链会有遮蔽效应

1
function People(name, age, sex) {
2
  this.name = name;
3
  this.age = age;
4
  this.sex = sex;
5
}
6
People.prototype.nationality = '中国';
7
var xiaoming = new People('小明', 12, '男');
8
console.log(xiaoming.nationality);
9

10
var tom = new People('汤姆', 10, '男');
11
tom.nationality = '美国';
12
console.log(tom.nationality);//美国

hasOwnProperty

hasOwnProperty方法可以检查对象是否真正“自己拥有” 某属性或者方法

1
xiaoming.hasOwnProperty('name'); // true
2
xiaoming.hasOwnProperty('age'); // true
3
xiaoming.hasOwnProperty('sex'); // true
4
xiaoming.hasOwnProperty('nationality');// false

in运算符只能检查某个属性或方法是否可以被对象访问，不能检查是否是自己的属性或方法

1
'name' in xiaoming // true
2
'age' in xiaoming // true
3
'sex' in xiaoming // true
4
'nationality' in xiaoming // true

提前预习

prototype 是“公共区域”，但只有“挂在同一条原型链上的对象”才能访问这个公共区域

1
function A() {}
2
A.prototype.a = 10;
3
function B() {}
4
const b = new B();
5
console.log(b.a); // undefined

为什么是undefined，原型链是这样的：

1
b
2
 ↓ __proto__
3
B.prototype
4
 ↓ __proto__
5
Object.prototype
6
 ↓
7
null

注意：没有经过 A.prototype所以B 和 A 是两条“原型链分支”，默认互不相通

什么时候“可以访问到 A 的 a”？B 的原型链上包含 A.prototype，也是继承的相关

1
function A() {}
2
A.prototype.a = 10;
3
function B() {}
4
B.prototype = new A();  // 关键！！！b继承了A的原型链
5
const b = new B();
6
console.log(b.a); // 10

在prototype上添加方法#

这在构造函数章节有提到过：

1
function People(name, age, sex) {
2

3
  this.name = name;
4
  this.age = age;
5
  this.sex = sex;
6
  this.sayHello = function () {
7
    console.log('我是' + this.name + '，我' + this.age + '岁了');
8
  };
9
}
10
var xiaoming = new People('小明', 12, '男');
11
var xiaohong = new People('小红', 10, '女');
12
var xiaogang = new People('小刚', 13, '男');
13
xiaoming.sayHello(); //我是小明，我12岁了  规则1 this指向这个对象xiaoming
14
xiaohong.sayHello(); //我是小红，我10岁了
15
xiaogang.sayHello(); //我是小刚，我13岁了
16
console.log(xiaoming.sayHello === xiaohong.sayHello)//false

展开收起

把方法直接添加到实例身上的缺点：每个实例和每个实例的方法函数都是内存中不同的函数，造成了内存的浪费

解决办法：将方法写到prototype上

1
function People(name, age, sex) {
2
  this.name = name;
3
  this.age = age;
4
  this.sex = sex;
5
}
6

7
People.prototype.sayHello = function () {
8
  console.log('我是' + this.name + '，我' + this.age + '岁了');
9
};

原型链的终点#

原型链的终点是 null，null 表示“没有原型”，是整个原型链的终点。

验证一下

1
console.log(Object.prototype.__proto__); // null

先来看下这图：

img

1
var arr = [11, 22, 33];
2
console.log(arr.__proto__ === Array.prototype);//true
3
console.log(arr.__proto__.__proto__ === Object.prototype);//true

继承#

先来看个例子：

1
function People(name, age, sex) {
2
  this.name = name;
3
  this.age = age;
4
  this.sex = sex;
5
}
6

7
People.prototype.sayHello = function () {
8
  console.log('你好，我是' + this.name + '我今年' + this.age + '岁了');
9
};
10

11
People.prototype.sleep = function () {
12
  console.log(this.name + '开始睡觉zzzz');
13
};
14

15
function Student(name, age, sex, scholl, studionumber) {
16
  this.name = name;
17
  this.age = age;
18
  this.sex = sex;
19
  this.scholl = scholl;
20
  this.studionumber = studionumber;
21
}
22
Student.prototype.study = function () {
23
  console.log(this.name + '在学习');
24
};
25
Student.prototype.exam = function () {
26
  console.log(this.name + '在考试');
27
};
28

29
//关键语句实现继承,把People的原型链继承到Student上
30
Student.prototype = new People();
31
//constructor 是“告诉你这个对象是由哪个构造函数创建的标签”，使用上面的继承后console.log(s.constructor); // People这是错误的
32
Student.prototype.constructor = Student;
33
// 重写&复写 先继承后重写
34
Student.prototype.sayHello = function () {
35
  console.log('敬礼，我是' + this.name + '我今年' + this.age + '岁了');
36
};
37

38
var lilei = new Student('李雷', 22, '初中', 10010);
39
//调用People类的方法
40
lilei.sayHello();
41
lilei.sleep();
42
lilei.sayHello();

展开收起

People类和Student类的关系

People类拥有的属性和方法Student类都有，Student类还扩展了一些属性和方法
Student“是一种”People，两类之间是“isakind of”关系
实现继承的关键在于<子类必须拥有父类的全部属性和方法>，同时子类还应该能定义自己特有的属性和方法
使用JavaScript特有的原型链特性来实现继承，是普遍的做法
ES6有新的继承方法

JavaScript面向对象之上下文规则

Tue, 20 Oct 2026 06:56:47 GMT

本文主要学习面向对象中的上下文规则，以及怎么改变上下文

认识上下文#

函数的上下文

函数中可以使用this关键字，它表示函数的上下文
与中文中“这”类似，函数中的this具体指代什么必须通过调用函数时的“前言后语”来判断

函数中的this

1
var xiaoming = {
2
    nickname : '小明',
3
    age : 12,
4
    sayHello : function () {
5
        console.log('我是' + this.nickname + '，我' + this.age + '岁了');
6
    }
7
};
8
xiaoming.sayHello();//我是小明，我12岁了

函数被提出到外面执行：

1
var xiaoming = {
2
    nickname : '小明',
3
    age : 12,
4
    sayHello : function () {
5
        console.log('我是' + this.nickname + '，我' + this.age + '岁了');
6
    }
7
};
8
var sayHello = xiaoming.sayHello;//将函数“提”出来，单独存为变量
9
sayHello();//直接圆括号调用这个函数而不是对象打点调用了   我是undefined，我undefined岁了

同一个函数，用不同的形式调用它，则函数的上下文不同
情形1：对象打点调用函数，函数中的this指代这个打点的对象
```
1
xiaoming.sayHello();
```
情形2：圆括号直接调用函数，函数中的this指代window对象
```
1
var sayHello = xiaoming.sayHello;
2
sayHello();
```

函数的上下文由调用方式决定

1
var obj = {
2
    a: 1,
3
    b: 2,
4
    function () {
5
        console.log(this.a + this.b);//不知道，因为没有调用，函数只有被调用，它的上下文才能被确定
6
    }
7
};

例子1：

1
var obj = {
2
    a: 1,
3
    b: 2,
4
    fn: function () {
5
        console.log(this.a + this.b);
6
    }
7
};
8
obj.fn();//this指向obj

例子2：

1
var obj = {
2
    a: 1,
3
    b: 2,
4
    fn: function () {
5
        console.log(this.a + this.b);
6
    }
7
};
8
var fn = obj.fn;
9
fn();this指向window

上下文规则#

函数的上下文由调用函数的方式决定

函数的上下文（this关键字）由调用函数的方式决定， function是“运行时上下文”策略
函数如果不调用，则不能确定函数的上下文

规则1

规则1：对象打点调用它的方法函数，则函数的上下文是这个打点的对象

1
对象.方法()

1
function fn() {
2
  console.log(this.a + this.b);
3
}
4
var obj = {
5
  a: 66,
6
  b: 33,
7
  fn: fn,
8
};
9
obj.fn(); //99

1
var obj1 = {
2
  a: 1,
3
  b: 2,
4
  fn: function () {
5
    console.log(this.a + this.b);
6
  },
7
};
8
var obj2 = {
9
  a: 3,
10
  b: 4,
11
  fn: obj1.fn,
12
};
13
obj2.fn(); //7

1
function outer() {
2
  var a = 11;
3
  var b = 22;
4
  return {
5
    a: 33,
6
    b: 44,
7
    fn: function () {
8
      console.log(this.a + this.b);
9
    },
10
  };
11
}
12
outer().fn(); //77

1
function fun() {
2
  console.log(this.a + this.b);
3
}
4
var obj = {
5
  a: 1,
6
  b: 2,
7
  c: [
8
    {
9
      a: 3,
10
      b: 4,
11
      c: fun,
12
    },
13
  ],
14
};
15
var a = 5;
16
obj.c[0].c(); //7

展开收起

规则2

圆括号直接调用函数，则函数的上下文是window对象

1
函数()

1
var obj1 = {
2
  a: 1,
3
  b: 2,
4
  fn: function () {
5
    console.log(this.a + this.b);
6
  },
7
};
8
var a = 3;
9
var b = 4;
10
var fn = obj1.fn;
11
fn();//7

1
function fun() {
2
  return this.a + this.b;
3
}
4
var a = 1;
5
var b = 2;
6
var obj = {
7
  a: 3,
8
  b: fun(),//3
9
  fun: fun,//obj.fun === window.fun true
10
};
11
var result = obj.fun();//6，一个铁律：函数只有在调用的时候才能确定上下文  obj.a + obj.b 3+3
12
console.log(result);//6

规则3

数组（类数组对象）枚举出函数进行调用，上下文是这个数组（类数组对象）

1
数组[下标]()

1
var arr = [
2
  'A',
3
  'B',
4
  'C',
5
  function () {
6
    console.log(this[0]);
7
  },
8
];
9
arr[3]();'A'

类数组对象

什么是类数组对象：所有键名为自然数序列（从0开始），且有length属性的对象

arguments对象是最常见的类数组对象，它是函数的实参列表

1
function fun() {
2
  arguments[3]();
3
}
4
fun('A', 'B', 'C', function () {
5
  console.log(this[1]);
6
});//’B‘

规则4

IIFE中的函数，上下文是window对象

1
(function() {
2
})();

1
var a = 1;
2
var obj = {
3
  a: 2,
4
  fun: (function () {
5
    var a = this.a;//1  IIFE中的函数，上下文是window对象所以这里this指向全局a 即1
6
    return function () {
7
      console.log(a + this.a);//这里的this取决于调用，obj.fun()，所以this是obj，即a等于2 ，1+2=3
8
    };
9
  })(),
10
};
11
obj.fun();//3

规则5

定时器、延时器调用函数，上下文是window对象

1
setInterval(函数, 时间);
2
setTimeout(函数, 时间);

1
var obj = {
2
  a: 1,
3
  b: 2,
4
  fun: function () {
5
    console.log(this.a + this.b);
6
  },
7
};
8
var a = 3;
9
var b = 4;
10
setTimeout(obj.fun, 2000);//定时器、延时器调用函数，上下文是window对象，所以这里指向的不是obj，虽然是obj调用，但是是setTimeout里面调用所以是window对象，所以是7，注意这里obj.fun并没有执行，而是2秒后执行

1
var obj = {
2
  a: 1,
3
  b: 2,
4
  fun: function () {
5
    console.log(this.a + this.b);
6
  },
7
};
8
var a = 3;
9
var b = 4;
10
setTimeout(function () {
11
  obj.fun();//这里已经执行，函数这里指向obj，所以是3，2秒后也是3
12
}, 2000);

规则6

事件处理函数的上下文是绑定事件的DOM元素
```
1
DOM元素.onclick = function () {
2
};
```
请实现效果：点击哪个盒子，哪个盒子就变红，要求使用同一个事件处理函数实现

1
<style>
2
      .box {
3
        width: 100px;
4
        height: 100px;
5
        border: 1px solid #000;
6
        margin: 10px;
7
        display: inline-block;
8
      }
9
    </style>
10
  </head>
11
  <body>
12
    <div class="box"></div>
13
    <div class="box"></div>
14
    <div class="box"></div>
15
    <div class="box"></div>
16
    <script>
17
      var boxes = document.querySelectorAll('.box');
18

19
      for (var i = 0; i < boxes.length; i++) {
20
        boxes[i].onclick = changeColor;
21
      }
22

23
      function changeColor() {
24
        this.style.backgroundColor = 'red';
25
      }
26
    </script>
27
  </body>

展开收起

请实现效果：点击哪个盒子，哪个盒子在2000毫秒后就变红，要求使用同一个事件处理函数实现

1
var boxes = document.querySelectorAll('.box');
2

3
for (var i = 0; i < boxes.length; i++) {
4
  boxes[i].onclick = changeColor;
5
}
6

7
function changeColor() {
8
  var that = this; // 保存当前点击的盒子
9

10
  setTimeout(function () {
11
    that.style.backgroundColor = 'red';
12
  }, 2000);
13
}

call和apply#

call和apply能指定函数的上下文

先来看个例子：

1
function sum() {
2
  alert(this.chinese + this.math + this.english);
3
}
4
var xiaoming = {
5
  chinese: 80,
6
  math: 95,
7
  english: 93,
8
};
9
//想用xiaoming调用sum，就需要sum成为xiaomin的上下文也就是下面
10
var xiaoming = {
11
  chinese: 80,
12
  math: 95,
13
  english: 93,
14
  sum:sum
15
};

展开收起

但是现在有更简单的方式：

1
sum.call(xiaoming);
2
sum.apply(xiaoming);

就可以让sum的上下文成为xiaomin对象的上下文

1
function sum() {
2
  // alert(this.chinese + this.math + this.english);
3
  console.log(this.chinese + this.math + this.english);
4
}
5
var xiaoming = {
6
  chinese: 80,
7
  math: 95,
8
  english: 93,
9
};
10
sum.call(xiaoming);
11
sum.apply(xiaoming);

call和apply的区别

1
function sum(b1, b2) {
2
  alert(this.c + this.m + this.e + b1 + b2);
3
}
4
sum.call(xiaoming, 5, 3);//call要用逗号罗列参数
5
sum.apply(xiaoming, [5, 3]);//apply要把参数写到数组中

到底使用call还是apply？

1
function fun1() {
2
  fun2.apply(this, arguments);//arguments是类数组，所以只能使用apply
3
}
4
function fun2(a, b) {
5
  console.log(a + b);
6
}
7
fun1(33, 44);//77

上下文规则总结

规则	上下文
对象.函数()	对象
函数()	window
数组[ 下标 ] ()	数组
IIFE	window
定时器	window
DOM事件处理函数	绑定DOM的元素
call和apply	任意指定

JavaScript面向对象

Tue, 20 Oct 2026 06:39:22 GMT

本文主要学习Javascript的对象，对象的方法，如何遍历以及如何实现对象的深克隆

认识对象#

对象（object）是“键值对”的集合，表示属性和值的映射关系

1
//JS中，大括号表示对象
2
var xiaoming = {
3
name: '小明',//属性名（键名，key）；属性值（value）
4
age: 12,
5
sex: '男',
6
hobbies: ['足球','编程']
7
};

对象的语法

k和v之间用冒号分隔，每组k，最后一个 k

1
var obj = {
2
    k: v,
3
    k: v,
4
    k: v,
5
    k: v
6
};

属性是否加引号

如果对象的属性键名不符合JS标识符命名规范，则这个键名必须用引号包裹

1
var xiaoming = {
2
    name: '小明',
3
    age: 12,
4
    sex: '男',
5
    hobbys: ['足球','游泳','编程'],
6
   'favorite-book': '舒克和贝塔'//属性名中有短横，不符合JS标识符命名规范，属性名必须用引号包裹
7
};

属性的访问

可以用“点语法”访问对象中指定键的值

1
xiaoming.name; // '小明'
2
xiaoming.age; // 12
3
xiaoming.hobbys; // ['足球','游泳','编程']

如果属性名不符合JS标识符命名规范，则必须用方括号的写法来访问

1
xiaoming['favorite-book']; // '舒克和贝塔'；不符合标识符命名规范，就必须用方括号访问属性

如果属性名以变量形式存储，则必须使用方括号形式

1
var obj = {
2
    a: 1,
3
    b: 2,
4
    c: 3
5
};
6
var key = 'b';
7
console.log(obj.key);// undefined
8
console.log(obj[key]);// 2

解释一下：var key = ‘b’;其实这里很明显就是key就是b，obj[key]=obj[‘b’]；根据属性名不符合JS标识符命名规范，则必须用方括号的写法来访问，这里就是2，因为符合JS标识符命名规范，也可以用方括号的写法来访问

属性的更改

直接使用赋值运算符重新对某属性赋值即可更改属性

1
var obj = {
2
  a: 10
3
};
4
obj.a = 30;
5
obj.a++;

属性的创建

如果对象本身没有某个属性值，则用点语法赋值时，这个属性会被创建出来

1
var obj = {
2
    a: 10
3
};
4
obj.b = 40;

属性的删除

如果要删除某个对象的属性，需要使用delete操作符

1
var obj = {
2
    a: 1,
3
    b: 2
4
};
5
delete obj.a;

对象的方法#

如果某个属性值是函数，则它也被称为对象的“方法”

1
var xiaoming = {
2
    name: '小明',
3
    age: 12,
4
    sex: '男',
5
    hobbys: ['足球', '游泳', '编程'], 'favorite-book': '舒克和贝塔',
6
    sayHello: function () {
7
        console.log('你好，我是小明，今年12岁，我是个男生');
8
    }
9
};

方法的调用

使用“点语法”可以调用对象的方法

1
xiaoming.sayHello();

方法也是函数，只不过方法是对象的“函数属性”，它需要用对象打点调用

在正式学习了什么是“方法”之后，就能深入理解之前我们学习的一些函数的书写形式了，比如：

1
console.log();
2
Math.ceil();

对象的遍历#

和遍历数组类似，对象也可以被遍历，遍历对象需要使用 for…in…循环
使用for…in…循环可以遍历对象的每个键
在后续的ES6相关课程中，还会学习新的对象遍历的方式

for…in…循环

1
//var k：循环变量，它会依次成为对象的每一个键；obj：要遍历的对象
2
for (var k in obj) {
3
  console.log('属性' + k + '的值是' + obj[k]);
4
}

对象的深浅克隆#

对象是引用类型值

对象是引用类型值，这意味着：

不能用var obj2 = obj1这样的语法克隆一个对象

1
var obj3 = {
2
  a: 10,
3
};
4
//obj4指向obj3，完全一个东西
5
var obj4 = obj3;
6
obj3.a++;
7
console.log(obj4);

使用==或者===进行对象的比较时，比较的是它们是否为内存中的同一个对象，而不是比较值是否相同

1
var obj1 = {
2
  a: 1,
3
  b: 2,
4
  c: 3,
5
};
6
var obj2 = {
7
  a: 1,
8
  b: 2,
9
  c: 3,
10
};
11
console.log(obj1 == obj2); //false 不同内存
12
console.log(obj1 === obj2); //false

对象的浅克隆

复习什么是浅克隆：只克隆对象的“表层”，如果对象的某些属性值又是引用类型值，则不进一步克隆它们，只是传递它们的引用

使用for…in…循环即可实现对象的浅克隆

1
// 浅克隆
2
var obj1 = {
3
  a: 10,
4
  b: 2,
5
  c: [11, 22, 33],
6
};
7
// var obj2 = obj1; //不是克隆
8
var obj2 = {};
9
for (var k in obj1) {
10
  obj2[k] = obj1[k];
11
}
12
obj1.a++;
13
obj1.c.push(77); //obj2也会推入77，因为是浅克隆
14
console.log(obj1 === obj2);
15
console.log(obj1);
16
console.log(obj2);

展开收起

对象的深克隆

复习什么是深克隆：克隆对象的全貌，不论对象的属性值是否又是引用类型值，都能将它们实现克隆

和数组的深克隆类似，对象的深克隆需要使用递归

面试时经常会考察深克隆算法，必须掌握

1
// 深克隆
2
var obj1 = {
3
  a: 10,
4
  b: 2,
5
  c: [
6
    11,
7
    22,
8
    33,
9
    {
10
      m: 55,
11
      n: 66,
12
      p: [11, 33],
13
    },
14
  ],
15
};
16
function deepClone(obj) {
17
  if (Array.isArray(obj)) {
18
    //数组的处理方式
19
    var result = [];
20
    for (var i = 0; i < obj.length; i++) {
21
      result.push(deepClone(obj[i]));
22
    }
23
  } else if (typeof obj == 'object') {
24
    //对象
25
    var result = {};
26
    for (var k in obj) {
27
      result[k] = deepClone(obj[k]);
28
    }
29
  } else {
30
    var result = obj;
31
  }
32
  return result;
33
}
34
var obj2 = deepClone(obj1);
35

36
obj1.a++;
37
obj1.c.push(77); //obj2不会推入77，因为是深克隆
38
console.log(obj1 === obj2);
39
console.log(obj1);
40
console.log(obj2);

展开收起

JavaScript的定时器和延时器

Tue, 20 Oct 2026 06:00:23 GMT

定时器和延时器#

定时器

setInterval()函数可以重复调用一个函数，在每次调用之间具有固定的时间间隔

1
setInterval(function () {//第一个参数是函数
2
// 这个函数将自动被以固定间隔时间调用
3
}, 2000);//第二个参数是间隔时间，以毫秒为单位，1000毫秒是1秒

函数的参数

setInterval()函数可以接收第3、4……个参数，它们将按顺序传入函数

1
setInterval(function (a, b) {
2
  // 形式参数a的值是88，形式参数b的值是66
3
}, 2000, 88, 66);//从第三个参数开始，表示传入函数内的参数

具名函数也可以传入setInterval

具名函数也可以传入setInterval

1
var a = 0;
2
function fun() {
3
  console.log(++a);
4
}
5
setInterval(fun, 1000);//具名函数当做第一个参数，注意这里没有圆括号！

清除定时器

clearInterval()函数可以清除一个定时器

1
// 设置定时器，并且用timer变量接收这个定时器
2
var timer = setInterval(function () {
3
}, 2000);//用变量timer接收定时器
4
// 点击按钮时，清除定时器
5
oBtn.onclick = function () {
6
  clearInterval(timer);//清除定时器的时候，要传入定时器变量
7
}

延时器

setTimeout()函数可以设置一个延时器，当指定时间到了之后，会执行函数一次，不再重复执行。
```
1
setTimeout(function () {
2
// 这个函数会在2秒后执行一次
3
}, 2000);
```

清除延时器

clearTimeout()函数可以清除延时器，和clearInterval() 非常类似

初步认识异步语句

setInterval()和setTimeout()是两个异步语句
异步（asynchronous）：不会阻塞CPU继续执行其他语句，当异步完成时，会执行“回调函数”（callback）

使用定时器实现动画#

动画是网页上非常常见的业务需求

使用定时器可以实现动画，利用的就是“视觉暂留”原理

1
<body>
2
    <button id="btn">点击移动</button>
3
    <div id="box"></div>
4
    <script>
5
        var box = document.getElementById("box");
6
        var btn = document.getElementById("btn");
7
        var left = 100;
8
        // 点击按钮,移动盒子
9
        btn.onclick = function () {
10
            setInterval(function () {
11
                left += 10;
12
                if(left >= 1000){
13
                    clearInterval(timer);
14
                }
15
                box.style.left = left+"px";
16
            }, 20);
17

18
        }
19
    </script>
20
</body>

展开收起

使用定时器实现动画较为不便：不方便根据动画总时间计算步长；运动方向要设置正负；多种运动进行叠加较为困难（比如一个方形一边移动一边变为圆形）

JavaScript的DOM之事件

Tue, 20 Oct 2026 05:46:32 GMT

本章主要学习DOM里面的事件，包括事件监听、传播、对象和委托

事件监听#

什么是“事件监听”

DOM允许我们书写JavaScript代码以让HTML元素对事件作出反应
什么是“事件”：用户与网页的交互动作
“监听”，顾名思义，就是让计算机随时能够发现这个事件发生了，从而执行程序员预先编写的一些程序
设置事件监听的方法主要有onxxx和addEventListener() 两种，二者的区别将在“事件传播”一课中介绍

最简单的设置事件监听的方法

最简单的给元素设置事件监听的方法就是设置它们的onxxx 属性，像这样：

1
oBox.onclick = function () {
2
  // 点击盒子时，将执行这里的语句
3
}

常见的鼠标事件监听

事件名	事件描述
onclick	当鼠标单击某个对象
ondblclick	当鼠标双击某个对象
onmousedown	当某个鼠标按键在某个对象上被按下
onmouseup	当某个鼠标按键在某个对象上被松开
onmousemove	当某个鼠标按键在某个对象上被移动
onmouseenter	当鼠标进入某个对象（相似事件onmouseover）
onmouseleave	当鼠标离开某个对象（相似事件onmouseout）

常见的键盘事件监听

事件名	事件描述
onkeypress	当某个键盘的键被按下（系统按钮如箭头键和功能键无法得到识别）
onkeydown	当某个键盘的键被按下（系统按钮可以识别，并且会先于onkeypress发生）
onkeyup	当某个键盘的键被松开

常见的表单事件监听

事件名	事件描述
onchange	当用户改变域的内容
onfocus	当某元素获得焦点（比如tab键或鼠标点击）
onblur	当某元素失去焦点
onsubmit	当表单被提交
onreset	当表单被重置

常见的页面事件监听

事件名	事件描述
onload	当页面或图像被完成加载
onunload	当用户退出页面

事件传播#

思考一个问题

如果一个div里面嵌套div，这个div里边又嵌套div，当点击div的时候，点击的是哪个div呢

研究：当盒子嵌套时事件监听的执行顺序

监听box1的 onclick事件；监听box2的 onclick事件；监听了box3的 onclick事件

1
<style>
2
    #box1{
3
        width: 202px;
4
        height: 202px;
5
        padding: 50px;
6
       border: 1px solid red;
7
    }
8
    #box2{
9
        width: 100px;
10
        height: 100px;
11
        padding: 50px;
12
       border: 1px solid red;
13
    }
14
    #box3{
15
        width: 100px;
16
        height: 100px;
17
        border: 1px solid red;
18
    }
19
</style>
20
<body>
21
    <div id="box1">
22
        <div id="box2">
23
            <div id="box3"></div>
24
        </div>
25
    </div>
26
    <script>
27
        var box1 = document.getElementById("box1");
28
        var box2 = document.getElementById("box2");
29
        var box3 = document.getElementById("box3");
30
        box1.onclick = function () {
31
            console.log("点击了box1");
32
        }
33
        box2.onclick = function () {
34
            console.log("点击了box2");
35
        }
36
        box3.onclick = function () {
37
            console.log("点击了box3");
38
        }
39
        box1.addEventListener("click",function () {
40
            console.log("点击了box1");
41
        },true)
42
        box2.addEventListener("click",function () {
43
            console.log("点击了box2");
44
        },true)
45
        box3.addEventListener("click",function () {
46
            console.log("点击了box3");
47
        },true)
48
    </script>
49
</body>

展开收起

输出：点击了box3；点击了box2；点击了box1
通过测试：感觉事件的传播是从内到外的（不成熟）
实际上，事件的传播是：先从外到内，然后再从内到外
从外到内叫捕获阶段；从内到外叫冒泡阶段

onxxx写法只能监听冒泡阶段

onxxx这样的写法只能监听冒泡阶段（这样也证明了刚才为什么只监听到冒泡阶段）

addEventListener()方法（监听捕获阶段）

DOM0级事件监听：只能监听冒泡阶段

DOM2级事件监听

1
//click；事件名不加on
2
oBox.addEventListener('click', function () {
3
// 这是事件处理函数
4
}, true);//true监听捕获阶段，false监听冒泡阶段

注意事项

最内部元素不再区分捕获和冒泡阶段，会先执行写在前面的监听，然后执行后写的监听
如果给元素设置相同的两个或多个同名事件，则DOM0级写法后面写的会覆盖先写的；而DOM2级会按顺序执行

事件对象#

什么是事件对象

事件处理函数提供一个形式参数，它是一个对象，封装了本次事件的细节

这个参数通常用单词event或字母e来表示

1
oBox.onmousemove = function (e) {
2
// 对象e就是这次事件的“事件对象”
3
};

鼠标位置

属性	属性描述
clientX	鼠标指针相对于浏览器的水平坐标
clientY	鼠标指针相对于浏览器的垂直坐标
pageX	鼠标指针相对于整张网页的水平坐标
pageY	鼠标指针相对于整张网页的垂直坐标
offsetX	鼠标指针相对于事件源元素的水平坐标
offsetY	鼠标指针相对于事件源元素的垂直坐标

1
<style>
2
        body{
3
            height: 1000px;
4
        }
5
        #app{
6
            width: 200px;
7
            height: 200px;
8
            background-color: pink;
9
        }
10
        #info{
11
            font-size: 30px;
12
        }
13
    </style>
14
</head>
15
<body>
16
    <div id="app"></div>
17
    <div id="info"></div>
18
    <script>
19
        var info = document.getElementById("info");
20
        //事件对象
21
        document.getElementById("app").onmousemove = function (e) {
22
            //获取鼠标移动到的位置
23
            info.innerHTML = "x相对于浏览器窗口:" + e.clientX + " y相对于浏览器窗口:" + e.clientY+"<br>";
24
            info.innerHTML += "x相对于元素:" + e.offsetX + " y相对于元素:" + e.offsetY+"<br>";
25
            info.innerHTML += "x相对于文档:" + e.pageX + " y相对于文档:" + e.pageY;
26
        }
27
    </script>
28
</body>

展开收起

e.charCode和e.keyCode属性

e.charCode属性通常用于onkeypress事件中，表示用户输入的字符的“字符码”
e.keyCode属性通常用于onkeydown事件和onkeyup中，表示用户按下的按键的“键码”

charCode字符码

字符	字符码
数字0 ~ 数字9	48 ~ 57
大写字母A ~ Z	65 ~ 90
小写字母a ~ z	97 ~ 122

keyCode键码

按键	键码
数字0 ~ 数字9	48 ~ 57（同charCode键码完全相同）
字母不分大小a ~ z	65 ~ 90（同charCode键码的大写字母A ~ Z，而 keyCode不分大小写，一律为65 ~ 90）
四个方向键← ↑ → ↓	37、38、39、40
回车键	13
空格键	32

1
<body>
2
    <input type="text" name="" id="field">
3
    <h1 id="info"></h1>
4
    <input type="text" name="" id="field1">
5
    <h1 id="info1"></h1>
6
    <script>
7
        var field = document.getElementById("field");
8
        var info = document.getElementById("info");
9
        var field1 = document.getElementById("field1");
10
        var info1 = document.getElementById("info1");
11
        //事件对象
12
        field.onkeydown = function (e) {
13
            info.innerHTML += "keyCode:" + e.keyCode;
14
        }
15
        field1.onkeypress = function (e) {
16
            info1.innerHTML += "charCode:" + e.charCode;
17
        }
18
    </script>
19
</body>

展开收起

小案例

制作一个特效：按方向键可以控制页面上的盒子移动

1
<style>
2
        #box{
3
            position: absolute;
4
            width: 100px;
5
            height: 100px;
6
            top: 200px;
7
            left: 200px;
8
            background-color: pink;
9
        }
10
    </style>
11
</head>
12
<body>
13
    <div id="box"></div>
14
    <script>
15
        var box = document.getElementById("box");
16
        var t = 200;
17
        var l = 200;
18
        document.onkeydown = function (e) {
19
            switch (e.keyCode) {
20
                case 38:
21
                    t -= 10;
22
                    break;
23
                case 40:
24
                    t += 10;
25
                    break;
26
                case 37:
27
                    l -= 10;
28
                    break;
29
                case 39:
30
                    l += 10;
31
                    break;
32
            }
33
            box.style.left = l + "px";
34
            box.style.top = t + "px";
35
        }
36
    </script>
37
</body>

展开收起

e.preventDefault()方法

e.preventDefault()方法用来阻止事件产生的“默认动作”
一些特殊的业务需求，需要阻止事件的“默认动作”

小案例1

制作一个文本框，只能让用户在其中输入小写字母和数字，其他字符输入没有效果

1
<body>
2
    <input type="text" id="inp">
3
    <script>
4
        var inp = document.getElementById("inp");
5
        inp.onkeypress = function (e) {
6
            console.log(e.charCode);
7
            // 限制只能输入数字和字母
8
            // 48-57 0-9
9
            // 97-122 a-z
10
            if(!(e.charCode >= 48 && e.charCode <= 57||e.charCode >= 97 && e.charCode <= 122)){
11
                e.preventDefault();
12
            }
13
        }
14
    </script>
15
</body>

展开收起

小案例2

制作鼠标滚轮事件：当鼠标在盒子中向下滚动时，数字加1；反之，数字减1

鼠标滚轮事件是onmousewheel，它的事件对象e提供deltaY 属性表示鼠标滚动方向，向下滚动时返回正值，向上滚动时返回负值

1
<style>
2
        #box{
3
            width: 500px;
4
            height: 500px;
5
            background-color: pink;
6
        }
7
        body{
8
           height: 1000px;
9
        }
10
    </style>
11
</head>
12
<body>
13
    <div id="box"></div>
14
    <h1 id="num">0</h1>
15
    <script>
16
        //制作鼠标滚轮事件：当鼠标在盒子中向下滚动时，数字加1； 反之，数字减1
17
        var box = document.getElementById("box");
18
        var num = document.getElementById("num");
19
        var a = 0;
20
        box.onmousewheel = function (e) {
21
            console.log(e.deltaY);
22
            // 阻止默认事件,当在盒子里面滚动的时候不会引发页面的滚动
23
            e.preventDefault();
24
            if(e.deltaY > 0){
25
               a--;
26
            }else{
27
                a++;
28
            }
29
            num.innerText = a;
30
        }
31

32
    </script>
33
</body>

展开收起

e. stopPropagation()方法

e.stopPropagation()方法用来阻止事件继续传播
在一些场合，非常有必要切断事件继续传播，否则会造成页面特效显示出bug

小案例：

制作一个弹出层：点击按钮显示弹出层，点击网页任意地方，弹出层关闭

1
<style>
2
        #menu{
3
            width: 400px;
4
            height: 140px;
5
            background-color: pink;
6
            position: absolute;
7
            top:50%;
8
            left:50%;
9
            transform: translate(-50%,-50%);
10
            margin: 0 auto;
11
            display: none;
12
        }
13
    </style>
14
</head>
15
<body>
16
    <button id="btn">点击弹出菜单</button>
17
    <div id="menu"></div>
18
    <script>
19
        var btn = document.getElementById("btn");
20
        var menu = document.getElementById("menu");
21
        // 点击按钮弹出菜单
22
        btn.onclick = function (e) {
23
            // 阻止事件冒泡，如果不阻止事件冒泡，点击按钮会触发点击其他地方隐藏菜单的事件，导致菜单显示后立即隐藏
24
            e.stopPropagation();
25
            menu.style.display = "block";
26
        }
27
        // 点击其他地方隐藏菜单
28
        document.onclick = function (e) {
29
            menu.style.display = "none";
30
        }
31
        // 点击菜单不隐藏菜单
32
        menu.onclick = function (e) {
33
            e.stopPropagation();
34
        }
35
    </script>
36
</body>

展开收起

事件委托#

批量添加事件监听

题目：页面上有一个无序列表ul，它内部共有20个li元素，请批量给它们添加点击事件监听，实现效果：点击哪个li元素，哪个li元素就变红

1
<body>
2
    <ul id="list">
3
    </ul>
4
    <script>
5
        var list = document.getElementById("list");
6
        //创建20个li元素
7
        for(var i=0;i<20;i++){
8
            var li = document.createElement("li");
9
            li.style.cursor = "pointer";//小手指针
10
            li.innerHTML = "列表项"+i;
11
            list.appendChild(li);
12
        }
13
       var lis = list.getElementsByTagName("li");
14
       // 给每个li添加点击事件监听
15
       //再次点击列表项，背景颜色变回白色
16
       for(var i=0;i<lis.length;i++){
17
        lis[i].onclick = function () {
18

19
            if(this.style.backgroundColor == "red"){
20
                this.style.backgroundColor = "white";
21
            }else{
22
                this.style.backgroundColor = "red";
23
            }
24
        }
25
       }
26
    </script>
27
</body>

展开收起

批量添加事件监听的性能问题

每一个事件监听注册都会消耗一定的系统内存，而批量添加事件会导致监听数量太多，内存消耗会非常大
实际上，每个li的事件处理函数都是不同的函数，这些函数本身也会占用内存

新增元素动态绑定事件

题目：页面上有一个无序列表ul，它内部没有li元素，请制作一个按钮，点击这个按钮就能增加一个li元素。并且要求每个增加的li元素也要有点击事件监听，实现效果点击哪个li元素，哪个li元素就变红

1
<body>
2
    <button>点击添加li项</button>
3
    <ul id="list"></ul>
4
    <script>
5
        var btn = document.querySelector("button");
6
        var list = document.getElementById("list");
7
        btn.onclick = function () {
8
            var li = document.createElement("li");
9
            li.innerHTML = "列表项"+list.children.length;
10
            list.appendChild(li);
11
            // 给li添加点击事件监听 性能问题
12
            li.onclick = function () {
13
                this.style.backgroundColor = "red";
14
            }
15
        }
16
    </script>
17
</body>

展开收起

动态绑定事件的问题

新增元素必须分别添加事件监听，不能自动获得事件监听
大量事件监听、大量事件处理函数都会产生大量消耗内存

什么是事件委托

利用事件冒泡机制，将后代元素事件委托给祖先元素

e.target和e.currentTarget属性

事件委托通常需要结合使用e.target属性

属性	属性描述
`target`	实际触发事件的元素，即事件源元素
`currentTarget`	当前正在执行事件处理程序的元素，即绑定该事件处理程序的元素

1
<body>
2
    <button>点击添加li项</button>
3
    <ul id="list"></ul>
4
    <script>
5
        var btn = document.querySelector("button");
6
        var list = document.getElementById("list");
7
        // 点击按钮,添加li项
8
        btn.onclick = function () {
9
            var li = document.createElement("li");
10
            li.innerHTML = "列表项"+list.children.length;
11
            list.appendChild(li);
12
            // 给li添加点击事件监听 性能问题
13
            // li.onclick = function () {
14
            //     this.style.backgroundColor = "red";
15
            // }
16

17
        }
18
        // 事件委托,给ul添加点击事件监听,点击li项,背景颜色变红
19
        list.onclick = function (e) {
20
            ////只有点击了li项,才变红
21
        if(e.target.tagName === "LI"){
22
            e.target.style.backgroundColor = "red";
23
        }
24
    };
25
    </script>
26
</body>

展开收起

事件委托的使用场景

当有大量类似元素需要批量添加事件监听时，使用事件委托可以减少内存开销
当有动态元素节点上树时，使用事件委托可以让新上树的元素具有事件监听

使用事件委托时需要注意的事项

onmouseenter和onmouseover都表示“鼠标进入”，它们有什么区别呢？

onmouseenter不冒泡，onmouseover冒泡。
使用事件委托时要注意：不能委托不冒泡的事件给祖先元素

最内层元素不能再有额外的内层元素了，比如：

1
<ul id="list">
2
<li><span>我是span</span>列表项</li>
3
<li><span>我是span</span>列表项</li>
4
<li><span>我是span</span>列表项</li>
5
</ul>

JavaScript的DOM之节点

Tue, 20 Oct 2026 01:46:10 GMT

关于JavaScript的DOM，其实vue和react这类框架已经帮我们解决了，学习本章的意义也是了解其原理，在一般开发中，很少直接操作dom，也不建议直接操作dmo

DOM基本概念#

DOM是JS操控HTML和CSS的桥梁
DOM使JS操作HTML变得优雅

DOM简介

DOM（Document Object Model，文档对象模型）是 JavaScript操作HTML文档的接口，使文档操作变得非常优雅、简便
DOM最大的特点就是将文档表示为节点树

DOM节点树

1
<!DOCTYPE html>
2
<html>
3
    <head>
4
        <meta charset="UTF-8">
5
        <title>Document</title>
6
    </head>
7
    <body>
8
        <h1>慕课网</h1>
9
        <div>
10
            <h2>程序员的梦工厂</h2>
11
            <img src="logo.png">
12
            <div class="box">
13
                慕课专栏
14
            </div>
15
        </div>
16
    </body>
17
</html>

展开收起

NodeType#

节点的nodeType属性可以显示这个节点具体的类型

`nodeType` 值	节点类型
`1`	元素节点，例如 `p` 和 `div`
`3`	文本节点
`8`	注释节点
`9`	Document 文档节点
`10`	DocumentType 文档类型节点（DTD）

访问元素节点

所谓“访问”元素节点，就是指“得到”、“获取”页面上的元素节点
对节点进行操作，第一步就是要得到它
访问元素节点主要依靠document对象

Document#

document对象是DOM中最重要的东西，几乎所有DOM的功能都封装在了document对象中
document对象也表示整个HTML文档，它是DOM节点树的根
document对象的nodeType属性值是9

访问元素节点的常用方法

方法	功能	兼容性
`document.getElementById()`	通过 ID 获取元素	IE6+
`document.getElementsByTagName()`	通过标签名获取元素集合	IE6+
`document.getElementsByClassName()`	通过类名获取元素集合	IE9+
`document.querySelector()`	通过 CSS 选择器获取第一个匹配的元素	IE8 部分兼容，IE9+ 完全兼容
`document.querySelectorAll()`	通过 CSS 选择器获取所有匹配的元素集合	IE8 部分兼容，IE9+ 完全兼容

获取节点#

getElementById()#

document.getElementById()功能是通过id得到元素节点

1
<div id="box">我是一个盒子</div>
2
<p id="para">我是一个段落</p>
3
<script>
4
var box = document.getElementById('box');
5
var para = document.getElementById('para');
6
</script>

注意事项

如果页面上有相同id的元素，则只能得到第一个
不管元素藏的位置有多深，都能通过id把它找到

getElementsByTagName()#

getElementsByTagName()方法的功能是通过标签名得到节点数组

1
<p>我是段落</p>
2
<p>我是段落</p>
3
<p>我是段落</p>
4
<p>我是段落</p>
5
<script>
6
var ps = document.getElementsByTagName('p');//数组
7
</script>

注意事项

数组方便遍历，从而可以批量操控元素节点
即使页面上只有一个指定标签名的节点，也将得到长度为1 的数组
任何一个节点元素也可以调用getElementsByTagName() 方法，从而得到其内部的某种类的元素节点

getElementsByClassName()#

getElementsByClassName()方法的功能是通过类名得到节点数组

1
<div class="spec">我是盒子</div>
2
<div>我是盒子</div>
3
<div class="spec">我是盒子</div>
4
<div class="spec">我是盒子</div>
5
<script>
6
var spec_divs = document.getElementsByClassName('spec');
7
</script>

注意事项

getElementsByClassName()方法从IE9开始兼容
某个节点元素也可以调用getElementsByClassName()方法，从而得到其内部的某类名的元素节点

querySelector()#

querySelector()方法的功能是通过选择器得到元素

1
<div id="box1">
2
<p>我是段落</p>
3
<p class="spec">我是段落</p>
4
<p>我是段落</p>
5
</div>
6
<script>
7
var the_p = document.querySelector('#box1 .spec');
8
</script>

注意事项

querySelector()方法只能得到页面上一个元素，如果有多个元素符合条件，则只能得到第一个元素
querySelector()方法从IE8开始兼容，但从IE9开始支持 CSS3的选择器，如()、:[src^= ‘dog’]等CSS3选择器形式都支持良好

querySelectorAll()#

querySelectorAll()方法的功能是通过选择器得到元素数组
即使页面上只有一个符合选择器的节点，也将得到长度为1 的数组

节点的关系#

关系	考虑所有节点
子节点	childNodes
父节点	parentNode
第一个子节点	firstChild
最后一个子节点	lastChild
前一个兄弟节点	previousSibling
后一个兄弟节点	nextSibling

注意：文本节点也属于节点

DOM中，文本节点也属于节点，在使用节点的关系时一定要注意
在标准的W3C规范中，空白文本节点也应该算作节点，但是在IE8及以前的浏览器中会有一定的兼容问题，它们不把空文本节点当做节点

排除文本节点的干扰

从IE9开始支持一些“只考虑元素节点”的属性

关系	考虑所有节点	只考虑元素节点
子节点	`childNodes`	`children`
父节点	`parentNode`	`parentElement`
第一个子节点	`firstChild`	`firstElementChild`
最后一个子节点	`lastChild`	`lastElementChild`
前一个兄弟节点	`previousSibling`	`previousElementSibling`
后一个兄弟节点	`nextSibling`	`nextElementSibling`

封装节点关系函数#

书写常见的节点关系函数

书写IE6也能兼容的“寻找所有元素子节点”函数
书写IE6也能兼容的“寻找前一个元素兄弟节点”函数

如何编写函数，获得某元素的所有的兄弟节点？

1
<body>
2
    <div id="box">
3
        <p>我是段落A</p>
4
        <p id="para">我是段落B</p>
5
         <p>我是段落C</p>
6
    </div>
7
    <script>
8
        var box = document.getElementById("box");
9
        var para = document.getElementById("para");
10

11
        function getChildren(node) {
12
            var children = [];//结果数组
13
            //遍历node的所有子元素
14
            for (var i = 0; i < node.childNodes.length; i++) {
15
                //判断是否是元素节点
16
                if (node.childNodes[i].nodeType === 1) {
17
                    children.push(node.childNodes[i]);
18
                }
19
            }
20
            return children;
21
        }
22
        console.log(getChildren(box));
23
        console.log(getChildren(para));
24

25
        function getElementPrevSibling(node) {
26
        var o = node;
27
           while(o.previousSibling != null){
28
            if(o.previousSibling.nodeType === 1){
29
               return o.previousSibling;
30
            }
31
            o = o.previousSibling;
32
           }
33
        }
34
        console.log(getElementPrevSibling(para));
35

36
        function getAllElementSibling(node) {
37
            var prevs = [];
38
            var nexts = [];
39
            var o = node;
40
            while (o.previousSibling != null) {
41
                if (o.previousSibling.nodeType === 1) {
42
                    prevs.unshift(o.previousSibling);
43
                }
44
                o = o.previousSibling;
45
            }
46
             o = node;
47
            while (o.nextElementSibling != null) {
48
                if (o.nextElementSibling.nodeType === 1) {
49
                    nexts.push(o.nextElementSibling);
50
                }
51
                o = o.nextElementSibling;
52
            }
53
            return prevs.concat(nexts);
54
        }
55
        console.log(getAllElementSibling(para));
56
    </script>
57
</body>

展开收起

哪些情况需要封装？

场景	是否需要封装
获取父元素	不需要
获取子元素	不需要
获取兄弟元素	不需要
获取第一个或最后一个子元素	不需要
查找符合条件的祖先元素	不需要
实现复杂的节点查找逻辑	可以封装
多处重复相同的 DOM 操作	可以封装
兼容 IE 等旧浏览器	视需求而定

节点操作#

如何改变元素节点的CSS样式

改变元素节点的CSS样式需要使用这样的语句

1
oBox.style.backgroundColor ='red';//CSS属性要写成“驼峰”形式
2
oBox.style.backgroundImage ='url(images/1.jpg)';//CSS属性值要设置成完整形式
3
oBox.style.fontSize ='32px';//注意写单位

如何改变元素节点的HTML属性

标准W3C属性，如src、href等等，只需要直接打点进行更改即可
```
1
oImg.src = 'images/2.jpg';
```
不符合W3C标准的属性，要使用setAttribute()和getAttribute() 来设置、读取
```
1
oBox.setAttribute('data-n', 10);
2
var n = oBox.getAttribute('data-n');
3
alert(n);
```

innerHTML&innerText#

如何改变元素节点中的内容

改变元素节点中的内容可以使用两个相关属性：①innerHTML ② innerText
innerHTML属性能以HTML语法设置节点中的内容
innerText属性只能以纯文本的形式设置节点中的内容

节点的创建、移除和克隆#

节点的创建

document.createElement() 方法用于创建一个指定tag name的HTML元素
```
1
var oDiv = document.createElement('div');
```

孤儿节点

新创建出的节点是“孤儿节点”，这意味着它并没有被挂载到DOM树上，我们无法看见它
必须继续使用appendChild()或insertBefore()方法将孤儿节点插入到DOM树上

appendChild()

追加节点
任何已经在DOM树上的节点，都可以调用appendChild() 方法，它可以将孤儿节点挂载到它的内部，成为它的最后一个子节点
```
1
父节点.appendChild(孤儿节点);
```

insertBefore()

任何已经在DOM树上的节点，都可以调用insertBefore() 方法，它可以将孤儿节点挂载到它的内部，成为它的“标杆子节点”之前的节点
```
1
父节点.insertBefore(孤儿节点, 标杆节点);
```

示例：

请动态创建出一个20行12列的表格

1
function createTable() {
2
    var table = document.createElement("table");
3
    for (var i = 0; i < 20; i++) {
4
        var row = document.createElement("tr");
5
        for (var j = 0; j < 12; j++) {
6
            var cell = document.createElement("td");
7
            cell.innerHTML = i + "-" + j;
8
            row.appendChild(cell);
9
        }
10
        table.appendChild(row);
11
    }
12
    document.body.appendChild(table);
13
}
14
createTable();

请制作九九乘法表（可以在刚才代码基础上改动升级）

1
//制作九九乘法表
2
function createTable1() {
3
    var table = document.createElement("table");
4
    for (var i = 1; i <= 9; i++) {
5
        var row = document.createElement("tr");
6
        for (var j = 1; j <= i; j++) {
7
            var cell = document.createElement("td");
8
            cell.innerHTML = i + "x" + j + "=" + i * j;
9
            row.appendChild(cell);
10
        }
11
        table.appendChild(row);
12
    }
13
    document.body.appendChild(table);
14
}
15
createTable1();

展开收起

移动节点

如果将已经挂载到DOM树上的节点成为appendChild()或者 insertBefore()的参数，这个节点将会被移动

1
新父节点.appendChild(已经有父亲的节点);
2
新父节点.insertBefore(已经有父亲的节点, 标杆子节点);

这意味着一个节点不能同时位于DOM树的两个位置

删除节点

removeChild() 方法从DOM中删除一个子节点
```
1
父节点.removeChild(要删除子节点);
```
节点不能主动删除自己，必须由父节点删除它

克隆节点

cloneNode() 方法可以克隆节点，克隆出的节点是“孤儿节点

1
var 孤儿节点 = 老节点.cloneNode();
2
var 孤儿节点 = 老节点.cloneNode(true);

参数是一个布尔值，表示是否采用深度克隆：如果为true，则该节点的所有后代节点也都会被克隆，如果为false，则只克隆该节点本身

拓展-延迟执行#

在测试DOM代码时，通常JS代码一定要写到HTML节点的后面，否则JS无法找到相应HTML节点
可以使用window.onload = function(){} 事件，使页面加载完毕后，再执行指定的代码

JavaScript函数

Mon, 19 Oct 2026 23:45:16 GMT

本章主要学习JavaScript的函数相关知识，包括递归和闭包，关于递归，其作用最主要就是实现深克隆，但现在structuredClone()可以实现，虽然有些情况不能使用，但是基本满足大多数情况了，这里学习递归是巩固基础知识，关于闭包，其作用最主要就是实现私有变量，现代开发中也有可以代替，#号关键词，但是其作用是在class，总之，这两个属于基础，有学习的必要，但是深入了解对现代开发意义不是很大

什么是函数#

先从一个问题说起：假如我们要分别计算1到10、5到12、14到35的整数和，不用函数的情况下代码是这样的：

1
for (var i = 1, sum = 0; i <= 10; i++) {
2
sum += i;
3
}
4
console.log(sum);
5
for (var i = 5, sum = 0; i <= 12; i++) {
6
sum += i;
7
}
8
console.log(sum);

这些代码高度重复，只是变量不同，使用函数就可以解决这个问题；函数可以理解为：一个神奇的机器，送入机器两个数字，它将产生两个数字之间所有整数的和。

总结：

函数就是语句的封装，可以让这些代码方便地被复用
函数具有“一次定义，多次调用”的优点
使用函数，可以简化问题，让代码更具有可读性

函数的定义和调用#

这里的函数声明提升，是JavaScript的机制，但是在现代开发中应该避免这种写法，很容易引发bug

函数的定义

和变量类似，函数必须先定义然后才能使用，函数定义有两种，分别是使用function关键字定义和函数表达式匿名函数

1
//使用function关键字定义函数
2
function fun() {
3
  // 函数体语句
4
}
5

6
//函数表达式匿名函数
7
var fun = function () {
8
    // 函数体语句
9
}

函数的调用

执行函数体中的所有语句，就称为“调用函数”；调用函数非常简单，只需在函数名字后书写圆括号对即可

1
fun() // 调用函数；圆括号中是实参列表，如果没有实参，也要书写圆括号

语句执行顺序

函数不调用，内部语句就不会执行
函数调用后，函数体内所有语句执行完毕，将语句执行权交还给主程序

函数声明的提升

和变量声明提升类似，函数声明也可以被提升，这里需要注意，函数内部的变量也会提升，在函数内部提升

1
fun();
2
function fun() {
3
  alert("函数被执行");
4
}//在预解析阶段会被提升

函数表达式不能提升

1
fun(); // 引发错误
2
var fun = function () {
3
  alert("函数被执行");
4
}

这个var fun会被当做一个变量提升，但是提升的是变量，不是提升函数，所以会引发错误

函数优先提升

这是一种比较极端的现象，表达式函数和普通函数同时存在一个相同的函数名，结论是：第一次弹出 B，第二次弹出 A。函数声明先准备好，代码再从上往下执行；函数表达式的赋值要等执行到那一行才生效。因此，第一次调用得到 B，赋值之后第二次调用得到 A。

1
//函数优先提升
2
//变量声明提升，无法覆盖提升的函数
3
fun();// 弹出B
4
var fun = function () {
5
  alert('A');
6
}
7
function fun() {
8
  alert('B');
9
}
10
fun();// 弹出A

函数的参数和返回值#

函数的参数

参数是函数内的一些待定值，在调用函数时，必须传入这些参数的具体值函数的参数可多可少，函数可以没有参数，也可以有多个参数，多个参数之间需要用逗号隔开

1
//圆括号中定义“形式参数”
2
function add(a, b) {
3
  var sum = a + b;
4
  console.log('两个数字的和是' + sum);
5
}
6
add(3, 5);//调用函数时传入“实际参数”

形实结合

在上面例子中，3对应a，5对应b
如果add(3, 5,6);而add(a, b)，此时6没有形参接受他，会被直接忽略
如果add(3, 5);而add(a, b,c)，此时c没有实参传递他，c值为undefined
以上两点中，被忽略或者undefined，开发中一般都不是我们想看到的，这也是JS松散语法容易导致bug的原因，在typescript中会得到解决

arguments

函数内arguments表示它接收到的实参列表，它是一个类数组对象

类数组对象：所有属性均为从0开始的自然数序列，并且有 length属性，和数组类似可以用方括号书写下标访问对象的某个属性值，但是不能调用数组的方法

1
//不管用户传递多少参数，都能计算它们和
2
function fun(){
3
    var sum = 0
4
    for(var i = 0;i<arguments.length;i++){
5
        sum += arguments[i]
6
    }
7
    console.log('所有参数和' + sum);
8
  //console.log(arguments);
9
    //console.log(arguments[0]);
10
   // console.log(arguments[1]);
11
}
12
fun(33,44,55,66)

函数的返回值

函数体内可以使用return关键字表示“函数的返回值”

1
function sum(a, b) {
2
  return a + b;
3
}
4
var result = sum(3, 5);

调用一个有返回值的函数，可以被当做一个普通值，从而可以出现在任何可以书写值的地方
```
1
function sum(a, b) {
2
  return a + b;
3
}
4
var result = sum(3, sum(4, 5));
```

遇见return即退出函数

调用函数时，一旦遇见return语句则会立即退出函数，将执行权交还给调用者

1
function fun() {
2
    console.log('A');
3
    return 'B';
4
    console.log('C');
5
}
6
console.log(1);
7
var char = fun();
8
console.log(char);
9
console.log(2);

结合if语句的时候，往往不需要写else分支了

比如题目：请编写一个函数，判断一个数字是否是偶数

1
function checkEven(n){
2
  if(n % 2 == 0){
3
    return true
4
  }
5
  return false
6
}
7
var result = checkEven(7);
8
console.log(result);

函数算法题#

寻找喇叭花数

题目：喇叭花数是这样的三位数：其每一位数字的阶乘之和恰好等于它本身。即abc = a! + b！+ c！，其中abc表示一个三位数。试寻找所有喇叭花数。

思路：将计算某个数字的阶乘封装成函数，这样可以让问题简化。

1
// 求阶乘
2
//5! = 5 × 4 × 3 × 2 × 1 = 120
3
//3! = 3 × 2 × 1 = 6
4
//1! = 1
5
//0! = 1
6
function factorial(n) {
7
    var result = 1;
8
    for (var i = 1; i <= n; i++) {
9
        result *= i;//result=1*1；result=1*2；result=2*3；result=6*4 等于1*2*3*4=24
10
    }
11
    return result;
12
}
13
// 寻找喇叭花数
14
for (var num = 100; num <= 999; num++) {
15
    var a = parseInt(num / 100, 10);      // 百位
16
    var b = parseInt(num / 10, 10) % 10;  // 十位
17
    var c = num % 10;                     // 个位
18

19
    var sum = factorial(a) + factorial(b) + factorial(c);
20

21
    if (sum === num) {
22
        console.log(num);
23
    }
24
}

展开收起

JavaScript内置sort()方法

数组排序可以使用sort()方法，这个方法的参数又是一个函数。
```
1
var arr = [33, 22, 55, 11];
2
arr.sort(function (a, b) {
3

4
});
```

这个函数中的a、b分别表示数组中靠前和靠后的项，如果需要将它们交换位置，则返回任意正数；否则就返回负数。

1
var arr = [33, 22, 55, 11];
2
//排序
3
arr.sort(function (a, b) {
4
if (a > b) {
5
    return 1;
6
} else {
7
    return -1;
8
}
9
});
10
console.log(arr);
11
// 方式2
12
var arr = [33, 22, 55, 11];
13
arr.sort(function (a, b) {
14
    return a-b;
15
});
16
console.log(arr);

展开收起

递归#

什么是递归#

函数的内部语句可以调用这个函数自身，从而发起对函数的一次迭代。在新的迭代中，又会执行调用函数自身的语句，从而又产生一次迭代。当函数执行到某一次时，不再进行新的迭代，函数被一层一层返回，函数被递归。
递归是一种较为高级的编程技巧，它把一个大型复杂的问题层层转化为一个与原问题相似的规模较小的问题来求解。

用求4的阶乘举例

最开始求4的阶乘，只需知道3的阶乘 4；3的阶乘等于2的阶乘 3；2的阶乘等于1的阶乘 * 2；1的阶乘等于1；

1的阶乘等于1；那2的阶乘等于1 * 2就是2；3的阶乘等于3 * 2就是6；4的阶乘等于4 * 6就是24，最终等于24

1
function factorial(n) {
2
    // 递归出口
3
    if (n === 0) return 1;
4
    // 递归调用
5
    return n * factorial(n - 1);
6
}
7
console.log(factorial(4));

递归的要素：边界条件：确定递归到何时终止，也称为递归出口；递归模式：大问题是如何分解为小问题的，也称为递归体

递归常见算法题#

斐波那契数列

斐波那契数列是这样的数列：1、1、2、3、5、8、13、21

规律：数列下标为0和1的项的值都是1，从下标为2的项开始，每项等于前面两项的和

1
//编写一个函数，返回斐波那契数列中下标为n的那项的值
2
function fibonacci(n) {
3
    // 递归出口
4
    if(n == 0 || n ==1) return 1;
5
    // 递归调用
6
    return fibonacci(n - 1) + fibonacci(n - 2);
7
}
8
// console.log(fibonacci(6));
9

10
function fun(n){
11
 for(var i = 0; i < n; i++){
12
    console.log(fibonacci(i));
13
    }
14
}
15
//计算前15项斐波那契数列
16
fun(15)

展开收起

递归实现深克隆#

复习引用类型值的相关知识

类型	举例	当 var a = b 变量传值时	当用 == 比较时
基本类型值	数字型、字符串型、布尔型、undefined 型	内存中产生新的副本	比较值是否相等
引用类型值	对象、数组	内存中不产生新的副本，而是让新变量指向同一个对象	比较内存地址是否相同，即比较是否是同一个对象

复习浅克隆

使用var arr2 = arr1这样的语句不能实现数组的克隆

浅克隆：准备一个空的结果数组，然后使用for循环遍历原数组，将遍历到的项都推入结果数组

1
var arr1 = [33,44,55,66,77,88,99,100];
2
//var arr2 = arr1;
3
//arr1.push(111);
4
// arr2 也会被改变
5
//console.log(arr2);
6
// arr1 和 arr2 是同一个数组
7
// console.log(arr1 === arr2);
8

9
//准备一个结果数组
10
var result = [];
11
for(var i = 0; i < arr1.length; i++){
12
    result.push(arr1[i]);
13
}
14
arr1.push(222);
15
// result 不会被改变
16
console.log(result);
17
console.log(arr1);
18
// arr1 和 result 是不同的数组
19
console.log(arr1 === result);

展开收起

浅克隆只克隆数组的一层，如果数组是多维数组，则克隆的项会“藕断丝连”。

1
var arr1 = [33,44,55,66,[77,88]];
2
var result = [];
3
for(var i = 0; i < arr1.length; i++){
4
    result.push(arr1[i]);
5
}
6
arr1[4].push(222);
7
console.log(result);//[33,44,55,66,[77,88,222]] 浅克隆

实现深克隆

使用递归思想，整体思路和浅克隆类似，但稍微进行一些改动：如果遍历到项是基本类型值，则直接推入结果数组；如果遍历到的项是又是数组，则重复执行浅克隆的操作。

1
var arr1 = [33,44,55,66,[77,88]];
2
//实现深度拷贝
3
function deepCopy(arr){
4
    var result = [];
5
    for(var i = 0; i < arr.length; i++){
6
        // 递归调用
7
        // 递归调用的条件：当前元素是数组
8
        if(Array.isArray(arr[i])){
9
            result.push(deepCopy(arr[i]));
10
        }else{
11
            // 非数组元素，直接添加到结果数组
12
            result.push(arr[i]);
13
        }
14
    }
15
    return result;
16
}
17
arr2 = deepCopy(arr1)
18
console.log('arr2的数组:',arr2);//[33,44,55,66,[77,88]]
19
console.log( arr1 === arr2);//false
20
arr1[4].push(222);
21
console.log('arr2的数组:',arr2);//[33,44,55,66,[77,88]]
22
console.log('arr1的数组:',arr1);//[33,44,55,66,[77,88,222]]

展开收起

全局变量和局部变量#

变量作用域

JavaScript是函数级作用域编程语言：变量只在其定义时所在的function内部有意义。

1
function fun() {
2
  var a = 10;
3
}
4
fun();
5
console.log(a); // 报错
6
//变量a是在fun函数中被定义的，所以变量a只在fun函数内部有定义，fun函数就是a的“作用域”，变量a被称为局部变量。

全局变量

如果不将变量定义在任何函数的内部，此时这个变量就是全局变量，它在任何函数内都可以被访问和更改。

1
var a = 10;
2
function fun() {
3
  a++;
4
  console.log(a); // 输出11
5
}
6
fun();
7
console.log(a); // 输出11变量a没有定义在任何函数内部，它是“全局变量”
8
var a = 10;
9
function fun() {
10
var a = 5;
11
a++;
12
console.log(a); // 输出6
13
}
14
fun();
15
console.log(a); // 输出10

展开收起

遮蔽效应

如果不将变量定义在任何函数的内部，此时这个变量就是全局变量，它在任何函数内都可以被访问和更改

1
var a = 10;//变量a没有定义在任何函数内部，它是“全局变量
2
function fun() {
3
  a++;//这是全局变量a
4
  console.log(a); // 输出11
5
}
6
fun();
7
console.log(a); // 输出11

如果函数中也定义了和全局同名的变量，则函数内的变量会将全局的变量“遮蔽”

1
var a = 10;
2
function fun() {
3
  var a = 5;//局部变量a将全局变量a“遮蔽”了
4
  a++;//改变的是局部变量a的值，不影响全局变量
5
  console.log(a); // 输出6
6
}
7
fun();
8
console.log(a); // 输出10

注意考虑变量声明提升的情况

1
var a = 10;
2
function fun() {
3
    //变量提升 var a
4
  a++; //局部变量a被自增1，a此时是undefined，自增1结果是NaN
5
  var a = 5;//重新将a赋值为5
6
  console.log(a);// 输出5
7
}
8
fun();
9
console.log(a);// 输出10

形参也是局部变量

1
var a = 10;
2
function fun(a) {//形参a也是函数内部的局部变量
3
  a++;//8
4
  console.log(a);
5
}
6
fun(7);
7
console.log(a);//10

作用域链

先来认识函数的嵌套：一个函数内部也可以定义一个函数。和局部变量类似，定义在一个函数内部的函数是局部函数。
```
1
function fun() {
2
  function inner() {
3
    console.log('你好');
4
  }
5
inner();// 调用内部函数
6
}
7
fun();// 调用外部函数
```

在函数嵌套中，变量会从内到外逐层寻找它的定义。

1
var a = 10;
2
var b = 20;
3
function fun() {
4
  var c = 30;
5
  function inner() {
6
    var a = 40;
7
    var d = 50;
8
    console.log(a, b, c, d);//使用变量时，JS会从当前层开始，逐层向上寻找定义  [40 20 30 50]
9
  }
10
inner();
11
}
12
fun();

不加var将定义全局变量

在初次给变量赋值时，如果没有加var，则将定义全局变量。

1
function fun() {
2
  a = 3;
3
}
4
fun();
5
console.log(a); // 3
6

7
function fun() {
8
  var a = 3;
9
}
10
fun();
11
console.log(a);//报错 a is not defined

闭包#

什么是闭包#

从一个题目开始

这个程序的运行结果是什么呢？

1
function fun() {
2
  var name = '慕课网';
3
  function innerFun() {
4
    alert(name);
5
}
6
  return innerFun;//返回了内部函数
7
}
8
var inn = fun();//内部函数被移动到了外部执行
9
inn();

fun函数里面定义变量name是慕课网，并且定义一个函数innerFun，innerFun弹出name，也就是慕课网，fun函数返回innerFun函数，执行fun函数，inn变量接受，inn接受的是fun返回的innerFun函数，innerFun执行，弹出name，也就是慕课网

什么是闭包

JavaScript中函数会产生闭包（closure）。闭包是函数本身和该函数声明时所处的环境状态的组合。
函数能够“记忆住”其定义时所处的环境，即使函数不在其定义的环境中被调用，也能访问定义时所处环境的变量

观察闭包现象

在JavaScript中，每次创建函数时都会创建闭包。
但是，闭包特性往往需要将函数“换一个地方”执行，才能被观察出来。

闭包非常实用

闭包很有用，因为它允许我们将数据与操作该数据的函数关联起来。这与“面向对象编程”有少许相似之处。
闭包的功能：记忆性、模拟私有变量

闭包的记忆性-案例#

当闭包产生时，函数所处环境的状态会始终保持在内存中，不会在外层函数调用后被自动清除。这就是闭包的记忆性。

闭包的记忆性举例

创建体温检测函数checkTemp(n)，可以检查体温n是否正常，函数会返回布尔值。

但是，不同的小区有不同的体温检测标准，比如A小区体温合格线是37.1℃，而B小区体温合格线是37.3℃，应该怎么编程呢？

1
function createCheckTemp(standardTemp){
2
  function checkTemp(temp){
3
    if(temp <= standardTemp){
4
      console.log('你的体温正常');
5
    }else{
6
      console.log('你的体温异常');
7
    }
8
  }
9
  return checkTemp;
10
}
11
var checkTemp = createCheckTemp(37.1);//创建一个检查体温的函数，标准体温为37.1度
12
var checkTemp1 = createCheckTemp(37.3);//创建一个检查体温的函数，标准体温为37.3度
13
checkTemp(36.5);
14
checkTemp(37.5);
15

16
checkTemp1(37.2);

展开收起

ES6版本实现记忆性：

1
class CheckTemp {
2
  #standardTemp; // 私有字段：标准体温
3

4
  constructor(standardTemp) {
5
    this.#standardTemp = standardTemp;
6
  }
7

8
  checkTemp(temp) {
9
    if (temp <= this.#standardTemp) {
10
      console.log('你的体温正常');
11
    } else {
12
      console.log('你的体温异常');
13
    }
14
  }
15
}
16

17
// 创建两个不同标准的体温检测实例
18
const checkTemp = new CheckTemp(37.1);
19
const checkTemp1 = new CheckTemp(37.3);
20

21
// 检测体温
22
checkTemp.checkTemp(36.5);  // 你的体温正常
23
checkTemp.checkTemp(37.5);  // 你的体温异常
24

25
checkTemp1.checkTemp(37.2); // 你的体温正常
26
checkTemp1.checkTemp(37.5); // 你的体温异常

展开收起

闭包模拟私有变量#

题目：请定义一个变量a，要求是能保证这个a只能被进行指定操作（如加1、乘2），而不能进行其他操作，应该怎么编程呢？

在Java、C++等语言中，有私有属性的概念，但是JavaScript 中只能用闭包来模拟。

1
function fun(){
2
  var a = 0;
3
  return {
4
    getA: function(){
5
      console.log(a);
6
    },
7
    add:function(){
8
      a++;
9
    },
10
    pow:function(){
11
      a *=2;
12
    }
13
  }
14
}
15
var obj = fun();
16
//如果想在fun函数中访问a变量，唯一的方法是通过getA方法访问a变量
17
obj.getA();
18
obj.add();
19
obj.getA();
20
obj.pow();
21
obj.getA();

展开收起

使用闭包的注意点

不能滥用闭包，否则会造成网页的性能问题，严重时可能导致内存泄露。所谓内存泄漏是指程序中己动态分配的内存由于某种原因未释放或无法释放。
所谓内存泄漏是指程序中己动态分配的内存由于某种原因未释放或无法释放。

闭包的一道面试题

1
function addCount() {
2
  var count = 0;
3
  return function () {
4
    count = count + 1;//count++也可以;1
5
    console.log(count);//1
6
  };
7
}
8
var fun1 = addCount();
9
var fun2 = addCount();
10
fun1();//1
11
fun2();//1
12
fun2();//2
13
fun1();//2

闭包具有记忆性

立即执行函数IIFE#

什么是IIFE

IIFE（Immediately Invoked Function Expression，立即调用函数表达式）是一种特殊的JavaScript函数写法，一旦被定义，就立即被调用。

1
(function () {
2
  statements
3
})();

形成IIFE的方法

函数不能直接加圆括号被调用

1
function() {
2
  alert(1)
3
}();//错误

函数必须转为“函数表达式”才能被调用。

1
(function() {
2
    alert(1)
3
})();
4

5
+function() {
6
    alert(1)
7
}();
8

9
-function() {
10
    alert(1)
11
}();

写法	作用	最终表达式的值	推荐程度
`(function(){})()`	括号转换为表达式并立即调用	函数的返回值	推荐
`+function(){}()`	一元加号转换为表达式并立即调用	返回值经过数值转换	不推荐
`-function(){}()`	一元减号转换为表达式并立即调用	返回值数值转换后取负	不推荐

IIFE的作用1 - 为变量赋值

为变量赋值：当给变量赋值需要一些较为复杂的计算时（如 if语句），使用IIFE显得语法更紧凑。

1
var age = 12;
2
var sex = '男';
3
var title = (function () {
4
    if (age < 18) {
5
        return '小朋友' } else {
6
            if (sex == '男') {
7
                return '先生';
8
            } else {
9
                return '女士';
10
            }
11
        }
12
})();

IIFE的作用2

1
var arr = [];
2
for (var i = 0; i < 5; i++) {
3
  arr.push(function () {
4
  console.log(i);//变量i是全局变量，所有函数都共享内存中的同一个变量i
5
});
6
}
7
arr[1]();//5

IIFE的作用 - 将全局变量变为局部变量

IIFE可以在一些场合（如for循环中）将全局变量变为局部变量，语法显得紧凑

1
var arr = [];
2
for (var i = 0; i < 5; i++) {
3
(function (i) {
4
  arr.push(function () {
5
  console.log(i);
6

7
});
8
})(i);//这是立即执行函数，i是当前循环的变量
9
}
10
arr[2](); // 弹出2

JavaScript数组

Mon, 19 Oct 2026 03:17:22 GMT

数组简介和定义#

什么是数组

数组（Array）是 JavaScript 中的一种引用数据类型，用于在一个变量中存储多个数据。

数组具有以下特点：

可以存储多个数据，且数据类型可以不同。
数组中的每个元素都有对应的下标（索引）。
下标从 0 开始。
数组长度可以动态变化。

数组的定义方法

数组的定义方法有几种：

1
//使用 [] 定义数组，是最常用、最推荐的方式。
2
var arr = ['A', 'B','C','D'];
3
//使用 new Array() 创建数组
4
var arr = new Array('A','B', 'C', 'D');
5
//下面的代码表示定义一个长度为4的数组，但是这4项都是 undefined
6
var arr = new Array(4);
7
//根据传入的参数创建数组，解决了 Array() 传入单个数字时的歧义。
8
const arr2 = Array.of(10, 20, 30); // [10, 20, 30]

访问数组项

通过数组的下标访问元素，语法：

1
//数组名[下标]
2
const fruits = ["苹果", "香蕉", "橘子"];
3

4
console.log(fruits[0]); // 苹果
5
console.log(fruits[1]); // 香蕉
6
console.log(fruits[2]); // 橘子

下标越界

当访问的下标不存在时，JavaScript 通常返回 undefined，不会直接报错。

1
const arr = [10, 20, 30];
2

3
console.log(arr[3]);  // undefined
4
console.log(arr[10]); // undefined
5
console.log(arr[-1]); // undefined

注意：对数组本身访问不存在的下标通常不会报错，但继续访问 undefined 的属性可能报错。

数组的长度

使用 length 属性获取数组长度。

1
const arr = [10, 20, 30, 40];
2

3
console.log(arr.length); // 4
4

5
// 获取最后一个元素
6
console.log(arr[arr.length - 1]); // 40

length 可以修改：

1
const arr = [10, 20, 30];
2

3
arr.length = 2;
4
console.log(arr); // [10, 20]
5

6
arr.length = 5; // 长度为5，后面增加3个空槽位

注意：数组长度不一定等于实际存在的元素数量，因为 JavaScript 允许稀疏数组。

更改数组项

直接通过下标修改数组中的元素。

1
const arr = [10, 20, 30];
2
arr[1] = 99;
3
console.log(arr); // [10, 99, 30]

也可以通过新的下标添加元素：

1
arr[3] = 40;
2

3
console.log(arr); // [10, 99, 30, 40]

即使使用 const 定义数组，也可以修改内部元素，因为 const 限制的是变量重新赋值，并不禁止修改数组内容。

数组的遍历

数组遍历，就是依次访问数组中的元素。（在学习ES6的时候，有扩展很多循环语法，基础的记住for和while，数组使用for…of，对象使用for…in，特殊情况除外）

方法1：for 循环：适合需要操作下标的场景。

1
const arr = [10, 20, 30];
2

3
for (let i = 0; i < arr.length; i++) {
4
  console.log(arr[i]);
5
}

方法2：for…of：适合只需要获取元素值的场景。

1
const arr = [10, 20, 30];
2

3
for (const item of arr) {
4
  console.log(item);
5
}

方法3：forEach()：forEach() 可以同时获取元素值和下标，但不能像普通 for 循环一样通过 break 提前退出。

1
const arr = [10, 20, 30];
2

3
arr.forEach((item, index) => {
4
  console.log(index, item);
5
});

数组类型的检测#

JavaScript 数组本质上属于对象，因此不能单纯使用 typeof 判断。

1
const arr = [10, 20, 30];
2

3
console.log(typeof arr); // object

常见检测方式：

检测方式	示例	说明
`Array.isArray()`	`Array.isArray(arr)`	推荐方式
`instanceof`	`arr instanceof Array`	检查原型链，跨执行环境可能不准确
`Object.prototype.toString.call()`	`Object.prototype.toString.call(arr)`	返回 `[object Array]`

实际开发推荐：

1
const arr = [1, 2, 3];
2

3
console.log(Array.isArray(arr)); // true
4
console.log(Array.isArray({}));  // false
5
console.log(Array.isArray("abc")); // false

数组的常用方法#

添加与删除：这5个是最基础的，splice是功能最多的，push和pop是开发中最常用的

方法	作用	是否修改原数组
`push()`	末尾添加元素	是
`pop()`	删除末尾元素	是
`unshift()`	开头添加元素	是
`shift()`	删除开头元素	是
`splice()`	添加、删除或替换指定位置元素	是

push()方法：（末尾追加）

push()方法用来在数组末尾推入新项，参数就是要推入的项
如果要推入多项，可以用逗号隔开

调用push()方法后，数组会立即改变，不需要赋值

1
var arr = [1, 2, 3];
2

3
arr.push(4);
4
console.log(arr); // [1, 2, 3, 4]
5

6
arr.push(5, 6);
7
console.log(arr); // [1, 2, 3, 4, 5, 6]

pop()方法：（删除末尾）

与push()相反，pop()方法用来删除数组中的最后一项

pop()方法不仅会删除数组末项，而且会返回被删除的项

1
var arr = [1, 2, 3, 4];
2

3
var item = arr.pop();
4

5
console.log(arr);  // [1, 2, 3]
6
console.log(item);  // 4

unshift()方法：（头部插入）

unshift()方法用来在数组头尾插入新项，参数就是要插入的项
如果要插入多项，可以用逗号隔开

调用unshift()方法后，数组会立即改变，不需要赋值

1
var arr = [2, 3, 4];
2

3
arr.unshift(1);
4
console.log(arr); // [1, 2, 3, 4]
5

6
arr.unshift(-1, 0);
7
console.log(arr); // [-1, 0, 1, 2, 3, 4]

shift()方法：（删除头部）

与unshift()相反，shift()方法用来删除数组中下标为0 的项

shift()方法不仅会删除数组末项，而且会返回被删除的项

1
var arr = [10, 20, 30];
2

3
var item = arr.shift();
4

5
console.log(arr); // [20, 30]
6
console.log(item); // 10

splice()方法

splice()方法第一个参数是从哪个下标开始，第二个参数是删除多少个项

1
arr.splice(起始下标, 删除个数)

1
var arr = ['A','B','C','D','E','F','G'];
2
arr.splice(3,2,'X','Y','Z');
3
console.log(arr);
4
// 下标3开始，连续替换2项；这种说法错误的
5
// 准确是：下标3开始，连续删除2项，然后插入新元素
6
// [ 'A', 'B', 'C', 'X', 'Y', 'Z','F', 'G']

splice()方法可以用于在指定位置插入新项（第二个参数设置0，就没有删除项）

1
arr.splice(起始下标, 0, 新元素)

1
var arr = [1, 2, 5, 6];
2
arr.splice(2, 0, 3, 4);
3
console.log(arr); // [1, 2, 3, 4, 5, 6]

splice()方法可以用于删除指定项；result返回被删除的项

1
arr.splice(起始下标, 删除个数)

1
var arr = [10, 20, 30, 40];
2
var result = arr.splice(1, 1);
3
console.log(arr);    // [10, 30, 40]
4
console.log(result); // [20]

splice()方法会以数组形式返回被删除的项

查找与判断：

方法	作用	返回值
`indexOf()`	查找元素首次出现的位置	下标或 -1
`lastIndexOf()`	查找元素最后出现的位置	下标或 -1
`includes()`	判断是否包含元素	布尔值
`find()`	查找第一个符合条件的元素	元素或 undefined
`findIndex()`	查找第一个符合条件的元素下标	下标或 -1
`some()`	是否至少一个元素符合条件	布尔值
`every()`	是否所有元素符合条件	布尔值

indexOf()方法的功能是搜索数组中的元素，并返回它所在的位置，如果元素不存在，则返回-1

1
var arr = ['A', 'B', 'C', 'D'];
2

3
console.log(arr.indexOf('B')); // 1
4
console.log(arr.indexOf('Z')); // -1

includes()方法的功能是判断一个数组是否包含一个指定的值，返回布尔值

1
var arr = ['A', 'B', 'C'];
2
console.log(arr.includes('B')); // true
3
console.log(arr.includes('Z')); // false

截取、合并与转换

方法	作用	是否修改原数组
`slice()`	截取数组片段	否
`concat()`	合并数组	否
`join()`	将数组连接成字符串	否
`reverse()`	反转数组	是
`sort()`	对数组排序	是
`flat()`	展平嵌套数组	否

slice()方法：slice()方法用于得到子数组，slice(a, b)截取的子数组从下标为a的项开始，到下标为 b（但不包括下标为b的项）结束

标准写法

1
var arr = ['A','B','C','D','E','F'];
2

3
var result = arr.slice(1, 4);
4

5
console.log(result); // ['B','C','D'] 从下标 1 开始；（B）到下标 4 结束（不包含4）所以是：B、C、D
6
console.log(arr);    // ['A','B','C','D','E','F']

slice()如果不提供第二个参数，则表示从指定项开始，提取所有后续所有项作为子数组

1
var arr = ['A','B','C','D','E','F'];
2

3
var result = arr.slice(2);
4

5
console.log(result); // ['C','D','E','F']

slice(a, b)方法不会更改原有数组，返回的是截取的数组

1
var arr = [1, 2, 3, 4];
2

3
var result = arr.slice(1, 3);
4

5
console.log(result); // [2, 3]
6
console.log(arr);    // [1, 2, 3, 4]  ✔ 原数组不变

slice()方法的参数允许为负数，表示数组的倒数第几项

1
var arr = ['A','B','C','D','E','F'];
2

3
var result = arr.slice(-3);
4

5
console.log(result); // ['D','E','F']

concat()方法

concat()方法可以合并连结多个数组

concat()方法不会改变原数组

1
var arr1 = [1, 2, 3, 4];
2
var arr2 = [5, 6, 7, 8];
3
var arr3 = [9, 10, 11];
4
var arr = arr1.concat(arr2 , arr3);
5
console.log(arr);
6
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]

join()方法

数组的join()方法可以使数组转为字符串；字符串的split() 方法可以使字符串转为数组。
join()的参数表示以什么字符作为连接符，如果留空则默认以逗号分隔，如同调用toString()方法
```
1
var arr = ['A', 'B', 'C'];
2

3
var str = arr.join('-');
4

5
console.log(str); // "A-B-C"
```

split()的参数表示以什么字符拆分字符串，一般不能留空

1
var str = "A-B-C";
2
var arr = str.split('-');
3
console.log(arr); // ["A", "B", "C"]

reverse()方法

reverse()方法用来将一个数组中的全部项顺序置反

1
var arr = ["A","B","C","D"];
2
arr.reverse();
3
console.log(arr); // ["D","C","B","A"]

遍历相关算法#

题目：求数组中每一项的总和、平均数

1
var arr = [10, 20, 30, 40, 50];
2
var sum = 0;
3
for (var i = 0; i < arr.length; i++) {
4
    sum += arr[i];
5
}
6
var avg = sum / arr.length;
7
console.log("总和：" + sum);
8
console.log("平均数：" + avg);

1
var arr = [10, 20, 30, 40, 50];
2
var sum = arr.reduce(function (acc, cur) {
3
    return acc + cur;
4
}, 0);
5
var avg = sum / arr.length;
6
console.log(sum, avg);

题目：求数组项的最大值和最小值

1
var arr = [12, 5, 78, 23, 9, 100, 34];
2
// 假设第一个是最大值和最小值
3
var max = arr[0];
4
var min = arr[0];
5
for (var i = 1; i < arr.length; i++) {
6
    if (arr[i] > max) {
7
        max = arr[i];
8
    }
9
    if (arr[i] < min) {
10
        min = arr[i];
11
    }
12
}
13
console.log("最大值：" + max);
14
console.log("最小值：" + min);

题目：统计符合条件的元素数量

1
const arr = [12, 25, 36, 47, 58];
2

3
let count = 0;
4

5
for (const item of arr) {
6
  if (item % 2 === 0) {
7
    count++;
8
  }
9
}
10

11
console.log(count); // 3

数组去重和随机样本#

数组去重

题目：去掉数组中的重复项

思路：准备一个空结果数组，遍历原数组，如果遍历到的项不在结果数组中，则推入结果数组。

1
var arr = [1, 2, 3, 2, 4, 1, 5];
2
var result = [];
3
for (var i = 0; i < arr.length; i++) {
4
    if (!result.includes(arr[i])) {
5
        result.push(arr[i]);
6
    }
7
}
8
console.log(result);

ES6版本：使用Set，Set 是一种不保存重复值的集合类型，配合展开运算符 ... 可以转换回数组。

1
const arr = [1, 2, 2, 3, 3, 4];
2

3
const result = [...new Set(arr)];
4

5
console.log(result); // [1, 2, 3, 4]

filter() + indexOf()：原理：只保留每个元素首次出现的位置。这种方式对 NaN 等特殊值不如 Set 合适。

1
const arr = [1, 2, 2, 3, 3, 4];
2

3
const result = arr.filter((item, index) => {
4
  return arr.indexOf(item) === index;
5
});
6

7
console.log(result); // [1, 2, 3, 4]

随机样本

题目：请随机从原数组中取3项

思路：准备一个空结果数组，遍历原数组，随机选择一项，推入结果数组，并且将这项删除

1
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
2
var result = [];
3
for (var i = 0; i < 3; i++) {
4
    // 1. 随机下标
5
    var index = Math.floor(Math.random() * arr.length);
6
    // 2. 取出该项
7
    result.push(arr[index]);
8
    // 3. 删除该项（防止重复）
9
    arr.splice(index, 1);
10
}
11
console.log(result);

冒泡排序（重点）#

冒泡排序（Bubble Sort）是一种基础排序算法，**核心思想：相邻两个元素进行比较，如果顺序错误就交换位置。**以升序排序为例，每一轮都把当前未排序部分的最大元素移动到右边。

xxxxxxxxxx var arr = [];for (var i = 0; i < 5; i++) {(function (i) { arr.push(function () { console.log(i); });})(i);//这是立即执行函数，i是当前循环的变量}arr2; // 弹出2js

1
const arr = [5, 3, 8, 4, 2];
2

3
for (let i = 0; i < arr.length - 1; i++) {
4
  for (let j = 0; j < arr.length - 1 - i; j++) {
5
    if (arr[j] > arr[j + 1]) {
6
      const temp = arr[j];
7
      arr[j] = arr[j + 1];
8
      arr[j + 1] = temp;
9
    }
10
  }
11
}
12

13
console.log(arr); // [2, 3, 4, 5, 8]

代码理解：

代码	作用
外层 `i` 循环	控制排序轮数
内层 `j` 循环	比较相邻元素
`arr[j] > arr[j + 1]`	判断是否需要交换
`temp`	临时保存元素，完成交换
`arr.length - 1 - i`	排除已经排好序的末尾部分

实际开发中通常使用 sort() 排序，学习冒泡排序的重点在于掌握双层循环、相邻比较和元素交换。

二维数组#

二维数组可以理解为数组中的元素仍然是数组。

访问二维数组：通过两个下标访问元素：

1
const arr = [
2
  [1, 2, 3],
3
  [4, 5, 6],
4
  [7, 8, 9]
5
];
6
//第一个下标表示外层数组的索引，第二个表示内层数组的索引。
7
console.log(arr[0][0]); // 1
8
console.log(arr[1][2]); // 6
9
console.log(arr[2][1]); // 8

遍历二维数组<使用双层循环>：

1
for (let i = 0; i < arr.length; i++) {
2
  for (let j = 0; j < arr[i].length; j++) {
3
    console.log(arr[i][j]);
4
  }
5
}

创建二维数组

例如创建一个 3 行 4 列，所有元素为 0 的二维数组：

1
const arr = Array.from(
2
  { length: 3 },
3
  () => Array(4).fill(0)
4
);
5

6
console.log(arr);

得到：

1
[
2
  [0, 0, 0, 0],
3
  [0, 0, 0, 0],
4
  [0, 0, 0, 0]
5
]

注意：不要使用 Array(3).fill(Array(4).fill(0)) 创建需要独立修改每一行的二维数组，因为这种方式会让每一行引用同一个内层数组。

基本类型值和引用类型值#

基本类型：number、boolean、string、undefined、 null
引用类型：array、object、function、regexp…

相等判断时的区别：

基本类型进行相等判断时，会比较值是否相等
引用类型进行相等判断时，会比较址是否相等，也就是说它会比较是否为内存中的同一个东西

类型	举例	当 var a = b 变量传值时	当用 == 比较时
基本类型值	数字型、字符串型、布尔型、undefined 型	内存中产生新的副本	比较值是否相等
引用类型值	对象、数组	内存中不产生新的副本，而是让新变量指向同一个对象	比较内存地址是否相同，即比较是否是同一个对象

1
var a = 1;
2
var b = a;
3
var a = 2;
4
// a 和 b 是不同的变量
5
console.log(a);//2
6
console.log(b);//1

深克隆和浅克隆（重点）#

浅克隆：只克隆数组的第一层，如果是多维数组，或者数组中的项是其他引用类型值，则不克隆其他层

1
var arr = [1, 2, 3];
2
var newArr = [];
3
for (var i = 0; i < arr.length; i++) {
4
    newArr.push(arr[i]);
5
}
6
arr.push(222);
7
console.log(newArr); // [1, 2, 3]
8
console.log(arr); // [1, 2, 3，222]

1
var arr = [{ a: 1 }, { b: 2 }];
2
var newArr = [];
3
for (var i = 0; i < arr.length; i++) {
4
    newArr.push(arr[i]);
5
}
6
newArr[0].a = 100//改变新数组，旧数组也更着变了
7
console.log(newArr); // [ { a: 100 }, { b: 2 } ]
8
console.log(arr); // [ { a: 100 }, { b: 2 } ]

深克隆：克隆数组的所有层，要使用递归技术，在后面介绍，但是在现代开发中有一个api可以实现，不用手写递归，那就是structuredClone() ，自 2022 年 3 月起已在主流浏览器中广泛支持，Node.js 从 17.0.0 开始提供该 API。

它支持数组、普通对象、Date、Map、Set 等，也支持循环引用，但有一些限制。

数据类型	是否支持
普通对象、数组	✔
嵌套对象、二维数组	✔
Date、Map、Set	✔
循环引用	✔
函数	❌
DOM 元素	❌
Proxy 代理对象	❌
自定义类的原型与方法	不能完整保留

对象深克隆：

1
// 对象深克隆
2
const obj1 = {
3
  name: "张三",
4
  age: 20,
5
  hobby: ["篮球", "足球"],
6
  address: {
7
    city: "北京"
8
  }
9
};
10

11
const obj2 = structuredClone(obj1);
12

13
obj2.hobby[0] = "羽毛球";
14
obj2.address.city = "上海";
15

16
console.log(obj1.hobby);        // ["篮球", "足球"]
17
console.log(obj1.address.city); // 北京

展开收起

数组深克隆

1
const arr1 = [[1, 2], [3, 4]];
2

3
const arr2 = structuredClone(arr1);
4

5
arr2[0][0] = 99;
6

7
console.log(arr1); // [[1, 2], [3, 4]]
8
console.log(arr2); // [[99, 2], [3, 4]]

JavaScript流程控制语句

Sun, 18 Oct 2026 23:32:53 GMT

JavaScript 中，流程控制语句用于控制代码的执行顺序，主要分为两大类：

条件判断：if...else、switch、三元运算符，根据条件决定执行哪些代码。
循环控制：for、while、do...while，让代码重复执行。

if…else 条件判断语句#

if...else 用于根据条件是否成立，决定执行不同的代码。

基本语法#

1
if (条件表达式) {
2
  // 条件为 true 时执行
3
} else {
4
  // 条件为 false 时执行
5
}

示例：

1
let age = 18;
2

3
if (age >= 18) {
4
  console.log("成年人");
5
} else {
6
  console.log("未成年人");
7
}

多条件判断#

通过 else if 可以判断多个条件。

1
let score = 85;
2

3
if (score >= 90) {
4
  console.log("优秀");
5
} else if (score >= 80) {
6
  console.log("良好");
7
} else if (score >= 60) {
8
  console.log("及格");
9
} else {
10
  console.log("不及格");
11
}

注意：

条件表达式会转换为布尔值进行判断。
从上往下依次判断，命中第一个成立的条件后，跳过后续分支。
else if 和 else 都是可选的。
建议始终使用 {} 包裹代码块。

switch 多分支选择语句#

switch 用于将一个表达式的值与多个 case 进行匹配。

基本语法#

1
switch (表达式) {
2
  case 值1:
3
    // 匹配值1时执行
4
    break;
5

6
  case 值2:
7
    // 匹配值2时执行
8
    break;
9

10
  default:
11
    // 都不匹配时执行
12
}

示例：

1
let day = 3;
2

3
switch (day) {
4
  case 1:
5
    console.log("星期一");
6
    break;
7
  case 2:
8
    console.log("星期二");
9
    break;
10
  case 3:
11
    console.log("星期三");
12
    break;
13
  default:
14
    console.log("其他日期");
15
}

展开收起

输出：星期三

break 的作用#

break 用于结束当前 switch 语句。

如果不写 break，程序会继续执行后面的 case 代码，这种行为称为穿透（fall-through）。

1
let num = 1;
2

3
switch (num) {
4
  case 1:
5
    console.log("一");
6
  case 2:
7
    console.log("二");
8
  default:
9
    console.log("其他");
10
}

输出：

1
一
2
二
3
其他

多个 case 共用代码#

1
let day = 6;
2

3
switch (day) {
4
  case 6:
5
  case 7:
6
    console.log("周末");
7
    break;
8
  default:
9
    console.log("工作日");
10
}

输出：周末

注意： switch 使用严格相等（===）的匹配规则，不会自动将字符串 "1" 转换为数字 1。

三元运算符#

三元运算符 ? : 是一种根据条件返回不同结果的表达式，可以简化简单的 if...else 判断。

基本语法#

1
条件表达式 ? 表达式1 : 表达式2;

条件为 true：返回表达式1的结果。
条件为 false：返回表达式2的结果。

示例：

1
let age = 18;
2
let result = age >= 18 ? "成年人" : "未成年人";
3
console.log(result); // 成年人

等价于：

1
let age = 18;
2
let result;
3

4
if (age >= 18) {
5
  result = "成年人";
6
} else {
7
  result = "未成年人";
8
}

嵌套三元运算符#

1
let score = 85;
2

3
let result = score >= 90
4
  ? "优秀"
5
  : score >= 60
6
    ? "及格"
7
    : "不及格";
8

9
console.log(result); // 及格

虽然三元运算符支持嵌套，但复杂条件推荐使用 if...else，可读性更好。

for 循环语句#

for 循环适合循环次数已知或可以明确控制的场景。

基本语法#

1
for (初始化表达式; 条件表达式; 更新表达式) {
2
  // 循环执行的代码
3
}

使用示例#

1
for (let i = 1; i <= 5; i++) {
2
  console.log(i);
3
}

输出：

执行过程：

循环	`i` 的值	条件 `i <= 5`	结果
第1次	1	true	输出1
第2次	2	true	输出2
第3次	3	true	输出3
第4次	4	true	输出4
第5次	5	true	输出5
第6次	6	false	结束循环

遍历数组#

1
const arr = ["HTML", "CSS", "JavaScript"];
2

3
for (let i = 0; i < arr.length; i++) {
4
  console.log(arr[i]);
5
}

输出：

1
HTML
2
CSS
3
JavaScript

while 循环语句#

while 循环会先判断条件，条件成立才执行循环体。

通常适用于循环次数不确定，需要根据条件决定是否继续执行的场景。

基本语法#

1
while (条件表达式) {
2
  // 条件成立时重复执行
3
}

使用示例#

1
let i = 1;
2

3
while (i <= 5) {
4
  console.log(i);
5
  i++;
6
}

输出：

注意：

先判断条件，再执行循环体。
如果第一次判断条件不成立，则一次都不会执行。
要确保循环条件最终能够变为 false，避免死循环。

例如：

1
let i = 10;
2

3
while (i < 5) {
4
  console.log(i);
5
}

因为条件一开始就不成立，所以不会输出任何内容。

do…while 循环语句#

do...while 与 while 类似，但它会先执行一次循环体，再判断条件。

基本语法#

1
do {
2
  // 循环体
3
} while (条件表达式);

使用示例#

1
let i = 1;
2

3
do {
4
  console.log(i);
5
  i++;
6
} while (i <= 5);

输出：

与 while 的区别#

1
// while
2
let a = 10;
3

4
while (a < 5) {
5
  console.log("while执行");
6
}
7

8
// do...while
9
let b = 10;
10

11
do {
12
  console.log("do...while执行");
13
} while (b < 5);

结果：

while：不会执行。
do...while：执行一次。

循环控制语句 break 和 continue#

这两个关键字可以用于 for、while 和 do...while 循环。

break 结束循环#

1
for (let i = 1; i <= 5; i++) {
2
  if (i === 3) {
3
    break;
4
  }
5

6
  console.log(i);
7
}

输出：

当 i === 3 时，直接结束整个循环。

continue 跳过本次循环#

1
for (let i = 1; i <= 5; i++) {
2
  if (i === 3) {
3
    continue;
4
  }
5

6
  console.log(i);
7
}

输出：

当 i === 3 时，跳过本次循环剩余的代码，继续下一轮。

JavaScript表达式与操作符

Sun, 18 Oct 2026 07:24:01 GMT

什么是表达式和运算符#

例如：5 + 3就是一个表达式，5和3是操作数，+是运算符；
表达式种类有：算术、关系、逻辑、赋值和综合表达式

算术表达式#

算术运算符

意义	运算符
加	+
减	-
乘	*
除	/
取余	%

加减乘除加减的符号和数学一致，乘法是*号，除法是/号默认情况，乘除法的优先级要高于加法和减法；必要时可以使用圆括号来改变运算的顺序

加号的两种作用

加号有“加法”和“连字符”两种作用
如果加号两边的操作数都是数字，则为“加法”，否则为连字符
```
1
1 + 2 // 3
2
1 + '2'; // '12'
3
'1' + '2'; // '12'
```

取余运算

取余运算也叫作“求模运算”，用百分号“%”表示

a % b表示求a除以b的余数，它不关心整数部分，只关心余数

1
11 % 4; //3，因为11除以4余数是3
2
20 % 6; //2，因为20除以6余数是2
3
12 % 3; //0，因为能够整除，余数是0
4
9 % 3; //0，因为能够整除，余数是0
5
3 % 9; //3，因为商0，余数是3

隐式类型转换

如果参与数学运算的某操作数不是数字型，那么JavaScript 会自动将此操作数转换为数字型
```
1
3 * '4' //12
```
隐式转换的本质是内部调用Number()函数
```
1
true + true //2
2
false + 2 //2
3
3 * '2天' //NaN
```

有关IEEE754

在JavaScript中，有些小数的数学运算不是很精准
```
1
0.1 + 0.2 // 0.30000000000000004
```
JavaScript使用了IEEE754二进制浮点数算术标准，这会使一些个别的小数运算产生“丢失精度”问题
解决办法：在进行小数运算时，要调用数字的toFixed()方法保留指定的小数位数

幂和开根号

JavaScript中没有提供幂计算、开根号的运算符。需要使用 Math对象的相关方法进行计算。
```
1
Math.pow(2, 3) // 8
2
Math.pow(3, 2) // 9
3
Math.sqrt(81) // 9
4
Math.sqrt(-81) // NaN
```

向上取整和向下取整

Math.ceil() 向上取整； Math.floor()向下取整

1
Math.ceil(2.4) // 3
2
Math.floor(2.4) // 2
3
Math.ceil(-2.4) // -2
4
Math.floor(-2.4) // -3
5
Math.ceil(2) // 2
6
Math.floor(2) // 2

关系表达式#

关系运算符

意义	运算符
大于	>
小于	<
大于或等于	>=
小于或等于	<=
等于	==
不等于	!=
全等于	===
不全等于	!==

大于和小于

大于>、小于<两个符号和数学相同

“大于等于”运算符是>= ，“小于等于”运算符是<=

1
8 > 5 // true
2
7 < 4 // false
3
8 >= 7 // true
4
8 >= 8 // true
5
8 <= 8 // true
6
8 <= 11 // true

判断是否相等

如果想比较两个值是否相等，此时应该使用==运算符
JavaScript中等号=表示赋值，而并不是相等。判断相等应该使用==运算符
```
1
3 == 3 // true
2
3 === 3 // true
3
3 = 3 // 错误语句
```

相等和全等

两个等号==运算符不比较值的类型，它会进行隐式转换后比较值是否相等

三个等号===运算符，不仅比较值是否相同，也比较类型是否相同

1
5 == '5'; // true
2
5 === '5'; // false

示例：

1
1 == true // true
2
1 === true // false
3
0 == false // true
4
0 === false // false
5
0 == undefined // false
6
0 === undefined // false
7
undefined == null // true
8
undefined === null // false

NaN不自等

NaN作为一个特殊的数字类型值，它在用==比较的时候也有特殊的结果
```
1
NaN == NaN // false
2
NaN === NaN // false
```

如何判断某变量值为NaN

isNaN()函数可以用来判断变量值是否为NaN
```
1
isNaN(NaN) // true
2
isNaN(5) // false
```
但isNaN()也不好用，它的机理是：只要该变量传入 Number()的执行结果是NaN，则isNaN()函数都会得到true
```
1
isNaN(undefined) // true
2
isNaN('3天') // true
3
isNaN(null) // false
```

特殊值的相等关系

1
null == undefined // true
2
null == 0 // false
3
NaN == NaN // false

不相等和不全等

!=表示不相等，!==表示不全等

1
5 != 6 // true
2
5 !== 6 // true
3
5 !=
4
'5' // false
5
5 !== '5' // true

JS中没有连比

判断变量a是不是介于3到15之间，应该怎么写呢？

错误示范：
```
1
3 <= a <= 15
```
正确示范：使用逻辑运算符
```
1
3 <= a && a<= 15
```
a 大于等于3 ，并且a小于等于15

逻辑表达式#

逻辑运算符：

意义	运算符
非	!
与	&&
或	\|\|

非运算

!表示“非”，也可以称为“置反运算”
!是一个“单目运算符”，只需要一个操作数

置反运算的结果一定是布尔值

1
!true // false
2
!false // true
3
!!true // true
4
!0 // true
5
!undefined // true
6
!'' // true
7
!'imooc' // false
8
!!0 // false
9
!!'' // false
10
!!'imooc' // true

与运算

&&表示“并且”，称为“与运算”，口诀：都真才真

1
true && true // true
2
true && false // false
3
false && true // false
4
false && false // false

或运算

||表示“或者”，称为“或运算”，口诀：有真就真

1
true || true //true
2
true || false //true
3
false || true //true
4
false || false //false

短路计算

思考以下计算会得出什么？

1
3 && 6

3为真，6也为真，&&表示“并且”，称为“与运算”，口诀：都真才真，起到最终决定的是后面的6，所以最终输出6

a && b运算中：a真，表达式值为b；a假，表达式值为a

再来看看以下例子：

1
3 && 6 // 6
2
undefined && 15 // undefined
3
15 && undefined // undefined
4
null && 2 // null
5
'' && 16 // ''
6
NaN && undefined // NaN

那如果换成以下会什么结果

1
3 || 6

3为真，不用看后面的6，最终输出3，||表示“或者”，称为“或运算”，口诀：有真就真

再来看看以下例子：

1
3 || 6 // 3
2
0 || 6 // 6
3
null || undefined // undefined
4
'a' || 'b' // 'a'
5
NaN || null // null

不需要背诵和记忆规律，遇见题目只需要“现场分析”即可

逻辑运算顺序

逻辑运算的优先级是：非 → 与 → 或
```
1
!true || true // true
2
3 && 4 || 5 && 6 // 4
```

赋值表达式#

赋值运算符

意义	运算符
赋值	`=`
快捷赋值	`%=、/=、*=、-=、+=`
自增运算	`++`
自减运算	`--`

JS中，=表示赋值，==判断是否相等（不判断类型），===判断是否全等
赋值运算符会将等号右边的数值，赋予等号左边的变量

赋值运算也产生值

赋值运算也产生值，等号后面的值将作为“赋值运算的值”
```
1
var a;
2
console.log(a = 4); // 4
```

这就意味着，可以连续使用赋值运算符

1
var a, b, c;
2
a = b = c = 15;
3
console.log(a); // 15
4
console.log(b); // 15
5
console.log(c); // 15

快捷赋值

快捷赋值运算符表示在原数值基础上进一步进行运算

1
var a = 3;
2
a += 5; // 等价于a = a + 5
3
console.log(a); // 8
4
var b = 14;
5
b /= 2; // 等价于b = b / 2
6
console.log(b); // 7

1
var c = 16;
2
c %= 3; // 等价于c = c % 3
3
console.log(c); // 1

自增/自减运算符

++和—是自增/自减运算符，表示在自身基础上加1或减1
```
1
var a = 3;
2
a++;
3
console.log(a); // 4
```

a++和++a的区别

a++ 先用再加； ++a 先加再用

1
var a = 3;
2
var b = a++;
3
console.log(b); // 3
4
console.log(a); // 4
5

6
var a = 3;
7
var b = ++a;
8
console.log(b); // 4
9
console.log(a); // 4

综合表达式#

运算顺序：非运算 → 数学运算 → 关系运算 → 逻辑运算

1
5 < 3 + 3 // true
2
3 > 2 && 8 > 3 + 4 // true
3
3 > 2 && 8 > 3 + 5 // false
4
!13 < 5 - 3 // true
5
!13 < 5 - 5 // false

变量的范围表示

1
5 <= a <= 12//❌
2
a >= 5 && a <= 12//✔

JavaScript基本数据类型

Sun, 18 Oct 2026 07:05:28 GMT

数据类型简介和检测#

JavaScript中两大类数据类型

基本数据类型：Number、String、Boolean、 Undefined和Null
复杂数据类型：Object、Array、Function、 RegExp、Date、Map、Set、 Symbol等等

typeof运算符

1
typeof 5; // number
2
typeof '慕课网'; // string
3
var a = 12;
4
var b =
5
'慕课网';
6
console.log(typeof a); // number
7
console.log(typeof b); // string

5种基本数据类型的typeof检测结果：

类型名	typeof检测结果	值举例
数字类型	number	5
字符串类型	string	‘慕课网’
布尔类型	boolean	true
undefined类型	undefined	undefined
null类型	object	null

Number（数字）类型#

所有数字不分大小、不分整浮、不分正负，都是数字类型
```
1
typeof 925; //number
2
typeof 3.13; //number
3
typeof -6; //number
```

小数中0可以省略

介于0和1之间的小数，可以不书写0
```
1
.5; //0.5
2
typeof .5; //number
```

科学计数法

较大数或较小数（绝对值较小）可以写成科学计数法

1
3e8; //300000000
2
typeof 3e8; //number
3
3e-4; //0.0003
4
typeof 3e-8; //number

不同进制的数字

二进制数值以0b开头
```
1
0b10 // 2
2
0b1111 // 15
```
八进制数值以0开头
```
1
017 // 15
```
十六进制数字以0x开头
```
1
0xf // 15
```

一个特殊的数字型值NaN

NaN是英语“not a number”的意思，即“不是一个数”，但它是一个数字类型的值
```
1
typeof NaN; //number
```
0除以0的结果是NaN，事实上，在数学运算中，若结果不能得到数字，其结果往往都是NaN
NaN有一个“奇怪”的性质：不自等。这个知识点将在后续课程中讲解

String（字符串）类型#

字符串就是“人类的自然语言”

字符串要用引号包裹，双引号或者单引号均可

1
typeof "慕课网"; // string
2
typeof '慕课网'; // string

分清数字和字符串

数字11和字符串’11’在语义上是不同的，前者表达一个数量，后者是一个文本
```
1
typeof 11; //number
2
typeof '11'; //string
```

字符串的拼接

加号可以用来拼接多个字符串
```
1
'imo' + 'oc' // 'immoc'
```

字符串和变量的拼接

要将一个变量的值“插入”到字符串中，要“斩断链接”

1
var year = 2022;
2
var str ='北京冬季奥运会在' + year + '年召开';

新版ES中增加了反引号表示法，可以更方便进行变量插值，后续将进行介绍

空字符串

一些时候需要使用空字符串，直接书写闭合的引号对即可
```
1
var str ='';
```

字符串的length属性

字符串的length 属性表示字符串的长度

1
'我喜欢JS'.length // 5
2
'我喜欢JS，我也喜欢HTML'.length // 14
3
''.length // 0

字符串的常用方法

“方法”就是能够打点调用的函数，字符串有丰富的方法

方法	功能
`charAt()`	得到指定位置的字符
`substring()`	提取子串
`substr()`	提取子串
`slice()`	提取子串
`toUpperCase()`	将字符串转换为大写
`toLowerCase()`	将字符串转换为小写
`indexOf()`	检索字符串，返回指定内容首次出现的位置

charAt()方法

charAt()方法可以得到指定位置的字符

1
'我喜欢JS，我也喜欢HTML'.charAt(0) // '我'
2
'我喜欢JS，我也喜欢HTML'.charAt(11) // 'T'
3
'我喜欢JS，我也喜欢HTML'.charAt(74) // ''

substring()、substr()和slice()

substring(a, b) 方法得到从a开始到b结束（不包括b处）的子串

1
'我喜欢JS，我也喜欢HTML'.substring(3, 5) // 'JS'
2
'我喜欢JS，我也喜欢HTML'.substring(10, 14) // 'HTML'

substring(a, b) 方法如果省略第二个参数，返回的子串会一直到字符串的结尾
```
1
'我喜欢JS，我也喜欢HTML'.substring(6) // '我也喜欢HTML'
```
substring(a, b) 中，a可以大于b，数字顺序将自动调整为小数在前
```
1
'我喜欢JS，我也喜欢HTML'.substring(5, 3) // 'JS'
```
substr (a, b)中，将得到从a开始的长度为b的子串
```
1
'我喜欢JS，我也喜欢HTML'.substr(3, 2) // 'JS'
```

substr(a, b)中，b可以省略，表示到字符串结尾

1
'我喜欢JS，我也喜欢HTML'.substr(3) // 'JS，我也喜欢HTML

substr (a, b)中，a可以是负数，表示倒数位置

1
'我喜欢JS，我也喜欢HTML'.substr(-4, 2) // HT'

slice(a, b)方法得到从a开始到b结束（不包括b处）的子串
```
1
'我喜欢JS，我也喜欢HTML'.slice(3, 5) // 'JS'
```

slice(a, b)的参数a可以是负数

1
'我喜欢JS，我也喜欢HTML'.slice(-4, -1) // 'HTM'

slice(a, b)中，参数a必须小于参数b

1
'我喜欢JS，我也喜欢HTML'.slice(5, 2) // ''

对比总结

substring(a, b)和slice(a, b)功能基本一致，都是得到从a开始到b 结束（不包括b）的子串，区别：

① substring()可以自动交换两个参数位置，而slice()不行；

②slice()的参数a可以是负数，而substring()不行。
substr(a, b)中参数b是子串长度，而不是位置编号

toUpperCase()和toLowerCase()

toUpperCase() 转为大写

toLowerCase() 转为小写

1
'i love you'.toUpperCase(); // 'I LOVE YOU'
2
'IMOOC'.toLowerCase(); // 'imooc'

indexOf()

indexOf()方法返回某个指定的字符串值在字符串中首次出现的位置

如果要检索的字符串值没有出现，则该返回 -1

1
'abcdeb'.indexOf('b') // 1
2
'abcdeb'.indexOf('de') // 3
3
'abcdeb'.indexOf('m') // -1

Boolean（布尔）类型#

布尔（Boole·George）英国19世纪数学家及逻辑学家。
布尔型值只有两个：true和false，分别表示真和假
```
1
typeof true; //boolean
2
typeof false; //boolean
```

Undefined类型#

undefined是什么

一个没有被赋值的变量的默认值是undefined，而undefined 的类型也是undefined
即：undefined又是值，又是一种类型，这种类型只有它自己一个值
```
1
typeof undefined; //undefined
```

变量声明提升的情况

在变量声明提升时，变量的值也是undefined。

Null类型#

null类型是什么

null表示“空”，它是“空对象”
当我们需要将对象销毁、数组销毁或者删除事件监听时，通常将它们设置为null。

用typeof检测null结果是object

使用typeof检测null值，结果是object，这点尤其要注意
类型和typeof检测结果并不总是一一对应，比如数组用 typeof检测结果也是object

数据类型转换#

其他值 → 数字

使用Number()函数：

字符串 → 数字：纯数字字符串能变为数字，不是纯数字的字符串将转为NaN

1
Number('123'); // 123
2
Number('123.4'); // 123.4
3
Number('123年'); // NaN
4
Number('2e3'); // 2000
5
Number(''); // 0

布尔值 → 数字：true变为1，false变为0

1
Number(true); // 1
2
Number(false); //

undefined和null → 数字：undefined变为NaN null变为0

1
Number(undefined); // NaN
2
Number(null); // 0

使用parseInt() 函数：

parseInt()函数的功能是将字符串转为整数

1
parseInt('3.14'); // 3  parseInt()将自动截掉第一个非数字字符之后的所有字符
2
parseInt('3.14是圆周率'); // 3 所有文字都将被截掉
3
parseInt('圆周率是3.14'); // NaN  如果字符串不是以数字开头，则转为NaN
4
parseInt('3.99'); // 3 parseInt()函数不四舍五入

使用parseFloat() 函数

parseFloat()函数的功能是将字符串转为浮点数

1
parseFloat('3.14'); // 3.14 parseFloat()可以将小数字符串转为数字小数
2
parseFloat('3.14是圆周率'); // 3.14 parseFloat()将自动截掉第一个非数字字符、非小数点之后的所有字符
3
parseFloat('圆周率是3.14'); // NaN  如果字符串并不是以数字开头，则转为NaN
4
parseFloat('3.99'); // 3.99  不四舍五入

其他值 → 字符串

使用String()函数：

数字 → 字符串：变为“长得相同”的字符串。科学计数法和非10进制数字会转为10进制的值。

1
String(123); // '123'
2
String(123.4); // '123.4'
3
String(2e3); // '2000'
4
String(NaN); // 'NaN'
5
String(Infinity); // 'Infinity'
6
String(0xf); // '15'

布尔值 → 字符串：变为“长得相同”的字符串

1
String(true); // 'true'
2
String(false); // 'false'

undefined和null → 字符串：变为“长得相同”的字符串

1
String(undefined); // 'undefined'
2
String(null); // 'null'

使用toString()方法：

几乎所有值都有toString()方法，功能是将值转为字符串

其他值 → 布尔值

使用Boolean ()函数

数字 → 布尔值：0和NaN转为false，其他数字都转为true

1
Boolean(123); // true
2
Boolean(0); // false
3
Boolean(NaN); // false
4
Boolean(Infinity); // true
5
Boolean(-Infinity); // true

布尔值 → 布尔值：空字符串变为false，其他都转为true

1
Boolean(''); // false
2
Boolean('abc'); // true
3
Boolean('false'); // true

undefined和null → 布尔值：转为false

1
Boolean(undefined); // false
2
Boolean(null); // false

10月18日随笔感悟

Sun, 18 Oct 2026 02:54:31 GMT

记录一下最近的一些小感悟：

学习编程基础真的就是在学习语数英、历史、地理、物理、化学、政治、生物九大课程一样，枯燥，重点在于内容特别多，记不住，一个小知识块能理解，但是过几天又会忘记，又得重新看；

而做项目就好比一场考试，把各种知识串联起来，但是前面说了，基础内容特别多记不住，又得看一下之前的，项目还有一点，必须建立一个工程思维，否则很难做好；

基于以上2点：基础依然需要巩固，但是项目应该从小项目Demo开始，通过Demo项目来串联知识点，对大项目也有一定帮助，起到一个承上启下的作用；

但是大项目这里需要注意，应该做有用的，能商业化的东西了，如之前的社区应用，使用vue3和koa实现起来基本完整，但是没有什么用，pc端网页端几乎已经淘汰，并且koa这个选型不太好。

这几天想做一个首页官网，然后再写一些产品，现在这个想法不太可靠，应该写一些闭环的产品，然后再去考虑首页官网，这样的首页官网才不会空洞，那闭环的产品也就是上面说的做有用的，能商业化的东西，而技术栈也选当下流行的Vue3+NestJs，再使用AI辅助，但是第一个或者前几个闭环产品不应该使用AI，只有自己能非常熟悉开发流程让AI介入，感觉才能事半功倍。

完…

Javascript基础语法与变量

Sun, 18 Oct 2026 02:07:31 GMT

前言#

基础的HTML和CSS已经学完，接下进入JavaScript的知识学习，大致可以分为JavaScript的核心语法、DOM、BOM、ES6语法这4大模块，其中核心语法和ES6是重点，至于DOM、BOM这两个，目前有像Vue和React的框架，可以不用深入过度学习，除非想做类似框架，除此之外还有移动端的事件，TypeScript这两个，TypeScript是重点，尤其是在使用Vue3、NestJS大量使用，

初识JavaScript#

前端三层

	语言	功能
结构层	HTML	搭建结构、放置部件、描述语义
样式层	CSS	美化页面、实现布局
行为层	JavaScript	实现交互效果、数据收发、表单验证等

JavaScript的历史

创始人：Brendan Eich（布兰登·艾奇）
netscape公司 1995年发明JavaScript，前身LiveScrip
JavaScript跟java没有关系，只是为了蹭java的热度

JavaScript垄断了浏览器端脚本

在JavaScript之前，还有VBScript、JScript脚本语言，但是随之时间推移，后两者都被淘汰

什么是前端语言和后端语言

前端页面用前端语言，数据处理需要使用后端语言
像HTML、CSS、JavaScript属于前端语言，java、php、python、nodejs属于后端
JavaScript属于前后端语言，既可以写前端也可以写后端

ECMAScript是JavaScript的标准

1997年，欧洲计算机制造商协会（ECMA）设置了 JavaScript的标准，命名为ECMAScript
JavaScript实现了ECMAScript，ECMAScript规范了JavaScript

JavaScript体系

语言核心：ES5、ES6、ES7……
DOM
BOM

JS的书写位置

在body中script标签，在内部书写JavaScript代码
将代码单独保存为.js格式文件，然后在HTML文件中引入它

认识输出语句

alert()语句 - 弹出警告框
console.log()语句 - 控制台输出

学会处理报错

alert(‘慕课网’)；不小心写成了中文分号

1
Uncaught SyntaxError: Invalid or unexpected token;//未捕获的语法错误：不合法或错误的符号

alert(慕课网); 忘记用引号包裹

1
Uncaught ReferenceError: 慕课网 is not defined;//未捕获的引用错误：慕课网没有被定义

alret(慕课网); 错误拼写alert

1
Uncaught ReferenceError: alret is not defined;//未捕获的引用错误：alret没有被定义

REPL环境

read读->eval执行->print打印->loop循环->read读->eval执行->print打印->loop循环->

变量#

变量是什么

变量是在内存中存储值的符号
变量不是数值本身，它们仅仅是一个用于存储数值的容器

定义变量

要想使用变量，第一步就是声明它，并给它赋值
```
1
var a = 5;
```

变量的使用

变量被赋值后，就可以使用它了；变量使用时不能使用引号
```
1
console.log(a);
```

变量的默认值

一个变量只定义，但没有赋初值，默认值是undefined
一个变量只有被var定义，并赋初值之后，才算正式初始化完成
```
1
var a = 10;
2
console.log(a); // undefined
3
a = 10;
4
console.log(a); // 10
```

变量的常见错误

不用var定义，而直接将值赋予它，虽不引发报错，但会产生作用域问题。
```
1
a = 10;
2
console.log(a); // 10；定义变量时必须写var
```
尝试使用一个既没有被var定义过，也没有赋过值的字符，就会产生引用错误。
```
1
console.log(b);// Reference Error；变量必须先赋值再使用
```

变量的合法命名

只能由字母、数字、下划线、$组成，但不能以数字开头
不能是关键字或保留字
大小写敏感，a和A两个不同的变量
函数、类名、对象的属性等也都要遵守这个命名规则

优秀的变量命名法

驼峰命名法：mathTestScore，不建议的命名：mathtestscore
c风格: math_test_score
匈牙利命名法：iMathTestScore

变量的值

变量的值可以被改变
```
1
var a = 10;
2
a = 18;
3
console.log(a); // 18
```
改变变量的值，不需要再次书写var

JS中的等号

等号表示赋值

变量声明

使用逗号同时声明和初始化两个变量
```
1
var a = 0, b = 0;
```

变量声明提升（重点）

变量声明的提升：你可以提前使用一个稍后才声明的变量，而不会引发异常

变量声明提升时，只提升变量的定义，不会提升它的值

1
// 先使用变量
2
console.log(a);//输出undefined
3
// 后定义变量
4
var a = 12;

相当于：

1
var a;
2
console.log(a);//输出undefined
3
a = 12

注意事项

变量声明的提升是JavaScript的特性，所以经常出面试题
在实际开发时，一定要先定义并给变量赋初值，然后再使用变量

Grid网格布局

Sat, 17 Oct 2026 00:19:04 GMT

前言#

一样的，在学习之前，搞懂一些匪夷所思的概念：

单元格和项目，学习之初，视频教程都会拿出一张无数常规的网格图片讲网格布局，这当然没问题，但是如果讲到单元格和项目，这时候就懵了，因为教程说的它们是不一样的，但是图片里面表现又一样，其实就是一个先入为主了，因为网格布局最常用的反而不像图片那样一张网格，而是会跨列跨行，所以可以理解单元格是一种虚无的东西，无形的大网，而项目是实实在在的东西，如果它们刚好落在每个单元格，那确实会像单元格=项目，而一般情况下，项目是会跨单元格的

网格线、轨道和间距也是一个比较难理解的地方：

Grid 基础知识#

CSS Grid（网格布局）是一种二维布局系统，能够同时控制元素在行（Row）和列（Column）两个方向上的排列。

使用 Grid 布局时，浏览器会建立一套网格结构，再根据布局规则将 HTML 元素放置到网格中。

Grid 容器和项目#

Grid 布局主要包含两个基本对象：

Grid 容器（Container）：设置了 display: grid 或 display: inline-grid 的元素。
Grid 项目（Item）：Grid 容器中参与网格布局的直接子元素。

1
<div class="container">
2
  <div class="item">项目1</div>
3
  <div class="item">项目2</div>
4
  <div class="item">项目3</div>
5
</div>
6
.container {
7
  display: grid;
8
  grid-template-columns: repeat(3, 100px);
9
  gap: 10px;
10
}

此时 .container 是 Grid 容器，三个 .item 是 Grid 项目，按照网格布局规则排列。

常见的容器属性和项目属性：

容器属性	项目属性
`grid-template-columns`	`grid-column`
`grid-template-rows`	`grid-row`
`grid-template-areas`	`grid-area`
`gap`	`justify-self`
`justify-items`	`align-self`
`align-items`	`order`

注意：容器负责定义和管理网格结构，项目则根据网格规则进行排列。

行、列和单元格#

Grid 会将布局空间划分为行（Row）和列（Column），两者交叉形成单元格（Cell）。

行（Row）：网格中水平方向的一排空间。
列（Column）：网格中垂直方向的一列空间。
单元格（Cell）：一行与一列交叉形成的最小网格空间。

例如，创建一个 2 行 3 列的网格：

1
.container {
2
  display: grid;
3
  grid-template-columns: 100px 200px 100px;
4
  grid-template-rows: 80px 120px;
5
}

这段代码定义了：

3 列：宽度分别为 100px、200px、100px。
2 行：高度分别为 80px、120px。
6 个单元格：每行 3 个，共 2 行。

单元格的尺寸由所在行、列的尺寸共同决定：

单元格位置	宽度	高度
第一行第一列	100px	80px
第一行第二列	200px	80px
第一行第三列	100px	80px
第二行第一列	100px	120px
第二行第二列	200px	120px
第二行第三列	100px	120px

单元格与项目的区别#

这是 Grid 布局中非常容易混淆的概念。

单元格是浏览器划分的布局空间，项目是实际参与布局的 HTML 元素。

它们之间并不一定是一一对应的关系。

情况一：一个项目占据一个单元格。

这是最常见的情况，项目默认自动排列，通常一个项目占据一个单元格。

情况二：一个项目占据多个单元格。

1
.item {
2
  grid-column: 1 / 3;
3
  grid-row: 1 / 3;
4
}

项目横跨 2 行、2 列，占据 4 个单元格。

需要注意，跨行、跨列不会真正合并单元格，只是让项目占据更大的网格区域。

情况三：存在没有项目的单元格。

即使没有对应的 HTML 元素，已经建立的网格中仍然可以存在空单元格。

因此，单元格和项目不能画等号。

网格线#

网格线（Grid Line）是用于划分网格和定位项目的参考线。

网格线分为两种：

列网格线：垂直方向的参考线，用于划分列。
行网格线：水平方向的参考线，用于划分行。

例如：

1
.container {
2
  display: grid;
3
  grid-template-columns: repeat(3, 100px);
4
  grid-template-rows: repeat(2, 80px);
5
}

这会形成：

网格结构	数量
行	2
列	3
行网格线	3
列网格线	4
单元格	6

在普通的显式网格中，某一方向的网格线数量 = 对应方向的轨道数量 + 1。

网格线的作用#

网格线最主要的用途是确定项目的起始位置和结束位置，从而实现跨行、跨列布局。

例如：

1
.item {
2
  grid-column: 1 / 3;
3
  grid-row: 1 / 3;
4
}

grid-column: 1 / 3：从第 1 条列网格线到第 3 条列网格线，横跨 2 列。
grid-row: 1 / 3：从第 1 条行网格线到第 3 条行网格线，纵跨 2 行。

也可以使用 span 表示跨越的轨道数量：

1
.item {
2
  grid-column: span 2;
3
  grid-row: span 2;
4
}

两种方式的区别：

1 / 3：指定起始和结束网格线。
span 2：指定跨越 2 条轨道，起始位置可以由自动布局确定。

网格线能不能自定义？#

可以为网格线命名：

1
.container {
2
  display: grid;
3
  grid-template-columns:
4
    [start] 100px
5
    [middle] 200px
6
    [end];
7
}
8

9
.item {
10
  grid-column: start / end;
11
}

不过网格线属于抽象的布局参考线，并不是真正显示出来的 CSS 边框，不能直接像 border 一样设置颜色和线条样式。

其他（间距、区域、内容、轨道）#

1. 间距（Gap）#

间距用于控制相邻行轨道、列轨道之间的距离。

常见属性：

属性	说明
`row-gap`	行轨道之间的间距
`column-gap`	列轨道之间的间距
`gap`	两者的简写

1
.container {
2
  display: grid;
3
  grid-template-columns: 100px 200px;
4
  grid-template-rows: 80px 120px;
5
  gap: 10px 20px;
6
}

这里：

行间距：10px。
列间距：20px。

间距到底占不占单元格的空间？

间距不属于单元格，也不计入普通轨道自身的尺寸。

但是，间距会占据整个网格中的空间。

例如：

1
.container {
2
  display: grid;
3
  grid-template-columns: 100px 200px;
4
  column-gap: 20px;
5
}

显式网格的总宽度为：

1
100px + 20px + 200px = 320px

其中 20px 是额外的轨道间距，两个列轨道仍然分别宽 100px 和 200px。

如果使用 1fr 等弹性轨道，在空间受限时，浏览器会先考虑间距，再将剩余可分配空间分给弹性轨道。

间距与网格线的关系

CSS Grid 规范中，可以将 gap 形象地理解为网格线具有了厚度。

但要注意：

这只是布局计算层面的理解。
不意味着网格线真的变成了可见的粗线。
也不能认为网格线等于轨道宽度加间距。

2. 区域（Area）#

网格区域（Grid Area）是由四条网格线限定的矩形空间，可以包含一个或多个单元格。

可以通过 grid-template-areas 为区域命名：

1
<div class="container">
2
  <header class="header">头部</header>
3
  <main class="main">主体</main>
4
  <aside class="aside">侧边栏</aside>
5
</div>
6
.container {
7
  display: grid;
8
  grid-template-columns: 100px 200px 100px;
9
  grid-template-rows: 80px 120px;
10
  gap: 10px;
11

12
  grid-template-areas:
13
    "header header aside"
14
    "main   main   aside";
15
}
16

17
.header {
18
  grid-area: header;
19
}
20

21
.main {
22
  grid-area: main;
23
}
24

25
.aside {
26
  grid-area: aside;
27
}

展开收起

这里虽然只有三个项目，但实际上建立了 2 行 3 列，共 6 个单元格。

header：占据第一行的前两个单元格。
main：占据第二行的前两个单元格。
aside：占据第三列的两个单元格。

注意：

区域并不一定要通过 **grid-template-areas** 命名。

通过 grid-column 和 grid-row 指定的矩形范围，同样是网格区域。

单元格可以理解为最小的网格区域，而更大的区域则可以包含多个单元格及它们之间的间距。

3. 内容（Content）#

内容通常指项目内部的文字、图片、按钮等实际内容，而不是另一种网格结构。

例如：

1
<div class="container">
2
  <div class="item">
3
    <h3>文章标题</h3>
4
    <p>文章内容</p>
5
  </div>
6
</div>

这里：

.container：Grid 容器。
.item：Grid 项目。
h3 和 p：项目内部的内容元素。

内容会影响元素自身的尺寸，并可能影响使用 auto 等尺寸规则的轨道。

Grid 还提供了对齐相关属性：

属性	说明
`justify-items`	控制项目在其网格区域内的行内方向对齐
`align-items`	控制项目在其网格区域内的块级方向对齐
`justify-content`	控制整个网格轨道集合在容器内的行内方向对齐或分布
`align-content`	控制整个网格轨道集合在容器内的块级方向对齐或分布

常见的水平书写模式下，行内方向通常是水平，块级方向通常是垂直。

需要区分：项目的对齐与项目内部文字的对齐不是同一回事。

4. 轨道（Track）#

轨道是 Grid 布局中用于定义行、列空间尺寸的概念。

轨道分为两种：

列轨道（Column Track）：两条相邻列网格线之间的列空间，其宽度决定这一列单元格的宽度。
行轨道（Row Track）：两条相邻行网格线之间的行空间，其高度决定这一行单元格的高度。

例如：

1
.container {
2
  display: grid;
3
  grid-template-columns: 100px 200px 100px;
4
  grid-template-rows: 80px 120px;
5
}

这里建立了：

3 条列轨道。
2 条行轨道。
6 个单元格。

轨道与单元格有什么区别？

可以借助 Excel 来理解：

轨道类似 Excel 中的一整行或一整列。
单元格类似 Excel 中行与列交叉形成的格子。

不过轨道并不是将单元格的宽度或高度累加起来得到的。

例如第一列宽 100px，那么该列每个单元格都宽 100px，而不是整列所有单元格宽度加起来为 100px。

轨道与间距有什么关系？

轨道是相邻、平行网格线之间的带状空间，不能把它理解成一节一节的独立盒子。

列轨道纵向延伸时会经过行间距，行轨道横向延伸时也会经过列间距。

但：

列轨道的宽度不包含 column-gap。
行轨道的高度不包含 row-gap。

因此，虽然间距会影响整个网格的尺寸，但不会直接计入普通轨道自身的宽度或高度。

总结#

概念	通俗理解	主要作用
容器（Container）	网格布局的外层元素	建立网格布局
项目（Item）	放入网格中的 HTML 元素	参与排列、定位和跨行跨列
行（Row）	横向的一排	组织网格结构
列（Column）	纵向的一列	组织网格结构
单元格（Cell）	最小的格子	提供基本网格空间
网格线（Line）	看不见的定位参考线	划分轨道、定位项目
轨道（Track）	一条行或列空间	定义行高、列宽
间距（Gap）	相邻轨道之间的空隙	分隔行与列
区域（Area）	一个或多个单元格构成的矩形空间	表示项目可以占据的范围
内容（Content）	项目内部的文字、图片等	组成实际页面内容

最需要记住的三个区别：

单元格 ≠ 项目：单元格是布局空间，项目是实际元素。
轨道 ≠ 间距：轨道定义行高、列宽，间距是相邻轨道之间额外的空间。
网格线 ≠ 轨道：网格线是参考边界，轨道是相邻网格线之间的空间。

最后，可以把 Grid 的整个工作过程概括为：

容器建立网格 → 轨道定义行列尺寸 → 行列交叉形成单元格 → 网格线用于定位 → 项目占据对应的网格区域。

gap 负责相邻轨道之间的留白，而项目内部的内容最终构成我们看到的页面。

理解这些概念后，再学习 Grid 容器属性、项目属性以及实际布局，就会清晰很多。

Grid 容器的属性#

Grid 容器属性主要用于定义网格的行列结构、轨道尺寸、排列方向、间距以及项目的对齐方式。

一、display#

通过 display 属性创建 Grid 容器，使其直接子元素按照网格布局规则排列。

属性值	说明
`grid`	创建块级 Grid 容器
`inline-grid`	创建行内级 Grid 容器

1
.container {
2
  display: grid;
3
}

两者的区别：

display: grid：容器在外部表现为块级元素，内部使用 Grid 布局。
display: inline-grid：容器在外部表现为行内级元素，内部同样使用 Grid 布局。

注意：设置 display: grid 后，即使没有定义行列，浏览器也会根据布局规则自动创建网格轨道。

二、grid-template-rows / grid-template-columns#

这两个属性用于定义 Grid 显式网格的行列轨道及其尺寸。

属性	说明
`grid-template-columns`	定义列轨道及其宽度
`grid-template-rows`	定义行轨道及其高度

1. 基本使用#

1
.container {
2
  display: grid;
3
  grid-template-columns: 100px 200px 100px;
4
  grid-template-rows: 80px 120px;
5
}

表示：

3 条列轨道：宽度分别为 100px、200px、100px。
2 条行轨道：高度分别为 80px、120px。
两者交叉形成 6 个单元格。

注意：定义了 6 个单元格，不代表必须有 6 个项目。 即使只有两个 HTML 子元素，这套网格结构仍然存在。

2. 常用属性值#

属性值	说明
`100px`	固定轨道尺寸
`50%`	相对于 Grid 容器对应的尺寸计算百分比
`auto`	根据可用空间、内容等规则确定尺寸
`1fr`	使用一份弹性空间
`repeat()`	重复定义轨道
`minmax()`	指定轨道尺寸范围

fr 单位

fr 表示分配给弹性轨道的空间份额。

1
.container {
2
  display: grid;
3
  grid-template-columns: 1fr 2fr 1fr;
4
}

在空间充足且没有额外尺寸限制的情况下，三列按照 1:2:1 分配可用空间。

repeat() 函数

用于简化重复的轨道定义。

1
.container {
2
  display: grid;
3
  grid-template-columns: repeat(3, 100px);
4
}

等价于：

1
grid-template-columns: 100px 100px 100px;

minmax() 函数

用于设置轨道尺寸的最小值和最大值。

1
.container {
2
  display: grid;
3
  grid-template-columns: repeat(3, minmax(100px, 1fr));
4
}

每列最小宽度为 100px，空间充足时可以弹性扩展。

需要注意，最小尺寸限制可能导致网格在容器较窄时溢出。

三、grid-auto-flow#

grid-auto-flow 用于控制没有明确指定位置的 Grid 项目如何自动排列。

属性值	说明
`row`	默认值，优先沿行方向依次排列
`column`	优先沿列方向依次排列
`row dense`	按行排列，并尝试用后续项目填补空位
`column dense`	按列排列，并尝试用后续项目填补空位

1. row（默认）#

1
.container {
2
  display: grid;
3
  grid-template-columns: repeat(3, 100px);
4
  grid-auto-flow: row;
5
}

假设有 6 个项目：

1
┌───┬───┬───┐
2
│ 1 │ 2 │ 3 │
3
├───┼───┼───┤
4
│ 4 │ 5 │ 6 │
5
└───┴───┴───┘

项目优先从左到右排列，当前行无法继续放置时，自动进入下一行。

2. column#

1
.container {
2
  display: grid;
3
  grid-template-rows: repeat(3, 80px);
4
  grid-auto-flow: column;
5
  grid-auto-columns: 100px;
6
}

假设有 6 个项目：

1
┌───┬───┐
2
│ 1 │ 4 │
3
├───┼───┤
4
│ 2 │ 5 │
5
├───┼───┤
6
│ 3 │ 6 │
7
└───┴───┘

项目优先沿列方向排列，当前列无法继续放置时，自动进入下一列。

3. dense#

1
.container {
2
  display: grid;
3
  grid-template-columns: repeat(3, 100px);
4
  grid-auto-flow: row dense;
5
}

当某些项目跨越多列而产生空位时，dense 会尝试使用后续能够放入空位的项目进行填补。

注意：dense 可能导致项目的视觉排列顺序与 HTML 源码顺序不同，因此需要考虑键盘导航和阅读顺序。

四、grid-auto-rows / grid-auto-columns#

这两个属性用于控制隐式网格轨道（Implicit Tracks）的尺寸。

属性	说明
`grid-auto-rows`	设置自动创建的隐式行轨道尺寸
`grid-auto-columns`	设置自动创建的隐式列轨道尺寸

1. 显式网格和隐式网格#

显式网格：通过 grid-template-columns、grid-template-rows 等属性明确定义的网格。
隐式网格：当现有显式网格无法容纳项目，或项目被定位到显式网格之外时，浏览器自动补充的网格轨道。

2. grid-auto-rows#

1
.container {
2
  display: grid;
3
  grid-template-columns: repeat(3, 100px);
4
  grid-auto-rows: 80px;
5
  gap: 10px;
6
}

这里明确规定了三列，但没有定义显式行轨道。

浏览器会根据项目数量自动创建行，每条自动创建的行轨道高 80px。

例如有 9 个项目，就会自动排列成 3 行 3 列。

3. grid-auto-columns#

1
.container {
2
  display: grid;
3
  grid-template-rows: repeat(2, 100px);
4
  grid-auto-flow: column;
5
  grid-auto-columns: 150px;
6
  gap: 10px;
7
}

这里定义了两行，项目按照列方向排列。

当需要新的列时，浏览器会自动创建隐式列轨道，每列宽 150px。

容易混淆的区别：

grid-template-rows / columns：定义显式网格轨道。
grid-auto-rows / columns：控制自动创建的隐式轨道尺寸。
grid-auto-flow：控制项目的自动放置方向及是否尝试填补空位。

grid-auto-rows 和 grid-auto-columns 并不是用来指定创建多少行、多少列的。

五、row-gap / column-gap / gap#

这三个属性用于设置相邻网格轨道之间的间距。

属性	说明
`row-gap`	行轨道之间的间距
`column-gap`	列轨道之间的间距
`gap`	两者的简写属性

1. 基本使用#

1
.container {
2
  display: grid;
3
  grid-template-columns: repeat(3, 100px);
4
  grid-template-rows: repeat(2, 80px);
5

6
  row-gap: 10px;
7
  column-gap: 20px;
8
}

可以简写为：

1
.container {
2
  gap: 10px 20px;
3
}

其中：

第一个值：row-gap。
第二个值：column-gap。

如果只设置一个值：

1
.container {
2
  gap: 10px;
3
}

表示行间距、列间距均为 10px。

2. 间距和轨道的关系#

1
.container {
2
  display: grid;
3
  grid-template-columns: 100px 200px;
4
  column-gap: 20px;
5
}

网格在列方向上的总尺寸为：

1
100px + 20px + 200px = 320px

注意：

gap 不属于单元格，也不计入普通轨道自身的尺寸。
固定尺寸的轨道不会因为设置 gap 而自动缩小。
如果轨道使用 fr 等弹性尺寸，则需要在分配可用空间时考虑 gap。
当项目跨越多条轨道时，其占据的网格区域包含中间的 gap。

从布局计算角度，也可以把 gap 想象成网格线具有了厚度，但网格线并不是真实可见的边框。

六、grid-template-areas#

grid-template-areas 用于通过名称定义网格区域，让布局结构更加直观。

通常与项目属性 grid-area 配合使用。

1. 基本使用#

1
<div class="container">
2
  <header class="header">头部</header>
3
  <main class="main">主体</main>
4
  <aside class="aside">侧边栏</aside>
5
  <footer class="footer">底部</footer>
6
</div>
7
.container {
8
  display: grid;
9

10
  grid-template-columns: 200px 1fr;
11
  grid-template-rows: 80px 1fr 60px;
12

13
  grid-template-areas:
14
    "header header"
15
    "aside  main"
16
    "footer footer";
17

18
  gap: 10px;
19
  min-height: 500px;
20
}
21

22
.header {
23
  grid-area: header;
24
}
25

26
.main {
27
  grid-area: main;
28
}
29

30
.aside {
31
  grid-area: aside;
32
}
33

34
.footer {
35
  grid-area: footer;
36
}

展开收起

布局结构为：

1
┌─────────────────┐
2
│      header     │
3
├───────┬─────────┤
4
│ aside │  main   │
5
├───────┴─────────┤
6
│      footer     │
7
└─────────────────┘

2. 使用规则#

同名区域必须组成一个连续的矩形。
一个区域可以占据一个或多个单元格。
使用 . 可以表示不属于任何命名区域的单元格。
每行必须声明相同数量的单元格名称或占位符。
grid-template-areas 可以建立显式网格结构，即使没有另外设置行高、列宽。

例如：

1
grid-template-areas:
2
  "header header"
3
  "main   .";

其中 . 表示未命名的单元格。

注意：区域不是新的 HTML 元素，也不会真正合并单元格，只是定义了项目可以占据的网格空间。

七、align-items / justify-items / place-items#

这三个属性用于控制 Grid 项目在各自网格区域内的对齐方式。

属性	说明
`align-items`	控制项目在块级方向的对齐，常见水平书写模式下为垂直方向
`justify-items`	控制项目在行内方向的对齐，常见水平书写模式下为水平方向
`place-items`	两者的简写属性

1. 常用属性值#

属性值	说明
`normal`	默认值，在常见 Grid 场景中通常表现为拉伸
`start`	靠起始位置对齐
`end`	靠结束位置对齐
`center`	居中对齐
`stretch`	拉伸项目以填充可用空间，受尺寸约束影响

2. 基本使用#

1
.container {
2
  display: grid;
3
  grid-template-columns: repeat(3, 150px);
4
  grid-template-rows: 150px;
5

6
  align-items: center;
7
  justify-items: center;
8
}

表示让所有项目在各自的网格区域内水平、垂直居中。

可以简写为：

1
.container {
2
  place-items: center;
3
}

3. place-items 的两个值#

1
.container {
2
  place-items: start end;
3
}

等价于：

1
.container {
2
  align-items: start;
3
  justify-items: end;
4
}

第一个值控制 **align-items**，第二个值控制 **justify-items**。

注意：

这三个都是容器属性，统一控制项目在网格区域中的对齐方式。

如果希望单独控制某个项目，可以使用项目属性：

align-self
justify-self
place-self

另外，项目的对齐不等于项目内部文字的对齐。

八、align-content / justify-content / place-content#

这三个属性用于控制整个网格轨道集合在容器中的对齐和分布方式。

与 *-items 不同，*-content 调整的是网格轨道整体的位置或间距。

属性	说明
`align-content`	控制网格轨道集合在块级方向上的对齐和分布
`justify-content`	控制网格轨道集合在行内方向上的对齐和分布
`place-content`	两者的简写属性

1. 常用属性值#

属性值	说明
`normal`	默认值，在常见 Grid 场景中效果通常接近 `stretch`
`start`	靠起始位置排列
`end`	靠结束位置排列
`center`	居中排列
`space-between`	首尾贴边，剩余空间分布在轨道之间
`space-around`	每条轨道两侧分配相等的空间份额
`space-evenly`	轨道之间及两端的空隙相等
`stretch`	在适用条件下拉伸可自动调整尺寸的轨道

2. 基本使用#

1
.container {
2
  display: grid;
3

4
  width: 500px;
5
  height: 400px;
6

7
  grid-template-columns: repeat(2, 100px);
8
  grid-template-rows: repeat(2, 80px);
9

10
  gap: 10px;
11

12
  align-content: center;
13
  justify-content: center;
14
}

这里网格轨道集合的宽度为 210px，高度为 170px。

由于容器宽 500px、高 400px，还存在剩余空间，因此可以将整个网格居中。

可以简写为：

1
.container {
2
  place-content: center;
3
}

3. place-content 的两个值#

1
.container {
2
  place-content: start center;
3
}

等价于：

1
.container {
2
  align-content: start;
3
  justify-content: center;
4
}

4. items 和 content 的区别#

这是 Grid 中容易混淆的一组属性。

对比	`*-items`	`*-content`
控制对象	各个 Grid 项目	整个网格轨道集合
主要作用	控制项目在网格区域中的对齐	控制轨道集合在容器中的对齐和分布
常见用法	`place-items: center`	`place-content: center`
是否控制项目内部文字	否	否

简单记忆：

items：调整项目的位置。
content：调整网格轨道整体的位置及分布。

注意：align-content、justify-content 并不是任何时候都能明显改变布局。

例如，使用 1fr 的轨道可能已经占满可用空间，此时没有剩余空间供这些属性分配，对齐效果就可能不明显。

九、grid-template / grid#

这两个都是 Grid 的简写属性，用于同时设置多个网格布局相关属性。

1. grid-template#

grid-template 是以下三个属性的简写：

grid-template-rows
grid-template-columns
grid-template-areas

基本写法：

1
.container {
2
  display: grid;
3

4
  grid-template:
5
    80px 120px
6
    / 100px 200px;
7
}

等价于：

1
.container {
2
  grid-template-rows: 80px 120px;
3
  grid-template-columns: 100px 200px;
4
}

也可以同时定义命名区域：

1
.container {
2
  display: grid;
3

4
  grid-template:
5
    "header header" 80px
6
    "aside main" 1fr
7
    / 200px 1fr;
8
}

这里：

第一行高 80px。
第二行占据剩余的弹性空间。
第一列宽 200px。
第二列使用 1fr。
同时定义了 header、aside、main 三个区域。

2. grid#

grid 是范围更广的简写属性，可以同时设置显式网格和隐式网格相关配置。

它涉及：

grid-template-rows
grid-template-columns
grid-template-areas
grid-auto-rows
grid-auto-columns
grid-auto-flow

例如：

1
.container {
2
  display: grid;
3

4
  grid: 80px 120px / 100px 200px;
5
}

这会定义两条显式行轨道和两条显式列轨道，同时将相关的其他 Grid 子属性重置为初始值。

3. 两者的区别#

属性	作用
`grid-template`	主要定义显式网格的行、列及命名区域
`grid`	既能定义显式网格，也能配置部分隐式网格规则

注意：

grid 的写法较灵活，但语法也更复杂。
grid 不包含 gap、align-items、justify-items 等对齐和间距属性。
使用简写时要注意其他相关子属性可能被重置。

实际开发中，通常更推荐分别使用 grid-template-columns、grid-template-rows、grid-auto-flow 等属性，方便阅读和维护。

总结#

属性	核心作用
`display`	创建 Grid 容器
`grid-template-rows`	定义显式行轨道及其高度
`grid-template-columns`	定义显式列轨道及其宽度
`grid-auto-flow`	控制自动放置项目的方向和填补规则
`grid-auto-rows`	设置隐式行轨道尺寸
`grid-auto-columns`	设置隐式列轨道尺寸
`row-gap`	设置行轨道间距
`column-gap`	设置列轨道间距
`gap`	设置行、列轨道间距
`grid-template-areas`	定义命名网格区域
`align-items`	控制项目在块级方向的对齐
`justify-items`	控制项目在行内方向的对齐
`place-items`	简写项目对齐方式
`align-content`	控制轨道集合在块级方向的对齐和分布
`justify-content`	控制轨道集合在行内方向的对齐和分布
`place-content`	简写轨道集合的对齐和分布方式
`grid-template`	显式网格结构的简写
`grid`	显式及隐式网格相关配置的综合简写

Grid 容器属性可以归纳为四类：

结构与尺寸：定义行列轨道及其宽高。
自动排列：决定项目如何自动放置，以及隐式轨道如何确定尺寸。
间距与区域：控制轨道间隔和项目的布局区域。
对齐与分布：控制项目在网格区域中的位置，以及网格轨道整体在容器中的位置。

理解这四类属性的职责后，Grid 容器属性就不再是零散的 CSS 语法，而是一套有明确分工的布局规则。

Grid 项目的属性#

Grid 项目属性主要用于控制项目在网格中的位置、跨行跨列的范围，以及项目在网格区域内的对齐方式。

Grid 项目通常是 Grid 容器中参与网格布局的直接子元素。

一、grid-column-start / grid-column-end / grid-row-start / grid-row-end#

这四个属性用于通过**网格线（Grid Line）**确定项目的起始位置和结束位置。

属性	说明
`grid-column-start`	项目在列方向的起始网格线
`grid-column-end`	项目在列方向的结束网格线
`grid-row-start`	项目在行方向的起始网格线
`grid-row-end`	项目在行方向的结束网格线

1. 基本使用#

首先创建一个 3 行 3 列的网格：

1
.container {
2
  display: grid;
3
  grid-template-columns: repeat(3, 100px);
4
  grid-template-rows: repeat(3, 100px);
5
  gap: 10px;
6
}

然后指定项目的位置：

1
.item {
2
  grid-column-start: 1;
3
  grid-column-end: 3;
4
  grid-row-start: 1;
5
  grid-row-end: 3;
6
}

表示：

列方向：从第 1 条列网格线到第 3 条列网格线，跨越 2 列。
行方向：从第 1 条行网格线到第 3 条行网格线，跨越 2 行。
最终项目占据 2 行 2 列，共 4 个单元格对应的矩形区域。

注意：指定的是网格线编号，而不是单元格编号。

例如一个 3 行 3 列的显式网格，在两个方向上分别有 4 条网格线。

2. 常用属性值#

属性值	说明
`auto`	默认值，由自动布局规则确定位置或范围
`1`、`2`、`3`	指定网格线编号
`-1`	从显式网格末端反向编号，表示最后一条显式网格线
`span 2`	从相应位置跨越 2 条轨道
`header`	引用符合规则的命名网格线或区域名称

例如：

1
.item {
2
  grid-column-start: 1;
3
  grid-column-end: span 2;
4
}

表示项目从第 1 条列网格线开始，横跨 2 列。

还可以通过负数引用显式网格的末端网格线：

1
.item {
2
  grid-column-start: 1;
3
  grid-column-end: -1;
4
}

这里表示从第 1 条列网格线延伸到显式网格的最后一条列网格线。

二、grid-column / grid-row#

grid-column 和 grid-row 是起始、结束网格线属性的简写。

简写属性	对应属性
`grid-column`	`grid-column-start`、`grid-column-end`
`grid-row`	`grid-row-start`、`grid-row-end`

1. 基本使用#

1
.item {
2
  grid-column: 1 / 3;
3
  grid-row: 1 / 3;
4
}

等价于：

1
.item {
2
  grid-column-start: 1;
3
  grid-column-end: 3;
4

5
  grid-row-start: 1;
6
  grid-row-end: 3;
7
}

其中 / 用于分隔起始位置和结束位置。

2. 常见写法#

写法	说明
`grid-column: 1 / 3`	从第 1 条列网格线到第 3 条，跨越 2 列
`grid-column: 1 / 4`	从第 1 条列网格线到第 4 条，跨越 3 列
`grid-column: 2`	从第 2 条列网格线开始，通常跨越 1 列
`grid-column: 1 / span 2`	从第 1 条列网格线开始，跨越 2 列
`grid-column: span 2`	跨越 2 列，起始位置可由自动布局确定
`grid-column: 1 / -1`	从第 1 条列网格线到显式网格最后一条列网格线

grid-row 的使用方式相同，只是控制行方向。

3. 跨列和跨行#

跨列：

1
.item {
2
  grid-column: span 2;
3
}

表示项目横跨 2 条列轨道。

跨行：

1
.item {
2
  grid-row: span 2;
3
}

表示项目横跨 2 条行轨道。

同时跨行、跨列：

1
.item {
2
  grid-column: 1 / 3;
3
  grid-row: 1 / 3;
4
}

表示项目占据一个 2 行 2 列的矩形区域。

需要注意：

项目跨越多个单元格，并不意味着单元格被真正合并。
项目跨越的区域包含中间的 gap。
项目定位后，如果与其他项目占据相同区域，可能发生重叠。

三、grid-area#

grid-area 用于指定 Grid 项目所在的网格区域。

它既可以引用命名区域，也可以作为四个网格线定位属性的简写。

1. 使用命名区域#

首先通过容器属性 grid-template-areas 定义区域：

1
.container {
2
  display: grid;
3

4
  grid-template-columns: 200px 1fr;
5
  grid-template-rows: 80px 200px;
6

7
  grid-template-areas:
8
    "header header"
9
    "aside  main";
10
}

然后通过项目属性 grid-area 指定位置：

1
.header {
2
  grid-area: header;
3
}
4

5
.aside {
6
  grid-area: aside;
7
}
8

9
.main {
10
  grid-area: main;
11
}

其中：

header：占据第一行的两列。
aside：占据第二行第一列。
main：占据第二行第二列。

**grid-template-areas** 是容器属性，**grid-area** 是项目属性。

2. 使用网格线定位#

grid-area 还可以直接指定四条网格线：

1
.item {
2
  grid-area: 1 / 2 / 3 / 4;
3
}

其顺序为：

1
grid-area:
2
  row-start / column-start / row-end / column-end;

对应：

1
.item {
2
  grid-row-start: 1;
3
  grid-column-start: 2;
4
  grid-row-end: 3;
5
  grid-column-end: 4;
6
}

表示项目：

从第 1 条行网格线到第 3 条行网格线。
从第 2 条列网格线到第 4 条列网格线。

最终横跨 2 行、2 列。

3. grid-area 与 grid-column、grid-row 的区别#

属性	作用
`grid-column`	控制项目在列方向的位置与范围
`grid-row`	控制项目在行方向的位置与范围
`grid-area`	可以同时控制行列位置，也可以引用命名区域

例如：

1
.item {
2
  grid-column: 2 / 4;
3
  grid-row: 1 / 3;
4
}

可以写成：

1
.item {
2
  grid-area: 1 / 2 / 3 / 4;
3
}

注意：区域是布局空间，项目是实际元素。使用 **grid-area** 不会真正创建或合并 HTML 元素。

四、align-self / justify-self / place-self#

这三个属性用于控制单个 Grid 项目在其网格区域内的对齐方式。

属性	说明
`align-self`	控制项目在块级方向上的对齐，通常是垂直方向
`justify-self`	控制项目在行内方向上的对齐，通常是水平方向
`place-self`	两者的简写属性

这里的水平、垂直方向是基于常见的水平书写模式而言的。

1. 常用属性值#

属性值	说明
`auto`	默认值，继承容器对应的 `align-items` 或 `justify-items` 效果
`start`	靠网格区域的起始位置对齐
`end`	靠网格区域的结束位置对齐
`center`	在网格区域内居中
`stretch`	拉伸项目以填充对应方向的可用空间，受尺寸限制影响

2. align-self#

用于控制单个项目在块级方向上的对齐。

1
.container {
2
  display: grid;
3
  grid-template-columns: repeat(3, 150px);
4
  grid-template-rows: 150px;
5
}
6

7
.item {
8
  align-self: center;
9
}

在常见水平书写模式下，项目会在所在网格区域内垂直居中。

3. justify-self#

用于控制单个项目在行内方向上的对齐。

1
.item {
2
  justify-self: center;
3
}

在常见水平书写模式下，项目会在所在网格区域内水平居中。

4. place-self#

place-self 是 align-self 和 justify-self 的简写属性。

1
.item {
2
  place-self: center;
3
}

等价于：

1
.item {
2
  align-self: center;
3
  justify-self: center;
4
}

也可以指定两个值：

1
.item {
2
  place-self: start end;
3
}

等价于：

1
.item {
2
  align-self: start;
3
  justify-self: end;
4
}

第一个值对应 **align-self**，第二个值对应 **justify-self**。

5. items 和 self 的区别#

Grid 容器属性中还有一组非常相似的属性：

align-items
justify-items
place-items

它们和项目属性的对应关系如下：

容器属性	项目属性
`align-items`	`align-self`
`justify-items`	`justify-self`
`place-items`	`place-self`

区别：

*-items：设置在 Grid 容器上，统一控制项目的对齐。
*-self：设置在 Grid 项目上，单独控制某个项目的对齐。

例如：

1
.container {
2
  display: grid;
3
  grid-template-columns: repeat(3, 150px);
4
  grid-template-rows: 150px;
5

6
  place-items: center;
7
}
8

9
.item-2 {
10
  place-self: start;
11
}

这里所有项目默认在各自的网格区域内居中，但 .item-2 单独靠起始位置对齐。

注意：

这组属性控制的是项目自身在网格区域中的对齐，不是项目内部文字的对齐。

如果项目设置了固定宽高，对齐效果通常更容易观察；如果项目默认拉伸填充整个网格区域，视觉上可能不容易看出位置变化。

总结#

属性	主要作用
`grid-column-start`	设置列方向起始网格线
`grid-column-end`	设置列方向结束网格线
`grid-row-start`	设置行方向起始网格线
`grid-row-end`	设置行方向结束网格线
`grid-column`	简写列方向的起始、结束网格线
`grid-row`	简写行方向的起始、结束网格线
`grid-area`	指定命名区域或简写四条网格线
`align-self`	单独控制项目在块级方向上的对齐
`justify-self`	单独控制项目在行内方向上的对齐
`place-self`	简写项目自身的两个方向对齐方式

Grid 项目属性可以归纳为两个类别：

位置与范围：通过 grid-column-*、grid-row-*、grid-area 决定项目放在哪里、占据多少行列。
自身对齐：通过 align-self、justify-self、place-self 控制项目在所占网格区域中的位置。

最重要的是区分：

网格定位：项目占据网格中的哪一块区域。
项目对齐：项目在已经占据的区域内如何对齐。

简单理解：先通过网格线确定项目的布局区域，再通过对齐属性调整项目在该区域中的位置。

响应式布局

Fri, 16 Oct 2026 01:47:53 GMT

前言#

响应式布局是2010年5月由Ethan Marcotte提出的一个概念，本质就是一个网站兼容多端，对不同尺寸的屏幕做出响应，并进行相应布局;既然是概念，那解决的方案是什么，答案就是媒体查询

媒体查询#

媒体查询（Media Queries）是 CSS 实现响应式布局的重要技术，可以根据媒体类型、视口宽度、设备方向等条件，为页面应用不同的 CSS 样式。

基础语法#

使用 @media 定义媒体查询。

1
@media 媒体类型 and (媒体特性) {
2
  /* 满足条件时生效的 CSS 样式 */
3
}
4

5
/* 屏幕视口宽度 >= 768px 时生效 */
6
@media screen and (min-width: 768px) {
7
  .box {
8
    width: 50%;
9
  }
10
}

媒体类型

媒体类型（Media Type）用于指定 CSS 样式应用于哪一类设备或输出媒介。

媒体类型	说明
`all`	所有设备，默认值
`screen`	屏幕设备，包括手机、平板、电脑等
`print`	打印设备及打印预览

使用示例：

1
/* 所有设备 */
2
@media all {
3
  .box {
4
    color: red;
5
  }
6
}
7

8
/* 屏幕设备 */
9
@media screen {
10
  .box {
11
    color: blue;
12
  }
13
}
14

15
/* 打印模式 */
16
@media print {
17
  .box {
18
    color: black;
19
  }
20
}

展开收起

媒体类型可以省略，默认使用 all。

1
/* 以下两种写法等价 */
2
@media all and (min-width: 768px) {}
3

4
@media (min-width: 768px) {}

注意：screen 并不专门代表电脑端，而是包含手机、平板和电脑等屏幕设备。

媒体特性：媒体特性（Media Feature）用于检测视口、设备或用户环境的具体特征。

媒体特性	说明
`min-width`	视口宽度大于等于指定值
`max-width`	视口宽度小于等于指定值
`min-height`	视口高度大于等于指定值
`max-height`	视口高度小于等于指定值
`orientation: portrait`	视口为纵向
`orientation: landscape`	视口为横向
`prefers-color-scheme: dark`	用户偏好深色主题
`prefers-reduced-motion: reduce`	用户偏好减少动画

使用示例：

1
/* 视口宽度 >= 768px */
2
@media (min-width: 768px) {
3
  .box {
4
    width: 50%;
5
  }
6
}
7

8
/* 视口宽度 <= 767px */
9
@media (max-width: 767px) {
10
  .box {
11
    width: 100%;
12
  }
13
}
14

15
/* 横向视口 */
16
@media (orientation: landscape) {
17
  .box {
18
    background-color: blue;
19
  }
20
}

展开收起

现代 CSS 还支持范围比较语法：

1
/* 视口宽度在 768px ~ 1199px 之间 */
2
@media (768px <= width < 1200px) {
3
  .box {
4
    width: 80%;
5
  }
6
}

媒体查询中的逻辑：媒体查询支持通过逻辑运算符组合多个条件。

逻辑	说明
`and`	逻辑与，所有条件满足时生效
`not`	逻辑非，对查询条件取反
`or`	逻辑或，任意条件满足时生效
`,`	逗号分隔多个查询，效果类似逻辑或
`only`	主要用于旧浏览器兼容，现代开发通常不需要

使用示例：

1
/* 屏幕设备，并且视口宽度 >= 768px */
2
@media screen and (min-width: 768px) {
3
  .box {
4
    width: 50%;
5
  }
6
}
7

8
/* 768px <= 视口宽度 <= 1200px */
9
@media (min-width: 768px) and (max-width: 1200px) {
10
  .box {
11
    width: 80%;
12
  }
13
}
14

15
/* 非打印模式 */
16
@media not print {
17
  .box {
18
    display: block;
19
  }
20
}
21

22
/* 不满足视口宽度 >= 768px 的情况 */
23
@media not all and (min-width: 768px) {
24
  .box {
25
    width: 100%;
26
  }
27
}
28

29
/* 与上面的 or 示例效果相同 */
30
@media (max-width: 767px), (orientation: landscape) {
31
  .box {
32
    background-color: red;
33
  }
34
}

展开收起

断点和书写位置#

**响应式断点：**断点（Breakpoint）是指页面布局需要发生变化时，对应的视口宽度。

常见的参考断点：

视口宽度	参考设备类型
`< 768px`	手机等窄屏设备
`768px ~ 1023px`	平板等中等宽度设备
`1024px ~ 1199px`	小型桌面屏幕
`>= 1200px`	大型桌面屏幕

这些不是 CSS 强制规定的断点，而是开发中常见的参考值。实际项目应该根据页面布局需求选择断点。

媒体查询的书写位置：媒体查询既可以写在 <style> 标签中，也可以写在外部 CSS 文件中。还有一种不推荐的写法，就是link的时候使用媒体查询，但是如果按照上面的断点，至少要写4份样式，然后媒体查询加载不同样式，需要注意的是，这不是按需加载，网页加载的时候会一起加载

媒体查询的策略#

媒体查询的策略主要分为3种：无策略，移动端优先、PC优先，最终实现的效果是一样，无策略可能需要写逻辑判断，想到哪写到哪，移动端优先是从小的尺寸写到大，pc则是大写到小，一般情况下推荐使用移动端优先，下面通过一个示例演示：

index.htmlindex.cssfirstmoblie.csspc.css

1
  <div class="row">
2
    <div class="col">
3
      <img src="./images/1.png" alt="">
4
    </div>
5
    <div class="col">
6
      <img src="./images/1.png" alt="">
7
    </div>
8
    <div class="col">
9
      <img src="./images/1.png" alt="">
10
    </div>
11
    <div class="col">
12
      <img src="./images/1.png" alt="">
13
    </div>
14
    <div class="col">
15
      <img src="./images/1.png" alt="">
16
    </div>
17
    <div class="col">
18
      <img src="./images/1.png" alt="">
19
    </div>
20
    <div class="col">
21
      <img src="./images/1.png" alt="">
22
    </div>
23
    <div class="col">
24
      <img src="./images/1.png" alt="">
25
    </div>
26
    <div class="col">
27
      <img src="./images/1.png" alt="">
28
    </div>
29
    <div class="col">
30
      <img src="./images/1.png" alt="">
31
    </div>
32
    <div class="col">
33
      <img src="./images/1.png" alt="">
34
    </div>
35
    <div class="col">
36
      <img src="./images/1.png" alt="">
37
    </div>
38
  </div>

展开收起

1
/* 无策略 */
2
@media(max-width: 576px) {
3
    .col {
4
        width: 100%;
5
    }
6
}
7

8
@media(min-width: 576px)and (max-width: 768px) {
9
    .col {
10
        width: 50%;
11
    }
12
}
13

14
@media(min-width: 768px)and (max-width: 992px) {
15
    .col {
16
        width: 25%;
17
    }
18
}
19

20
@media(min-width: 992px)and (max-width: 1200px) {
21
    .col {
22
        width: 16.66667%;
23
    }
24
}
25

26
@media(min-width: 1200px) {
27
    .col {
28
        width: 8.3333%;
29
    }
30
}

展开收起

1
 /* 移动端优先 */
2
    .col {
3
      width: 100%;
4
    }
5

6
    @media(min-width: 576px) {
7
      .col {
8
        width: 50%;
9
      }
10
    }
11

12
    @media(min-width: 768px) {
13
      .col {
14
        width: 25%;
15
      }
16
    }
17

18
    @media(min-width: 992px) {
19
      .col {
20
        width: 16.66667%;
21
      }
22
    }
23

24
    @media(min-width: 1200px) {
25
      .col {
26
        width: 8.3333%;
27
      }
28
    }

展开收起

1
/* pc端优先 */
2
.col {
3
    width: 8.3333%;
4
}
5

6
@media(max-width: 1200px) {
7
    .col {
8
        width: 16.66667%;
9
    }
10
}
11

12
@media(max-width:992px) {
13
    .col {
14
        width: 25%;
15
    }
16
}
17

18
@media(max-width:768px) {
19
    .col {
20
        width: 50%;
21
    }
22
}
23

24
@media(max-width:576px) {
25
    .col {
26
        width: 100%;
27
    }
28
}

展开收起

实战#

使用媒体查询的方式实现rem布局，去掉之前的js代码，改为媒体查询监听改变html上font-size的字体大小：

github代码仓库：https://github.com/youzi177/css-layout-lab

rem和vw布局

Thu, 15 Oct 2026 07:07:02 GMT

前言#

在学习本章之前，应该先建立一个概念，rem属于旧的布局方案，vw属于新的布局解决方案，rem和vw属于旧往新迁移的方案，当然这不是说rem完全淘汰，因为使用rem的存量项目基数庞大，rem布局依然非常有效，但是如果新项目，完全可以使用vw来布局

需要注意的是，这里说的是布局方案，并不是rem一点不用，而是rem用在字体相关上，不用在布局上，需要强调的是，在现代 CSS 布局的最佳实践，是根据实际需求综合使用不同的布局技术和尺寸单位，而不是依赖某一种方案解决所有问题。例如这里的rem和vw布局，解决的是等比例缩放问题，但是这个这里还不是响应式，移动端网页如果直接pc打开，会非常丑陋，需要借助媒体查询来改变一些布局样式。

另外一个如果使用px和媒体查询可以吗，答案也是可以，但是px属于绝对单位，媒体查询会较为复杂，在断点与断点之间是不会有变化的，而使用vw却可以天然支持动态变化（这里的断点，不是指调试的断点，而是页面在某个宽度下样式发生变化，断点可以自己随意设置，但是按照经验之谈，可以基本划分几个区间，如一些CSS框架就有断点区间，需要注意断点不是CSS规定死的，而是一种约定俗成的东西）

在一些教学视频中，会经常出现两个工具库：postcss-pxtorem和postcss-px-to-viewport，它们是将项目写的px转为rem或者vw，同样的转为rem，就需要写js脚本去动态修改html下的字体大小，vw是根据视口的，它们都有一个配置文件，来配置需要设置转换属性、忽略规则和适用范围，因为不能全部的px转为rem或者vw，如边框、图标、固定控件未必需要等比例缩放

rem布局方案#

原理#

em（root em）是 CSS 中的相对长度单位，它的大小取决于根元素 html 的 font-size。

rem 布局的核心原理：通过 JavaScript 根据视口宽度动态修改 html 的 font-size，使使用 rem 单位的元素随屏幕宽度等比例缩放。

例如：

1
html {
2
  font-size: 10px;
3
}
4

5
.box {
6
  width: 10rem;  /* 100px */
7
  height: 5rem; /* 50px */
8
}

当 html 的 font-size 变成 5px 时：

1
html {
2
  font-size: 5px;
3
}

元素的实际尺寸随之改变：

宽度：10 × 5 = 50px
高度：5 × 5 = 25px

因此，只需要动态调整根元素的字体大小，就能控制所有使用 rem 单位的元素尺寸。

实现#

以 750px 宽度的移动端设计稿为例，实现底部 Tabbar 的等比例缩放。确定设计稿的基准值，假设设计稿尺寸：

设计稿宽度：750px
Tabbar 高度：96px

为了方便计算，规定设计稿中：

1
1rem = 10px

那么：

[ 750 \div 10 = 75rem ]

Tabbar 的高度：

[ 96 \div 10 = 9.6rem ]

因此，我们需要在不同屏幕下始终保持：

[ htmlFontSize = \frac{viewWidth}{75} ]

动态设置根元素字体大小

1
const docEl = document.documentElement;
2

3
const setHtmlFontSize = () => {
4
  const viewWidth = docEl.clientWidth;
5
  const htmlFontSize = viewWidth / 75;
6

7
  docEl.style.fontSize = htmlFontSize + 'px';
8
};
9

10
setHtmlFontSize();
11

12
window.addEventListener('resize', setHtmlFontSize);

代码说明：

document.documentElement：获取根元素 html。
clientWidth：获取当前布局视口宽度。
viewWidth / 75：计算当前屏幕对应的根字体大小。
style.fontSize：动态设置 html 的字体大小。
resize：视口宽度变化时重新计算。

不同屏幕下的缩放效果

视口宽度	html font-size	Tabbar 高度
320px	4.267px	40.96px
375px	5px	48px
390px	5.2px	49.92px
414px	5.52px	52.99px
750px	10px	96px

完整实现

index.html展开收起

1
<!DOCTYPE html>
2
<html lang="zh-CN">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta
6
      name="viewport"
7
      content="width=device-width, initial-scale=1.0"
8
    />
9
    <title>rem 布局方案</title>
10

11
    <style>
12
      * {
13
        box-sizing: border-box;
14
      }
15

16
      body {
17
        margin: 0;
18
        font-size: 16px;
19
      }
20

21
      .tabbar-layout {
22
        position: fixed;
23
        bottom: 0;
24
        left: 0;
25
        width: 100%;
26
        height: 9.6rem;
27
        box-shadow: 0 -4px 4px rgba(0, 0, 0, 0.15);
28
      }
29

30
      .tabbar-layout img {
31
        display: block;
32
        width: 100%;
33
      }
34
    </style>
35

36
    <script>
37
      const docEl = document.documentElement;
38

39
      const setHtmlFontSize = () => {
40
        const viewWidth = docEl.clientWidth;
41
        const htmlFontSize = viewWidth / 75;
42

43
        docEl.style.fontSize = htmlFontSize + 'px';
44
      };
45

46
      setHtmlFontSize();
47

48
      window.addEventListener('resize', setHtmlFontSize);
49
    </script>
50
  </head>
51

52
  <body>
53
    <p>段落</p>
54

55
    <div class="tabbar-layout">
56
      <img src="./tabbar.png" alt="标签栏" />
57
    </div>
58
  </body>
59
</html>

展开收起

这里有两个值得注意的地方：

第一，body 使用 font-size: 16px，因此段落文字不会随着根元素字体大小的变化而等比例缩放。这可以避免文字随着屏幕宽度无限放大或缩小。

第二，Tabbar 使用 width: 100%，高度使用 rem。也可以将宽度设置为 75rem，但当前情况下使用百分比更简单。

扩展flexible#

什么是 flexible？

lib-flexible 是阿里巴巴移动前端团队推出的一套移动端适配方案，主要用于实现基于 rem 的等比例布局。

GitHub：amfe/lib-flexible

它的核心功能与前面手写的 JavaScript 一样：根据视口宽度，自动设置根元素 html 的 font-size。

不过，它采用了不同的换算规则。

flexible 的计算原理

flexible 经典的计算方式是将视口宽度划分为 10 份：

1
const docEl = document.documentElement;
2

3
const setRemUnit = () => {
4
  const rem = docEl.clientWidth / 10;
5

6
  docEl.style.fontSize = rem + 'px';
7
};

以 750px 设计稿为例：

[ 750 \div 10 = 75px ]

因此：

1rem = 75px（设计稿基准下）

Tabbar 高度为 96px，换算为：

[ 96 \div 75 = 1.28rem ]

CSS：

1
.tabbar-layout {
2
  width: 100%;
3
  height: 1.28rem;
4
}

这样在 375px 的视口下：

[ 1.28 \times (375 \div 10) = 48px ]

flexible 与手写方案的区别

对比项	手写方案	flexible
根字体计算	视口宽度 ÷ 75	视口宽度 ÷ 10
750px 视口下 1rem	10px	75px
96px 设计尺寸	9.6rem	1.28rem
核心机制	动态修改 font-size	动态修改 font-size
缩放效果	等比例缩放	等比例缩放

两者没有本质区别，只是采用了不同的 rem 换算基准。

拓展-VScode插件#

在开发中，会计算rem的值，这非常麻烦，这里推荐一个插件px2rem

vw+rem布局方案#

原理#

rem + vw 布局方案结合了两种单位的特点：

vw：根据视口宽度动态计算根元素的字体大小。
rem：根据根元素的字体大小计算元素尺寸。

核心原理：使用 vw 动态设置 html 的 font-size，再使用 rem 实现元素的等比例缩放。

与传统的 JS + rem 方案相比，不再需要 JavaScript 动态计算根元素字体大小，而是直接通过 CSS 实现。

实现#

假设设计稿宽度为 750px，规定在设计稿宽度下：

1
1rem = 100px

那么：

1
html {
2
  font-size: calc(100vw / 7.5);
3
}

计算结果：

视口宽度	html 的 font-size	1rem
320px	42.67px	42.67px
375px	50px	50px
414px	55.2px	55.2px
750px	100px	100px

例如设计稿中的底部导航栏宽度为 750px，高度为 96px。

1
<!DOCTYPE html>
2
<html lang="zh-CN">
3
<head>
4
  <meta charset="UTF-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
  <title>rem + vw 布局方案</title>
7
  <style>
8
    * {
9
      box-sizing: border-box;
10
    }
11

12
    html {
13
      font-size: calc(100vw / 7.5);
14
    }
15

16
    body {
17
      margin: 0;
18
      font-size: 16px;
19
    }
20

21
    .tabbar-layout {
22
      position: fixed;
23
      bottom: 0;
24
      left: 0;
25
      width: 7.5rem;
26
      height: 0.96rem;
27
      background-color: #eee;
28
    }
29
  </style>
30
</head>
31
<body>
32
  <div class="tabbar-layout">底部导航栏</div>
33
</body>
34
</html>

展开收起

在不同设备下：

视口宽度	导航栏宽度	导航栏高度
320px	320px	40.96px
375px	375px	48px
414px	414px	52.99px
750px	750px	96px

最终实现：视口宽度发生变化时，rem 对应的像素值自动变化，从而实现元素等比例缩放。

怎么计算#

为什么是 100vw / 7.5？

假设：

设计稿宽度：750px
规定在设计稿宽度下：1rem = 100px

首先：

1
100vw = 750px /* 当视口宽度为 750px 时 */

那么，要让根元素的 font-size 等于 100px：

[ 750 \div 7.5 = 100 ]

所以：

1
html {
2
  font-size: calc(100vw / 7.5);
3
}

其中 7.5 的来源就是：

[ 7.5 = \frac{750}{100} ]

如果 1rem = 10px 呢？

设计稿还是 750px，只是将基准改为：

1
1rem = 10px

那么：

[ 750 \div 10 = 75 ]

代码变成：

1
html {
2
  font-size: calc(100vw / 75);
3
}

对比一下：

视口宽度	1rem = 100px 方案	1rem = 10px 方案
320px	42.67px	4.27px
375px	50px	5px
750px	100px	10px

这里的 1rem = 100px 和 1rem = 10px 都是指设计稿对应的 750px 视口宽度下的值，并不是在所有屏幕下固定不变。

通用计算公式

例如设计稿宽度为 750px：

除数=设计稿宽度 / 设计稿设定的1rem像素值

设定的 1rem	计算过程	CSS
100px	750 ÷ 100 = 7.5	`calc(100vw / 7.5)`
50px	750 ÷ 50 = 15	`calc(100vw / 15)`
10px	750 ÷ 10 = 75	`calc(100vw / 75)`

vw布局方案#

原理#

vw 是 CSS 的视口相对单位，1vw 等于视口宽度的 1%。

vw 布局方案的核心原理：将设计稿中的 px 单位换算为 vw，让元素尺寸随着视口宽度变化而等比例缩放。

例如：

视口宽度	1vw	10vw
320px	3.2px	32px
375px	3.75px	37.5px
750px	7.5px	75px

换算公式

[ vw = \frac{设计稿中元素的尺寸}{设计稿宽度}\times100 ]

假设设计稿宽度为 750px，其中一个元素的高度为 96px。

[ \frac{96}{750}\times100=12.8vw ]

1
.tabbar {
2
  height: 12.8vw;
3
}

实际效果：

视口宽度	元素高度
320px	40.96px
375px	48px
750px	96px

因此，元素能够根据视口宽度进行等比例缩放。

实现#

1
<!DOCTYPE html>
2
<html lang="en">
3

4
<head>
5
  <meta charset="UTF-8" />
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
  <title>VW 布局方案</title>
8
  <style>
9
    img {
10
      width: 100%;
11
    }
12
    body {
13
      font-size: 16px;
14
    }
15
    .tabbar-layout {
16
      position: fixed;
17
      bottom: 0;
18
      left: 0;
19
      box-shadow: 0 -.4rem .4rem rgba(0, 0, 0, 0.15);
20

21
      /* width: 100%;
22
      height: 48px; */
23
      width: 100vw;
24
      height: 12.88vw;
25
    }
26
  </style>
27
  <style>
28

29
  </style>
30
  <script>
31
    // 计算vw单位的值，以750px为基准
32
    // 100vw = 750px
33
    // 测量的ox/750px(基准) = ?VW/100vw
34
    // ?VW = (测量的px/750px(基准)) * 100vw
35
  </script>
36
</head>
37

38
<body>
39
  <p>段落</p>
40
  <div class="tabbar-layout">
41
    <img src="./tabbar.png" alt="标签栏" />
42
  </div>
43
</body>
44

45
</html>

展开收起

拓展-VScode插件#

在开发中，会计算rem的值，这非常麻烦，这里推荐一个插件px2rem

实战#

结合以上三种方案，修改之前的仿慕课网首页

github代码仓库：https://github.com/youzi177/css-layout-lab

Flex弹性布局

Wed, 14 Oct 2026 08:57:35 GMT

前言#

关于flex布局，网上有很多教程，但是这里记录一下我自己学习中容易踩坑的点：flex布局里面的主轴和交叉轴，不能简单的理解为横竖轴，如果映入这个想法，很容易弄混，增加学习的难度，主轴就是默认的排列方向，默认是横向，当然可以改为竖向，这时候主轴就是竖的，初学很容易就卡这一步了，什么乱七八糟横竖主轴交叉轴，所以只要记住主轴交叉轴就可以；

关于flex概念，只要设置一个display：flex，那这个元素就自动成为flex容器，里面的子元素就是flex项目，flex主要分为容器属性和项目属性，以上这句话包括了很多重点，只要明白flex容器，flex项目，以及它们各自属性基本就能使用flex布局了

Flex基础知识#

什么是flex布局：是 CSS 提供的一种一维布局方式，主要用于控制元素在水平或垂直方向上的排列、对齐、间距和伸缩。任何一个HTML元素都可以指定为flex布局；

什么是flex容器：设置了 display: flex 或 display: inline-flex 的元素就是flex容器

什么是flex项目：Flex 容器中的直接子元素。需要注意：只有 Flex 容器的直接子元素会成为 Flex 项目。Flex 项目的内部元素不会自动成为该容器的 Flex 项目。Flex 容器本身也可以同时是另一个 Flex 容器的 Flex 项目。

什么是主轴，什么是交叉轴：主轴（Main Axis）：Flex 项目主要排列的方向，由 flex-direction 决定。交叉轴（Cross Axis）：与主轴垂直的方向。主轴不一定是水平方向，交叉轴也不一定是垂直方向。

Flex容器的属性#

修改主轴方向#

flex-direction 用于设置 Flex 容器的主轴方向，决定 Flex 项目沿哪个方向排列。

基本语法：

1
.container {
2
  display: flex;
3
  flex-direction: row;
4
}

属性值	说明
`row`	默认值，主轴为水平方向，通常从左向右排列
`row-reverse`	主轴为水平方向，通常从右向左排列
`column`	主轴为垂直方向，通常从上向下排列
`column-reverse`	主轴为垂直方向，通常从下向上排列

是否换行#

flex-wrap 用于设置当 Flex 项目在主轴方向上排列空间不足时，是否允许换行。

基本语法：

1
.container {
2
  display: flex;
3
  flex-wrap: wrap;
4
}

属性值	说明
`nowrap`	默认值，不换行
`wrap`	允许换行
`wrap-reverse`	允许换行，交叉轴的起止方向反转

注意：

nowrap 并不代表子元素绝对不会超出容器，空间不足时，项目可能被压缩，也可能溢出。
wrap 只是允许换行，并不保证一定换行。
当 flex-direction: column 时，换行表现为排列到新的列，通常需要容器有明确的高度限制才能观察到

简写属性#

flex-flow 是 flex-direction 和 flex-wrap 的简写属性。

基本语法：

1
.container {
2
  display: flex;
3
  flex-flow: row wrap;
4
}

等价于：

1
.container {
2
  display: flex;
3
  flex-direction: row;
4
  flex-wrap: wrap;
5
}

常见写法：

写法	说明
`flex-flow: row nowrap`	默认值，水平排列，不换行
`flex-flow: row wrap`	水平排列，允许换行
`flex-flow: column wrap`	垂直排列，允许换列
`flex-flow: row-reverse wrap`	水平反向排列，允许换行

注意： flex-flow 只负责排列方向和换行，与控制 Flex 项目自身伸缩的 flex 属性不同。

主轴对齐方式#

justify-content 用于控制 Flex 项目在主轴方向上的对齐方式以及剩余空间分配。

基本语法：

1
.container {
2
  display: flex;
3
  justify-content: center;
4
}

属性值	说明
`flex-start`	默认值，向主轴起点对齐
`flex-end`	向主轴终点对齐
`center`	在主轴上居中
`space-between`	首尾项目贴近两端，其余空间分布在项目之间
`space-around`	每个项目两侧分配相等空间，外侧间距为内部间距的一半
`space-evenly`	所有相邻间距与两端间距相等

注意：

justify-content 控制的是主轴，不一定是水平方向。
当 flex-direction: column 时，它控制垂直方向的对齐。
如果项目已经占满主轴可用空间，space-between 等空间分配方式可能看不出效果。
当存在多行项目时，justify-content 会分别作用于每一行。

交叉轴对齐方式#

align-items 用于控制 Flex 项目在交叉轴方向上的对齐方式。

基本语法：

1
.container {
2
  display: flex;
3
  align-items: center;
4
}

属性值	说明
`normal`	默认值，在常规 Flex 场景中通常表现为 `stretch`
`stretch`	在交叉轴尺寸为 `auto` 等适用条件下拉伸项目
`flex-start`	向交叉轴起点对齐
`flex-end`	向交叉轴终点对齐
`center`	在交叉轴上居中
`baseline`	沿项目的基线对齐，通常用于文字

注意：

align-items 控制交叉轴，不一定是垂直方向。
对多行 Flex 容器，它控制每一行内部项目的交叉轴对齐方式。
stretch 不是无条件拉伸。如果项目已经设置固定高度（横向主轴时），通常不会被拉伸。

多行交叉轴对齐方式#

align-content 用于控制 Flex 容器中多行项目在交叉轴方向上的整体排列及剩余空间分配。

与 align-items 不同，它操作的重点是多条 Flex 行，而不是每个项目自身。

基本语法：

1
.container {
2
  display: flex;
3
  flex-wrap: wrap;
4
  height: 300px;
5
  align-content: space-between;
6
}

属性值	说明
`normal`	默认值，在 Flex 中通常表现为 `stretch`
`stretch`	拉伸 Flex 行以填充交叉轴的剩余空间
`flex-start`	多行整体靠交叉轴起点
`flex-end`	多行整体靠交叉轴终点
`center`	多行整体在交叉轴居中
`space-between`	首尾行靠两端，其余行均匀分布
`space-around`	每行两侧分配相等空间
`space-evenly`	各行间距与两端间距相等

注意：

Flex 容器必须是多行，align-content 才能影响 Flex 行的排列。通常需要设置 flex-wrap: wrap。
交叉轴方向需要有可供分配的剩余空间，才能明显观察 center、space-between 等效果。
align-content: stretch 拉伸的是 Flex 行，项目是否随之拉伸还受到 align-items 和项目尺寸的影响。

align-items 和 align-content 的区别#

这是 Flex 布局中比较容易混淆的两个属性。

对比	`align-items`	`align-content`
主要控制对象	每条 Flex 行内的项目	整体的 Flex 行
作用方向	交叉轴	交叉轴
是否要求多行	否	是
典型用途	项目垂直居中	多行内容整体垂直居中

例如：

1
.container {
2
  display: flex;
3
  flex-flow: row wrap;
4
  height: 300px;
5

6
  /* 每一行内部项目居中 */
7
  align-items: center;
8

9
  /* 所有行作为整体居中 */
10
  align-content: center;
11
}

两者可以同时设置，作用并不冲突。

记忆方式#

flex-direction：决定往哪个方向排。
flex-wrap：决定排不下是否换行。
flex-flow：前面两个属性的简写。
justify-content：控制主轴上的对齐。
align-items：控制交叉轴上每行项目的对齐。
align-content：控制交叉轴上多行项目的整体分布。

实际开发中，最常使用的是 flex-direction、justify-content、align-items 和 flex-wrap。其中 align-content 通常在多行布局中才需要重点考虑。

Flex项目的属性#

排列顺序：order#

order 用于控制 Flex 项目的视觉排列顺序，数值越小，排列越靠前。

基本语法：

1
.item {
2
  order: 0;
3
}

属性值	说明
`0`	默认值
正整数	数值越大，排列越靠后
负整数	数值越小，排列越靠前

示例：

1
.item1 {
2
  order: 2;
3
}
4

5
.item2 {
6
  order: 0;
7
}
8

9
.item3 {
10
  order: -1;
11
}

注意： order 只影响视觉顺序，不会改变 HTML 中的 DOM 顺序，也不会相应改变键盘焦点和通常的屏幕阅读器阅读顺序，因此不应该用它替代有语义要求的内容排序。

放大比例：flex-grow#

flex-grow 用于控制 Flex 项目如何分配主轴方向上的剩余空间。

基本语法：

1
.item {
2
  flex-grow: 0;
3
}

属性值	说明
`0`	默认值，不主动分配剩余空间
`1`	参与剩余空间分配
`2`	在其他条件相同的情况下，分得 `1` 的两倍剩余空间
其他非负数	按增长因子分配剩余空间

示例：

1
.container {
2
  display: flex;
3
  width: 500px;
4
}
5

6
.item {
7
  flex-basis: 100px;
8
}
9

10
.item1 {
11
  flex-grow: 1;
12
}
13

14
.item2 {
15
  flex-grow: 2;
16
}
17

18
.item3 {
19
  flex-grow: 1;
20
}

展开收起

三个项目的基础宽度都是 100px，容器宽度 500px，剩余空间为 200px。增长因子比例为 1 : 2 : 1，所以剩余空间分别分配 50px、100px、50px。

注意：

flex-grow 分配的是剩余空间，并不是直接决定最终宽度比例。
只有主轴有可分配的正剩余空间时，才会发生增长。
实际结果还受 flex-basis、min-width、max-width 等条件影响。

缩小比例：flex-shrink#

flex-shrink 用于控制 Flex 项目在主轴空间不足时如何收缩。

基本语法：

1
.item {
2
  flex-shrink: 1;
3
}

属性值	说明
`1`	默认值，允许收缩
`0`	不参与 Flex 收缩
`2`	相同基础尺寸等条件下，收缩分配权重是 `1` 的两倍
其他非负数	按收缩因子参与收缩

示例：

1
.container {
2
  display: flex;
3
  width: 450px;
4
}
5

6
.item {
7
  width: 200px;
8
  flex-shrink: 1;
9
}

三个项目的原始宽度合计为 600px，但容器只有 450px。因此，满足收缩条件时，三个项目会分别缩小到 150px。

如果不希望项目被 Flex 收缩：

1
.item {
2
  width: 200px;
3
  flex-shrink: 0;
4
}

此时三个项目的宽度不会因 Flex 的收缩算法而减小，可能溢出容器。

注意：

flex-shrink 默认值为 1，这也是 Flex 项目宽度有时小于设置值的原因。
收缩空间按 flex-shrink × flex-basis 等规则计算，并不是单纯按 flex-shrink 数值比例缩小。
Flex 项目默认的 min-width: auto 可能阻止进一步收缩，必要时可设置 min-width: 0。

基础尺寸：flex-basis#

flex-basis 用于指定 Flex 项目在分配剩余空间或进行收缩之前的主轴基础尺寸。

基本语法：

1
.item {
2
  flex-basis: auto;
3
}

属性值	说明
`auto`	默认值，通常参考主轴方向对应的 `width` 或 `height`，否则依据内容确定尺寸
`100px`	主轴基础尺寸为 `100px`
`30%`	根据 Flex 容器相应主轴尺寸计算百分比基础尺寸
`content`	根据项目内容确定基础尺寸
`0`	基础尺寸设为零，仍受最小尺寸等约束

示例：

1
.container {
2
  display: flex;
3
}
4

5
.item {
6
  width: 200px;
7
  flex-basis: 100px;
8
}

当 flex-direction: row 时，flex-basis: 100px 会优先作为 Flex 项目的主轴基础宽度，而不是使用 width: 200px。

但最终宽度仍可能因为 Flex 伸缩和尺寸限制而发生变化。

注意：

主轴水平时，flex-basis 主要对应宽度。
主轴垂直时，flex-basis 主要对应高度。
flex-basis 不等于最终尺寸，而是 Flex 布局计算的基础尺寸。

简写属性：flex#

flex 是 flex-grow、flex-shrink 和 flex-basis 的简写属性。

基本语法：

1
.item {
2
  flex: 0 1 auto;
3
}

等价于：

1
.item {
2
  flex-grow: 0;
3
  flex-shrink: 1;
4
  flex-basis: auto;
5
}

常见写法

写法	等价含义	说明
`flex: initial`	`0 1 auto`	默认行为，不增长、允许收缩
`flex: none`	`0 0 auto`	不增长、不收缩
`flex: auto`	`1 1 auto`	基于自动基础尺寸进行伸缩
`flex: 1`	浏览器中通常展开为 `1 1 0%`	参与弹性空间分配
`flex: 2`	浏览器中通常展开为 `2 1 0%`	xxxxxxxxxx /* 网站 Banner /.banner { height: 400px; background: url(“/images/banner.jpg”) center / cover no-repeat;}/ 卡片渐变背景 /.card { background: linear-gradient(135deg, #667eea, #764ba2);}/ 渐变文字 */.title { background: linear-gradient(to right, #00c6ff, #0072ff); background-clip: text; color: transparent;}css
`flex: 1 1 200px`	`1 1 200px`	基础尺寸 200px，可增长、可收缩

单独对齐方式：align-self#

align-self 用于控制单个 Flex 项目在交叉轴方向上的对齐方式，可以覆盖 Flex 容器设置的 align-items。

基本语法：

1
.item {
2
  align-self: auto;
3
}

属性值	说明
`auto`	默认值，采用父级 `align-items` 的对齐方式
`normal`	在普通 Flex 场景中通常表现为 `stretch`
`stretch`	满足条件时沿交叉轴拉伸
`flex-start`	交叉轴起点对齐
`flex-end`	交叉轴终点对齐
`center`	交叉轴居中
`baseline`	基线对齐

示例：

1
.container {
2
  display: flex;
3
  height: 200px;
4
  align-items: flex-start;
5
}
6

7
.item2 {
8
  align-self: center;
9
}
10

11
.item3 {
12
  align-self: flex-end;
13
}

注意：

align-self 控制交叉轴，不能直接控制主轴上的单个项目对齐。
align-self: auto 是采用父容器的对齐方式，并不是通过 CSS 属性继承实现的。
若项目在交叉轴上存在 auto 外边距，可能覆盖 align-self 的对齐效果。

Flex 项目属性总结#

属性	作用	默认值
`order`	控制项目视觉排列顺序	`0`
`flex-grow`	控制正剩余空间的分配	`0`
`flex-shrink`	控制空间不足时的收缩	`1`
`flex-basis`	指定伸缩计算前的基础尺寸	`auto`
`flex`	前面三个伸缩属性的简写	`0 1 auto`
`align-self`	控制单个项目交叉轴对齐	`auto`

实际开发应该重点掌握什么？

这六个属性可以分为四类：

顺序控制：order
弹性尺寸控制：flex-grow、flex-shrink、flex-basis、flex
单独对齐：align-self

其中，日常开发最值得重点掌握的是 flex、flex-shrink 和 align-self。

尤其需要理解：flex-grow 分配剩余空间，flex-shrink 处理空间不足，flex-basis 提供计算的基础尺寸。这三个属性共同决定 Flex 项目在主轴方向上的最终尺寸，而不是彼此独立地控制宽高。

Flex实战#

圣杯布局#

github代码仓库：https://github.com/youzi177/css-layout-lab

慕课网首页改造#

github代码仓库：https://github.com/youzi177/css-layout-lab

CSS3流式布局

Tue, 13 Oct 2026 08:22:52 GMT

前言#

在学习CSS的布局之前，需要知道的一点是，不是一种布局，一个测量单位从头用尾，而是视情况使用，结合使用才是最终方案，每个布局和测量单位都有不同应用场景，而非谁淘汰谁，当然这其中会存在一些新方案和旧方案，比如rem和vw布局，在以前的项目中，可能会用到rem，但是现在新项目推荐使用vw，因为rem需要使用js动态计算，而vw是相对于视口计算，少了js，页面性能就更好，所以rem布局可以了解认识使用，但是新项目采用vw方案，理清思路之后，学习第一个布局流式布局，流体布局并不是一个完全独立新知识，所以这里会用一个demo演示，再后续的布局中，也会基于这个修改

仿慕课网首页#

页面结构布局#

基础骨架和reset.css

index.htmlreset.css

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>仿慕课网首页-流体布局</title>
7
  <link rel="stylesheet" href="../../../styles/reset.css">
8
</head>
9
<body>
10
  <!-- 头部 -->
11
  <header class="header-layout">头部</header>
12
  <!-- 主体 -->
13
  <div class="main-layout">
14
    <!-- 幻灯片 -->
15
    <div class="slider-layout"></div>
16
    <!-- 免费课程 -->
17
    <div class="course-layout">免费课程</div>
18
    <!-- 实战课程 -->
19
    <div class="course-layout">实战课程</div>
20
  </div>
21
  <!-- 标签栏 -->
22
  <div class="tabbar-layout">标签栏</div>
23
</body>
24
</html>

展开收起

1
* {
2
  padding: 0;
3
  margin: 0;
4
  /* 防止盒子溢出 */
5
  box-sizing: border-box;
6
  outline: 0;
7
  /* 取消点击的时候高亮 */
8
  -webkit-tap-highlight-color: transparent;
9
}
10
a {
11
  text-decoration: none;
12
}
13
li {
14
  list-style: none;
15
}
16
img {
17
  /* display: block; */
18
  /* 图片铺满容器 */
19
  vertical-align: top;
20
}

展开收起

布局layout样式

layout.css展开收起

1
.header-layout {
2
  position: fixed;
3
  left: 0;
4
  top: 0;
5
  width: 100%;
6
  height: 48px;
7
  background-color: red;
8
  border-bottom: 1px solid #e8e8e8;
9
}
10

11
.main-layout {
12
  padding: 48px 0 48px 0;
13
}
14

15
.slider-layout {
16
  height: 134px;
17
  background-color: green;
18
  margin-bottom: 20px;
19
}
20

21
.course-layout {
22
  height: 382px;
23
  background-color: gray;
24
  margin-bottom: 10px;
25
}
26

27
.tabbar-layout {
28
  position: fixed;
29
  left: 0;
30
  bottom: 0;
31
  width: 100%;
32
  height: 48px;
33
  background-color: yellow;
34
  box-shadow: 0 -4px 4px rgba(0, 0, 0, 0.15);
35
}

展开收起

头部#

index.htmlheader.css

1
  <!-- 头部 -->
2
  <header class="header-layout">
3
    <div class="header">
4
      <!-- logo -->
5
      <a href="" class="header-logo">
6
        <img src="../../../public/images/logo.png" alt="logo" class="header-logo-img">
7
      </a>
8
      <!-- 下拉框按钮 -->
9
      <button id="header-toggle" class="header-toggle">
10
        <span class="header-toggle-bar"></span>
11
        <span class="header-toggle-bar"></span>
12
        <span class="header-toggle-bar"></span>
13
      </button>
14
    </div>
15
  </header>

展开收起

1
.header {
2
  width: 100%;
3
  height: 100%;
4
  background-color: #fff;
5
  padding: 0 20px;
6
}
7

8
.header-logo {
9
  float: left;
10
  height: 100%;
11
}
12

13
.header-logo-img {
14
  height: 30px;
15
  /* 居中=48-9-9-30，总高度48，图30，上外边距9，下外边距刚好也是9 */
16
  margin-top: 9px;
17
}
18

19
.header-toggle {
20
  float: right;
21
  padding: 10px;
22
  background-color: transparent;
23
  border: none;
24
  border-radius: 4px;
25
  margin-top: 4px;
26
}
27

28
.header-toggle-bar {
29
  display: block;
30
  width: 24px;
31
  height: 4px;
32
  background-color: #363636;
33
  border-radius: 2px;
34
}
35

36
.header-toggle-bar + .header-toggle-bar {
37
  margin-top: 4px;
38
}

展开收起

主体部分#

幻灯片部分

index.htmlslider.css

1
 <!-- 幻灯片 -->
2
    <div class="slider-layout">
3
      <img src="../../../public/images/slider/1.jpg" alt="">
4
    </div>

1
 .slider-layout img {
2
      width: 100%;
3
    }

实战免费课程部分

index.htmlslider.css

1
    <!-- 免费课程 -->
2
    <div class="course-layout">
3
      <div class="course">
4
        <h2 class="course-title">免费课程</h2>
5
        <ul class="course-list">
6
          <li class="course-item">
7
            <a href="javascript:;">
8
              <p class="course-pic">
9
                <img src="../../../public/images/course_free/1.jpg" alt="" class="course-img">
10
              </p>
11
              <p class="course-name">初始HTML5+CSS3 - 2026升级版</p>
12
              <p class="course-price">免费</p>
13
            </a>
14
          </li>
15
          <li class="course-item">
16
            <a href="javascript:;">
17
              <p class="course-pic">
18
                <img src="../../../public/images/course_free/2.jpg" alt="" class="course-img">
19
              </p>
20
              <p class="course-name">初始HTML5+CSS3 - 2026升级版</p>
21
              <p class="course-price">免费</p>
22
            </a>
23
          </li>
24
          <li class="course-item">
25
            <a href="javascript:;">
26
              <p class="course-pic">
27
                <img src="../../../public/images/course_free/3.jpg" alt="" class="course-img">
28
              </p>
29
              <p class="course-name">初始HTML5+CSS3 - 2026升级版</p>
30
              <p class="course-price">免费</p>
31
            </a>
32
          </li>
33
          <li class="course-item">
34
            <a href="javascript:;">
35
              <p class="course-pic">
36
                <img src="../../../public/images/course_free/4.jpg" alt="" class="course-img">
37
              </p>
38
              <p class="course-name">初始HTML5+CSS3 - 2026升级版</p>
39
              <p class="course-price">免费</p>
40
            </a>
41
          </li>
42
        </ul>
43
      </div>
44
    </div>
45
    <!-- 实战课程 -->
46
    <div class="course-layout">
47
      <div class="course">
48
        <h2 class="course-title">实战课程</h2>
49
        <ul class="course-list">
50
          <li class="course-item">
51
            <a href="javascript:;">
52
              <p class="course-pic">
53
                <img src="../../../public/images/course_coding/1.jpg" alt="" class="course-img">
54
              </p>
55
              <p class="course-name">初始HTML5+CSS3 - 2026升级版</p>
56
              <p class="course-price">实战</p>
57
            </a>
58
          </li>
59
          <li class="course-item">
60
            <a href="javascript:;">
61
              <p class="course-pic">
62
                <img src="../../../public/images/course_coding/2.jpg" alt="" class="course-img">
63
              </p>
64
              <p class="course-name">初始HTML5+CSS3 - 2026升级版</p>
65
              <p class="course-price">实战</p>
66
            </a>
67
          </li>
68
          <li class="course-item">
69
            <a href="javascript:;">
70
              <p class="course-pic">
71
                <img src="../../../public/images/course_coding/3.jpg" alt="" class="course-img">
72
              </p>
73
              <p class="course-name">初始HTML5+CSS3 - 2026升级版</p>
74
              <p class="course-price">实战</p>
75
            </a>
76
          </li>
77
          <li class="course-item">
78
            <a href="javascript:;">
79
              <p class="course-pic">
80
                <img src="../../../public/images/course_coding/4.png" alt="" class="course-img">
81
              </p>
82
              <p class="course-name">初始HTML5+CSS3 - 2026升级版</p>
83
              <p class="course-price">实战</p>
84
            </a>
85
          </li>
86
          <li class="course-item">
87
            <a href="javascript:;">
88
              <p class="course-pic">
89
                <img src="../../../public/images/course_coding/5.png" alt="" class="course-img">
90
              </p>
91
              <p class="course-name">初始HTML5+CSS3 - 2026升级版</p>
92
              <p class="course-price">实战</p>
93
            </a>
94
          </li>
95
          <li class="course-item">
96
            <a href="javascript:;">
97
              <p class="course-pic">
98
                <img src="../../../public/images/course_coding/6.png" alt="" class="course-img">
99
              </p>
100
              <p class="course-name">初始HTML5+CSS3 - 2026升级版</p>
101
              <p class="course-price">实战</p>
102
            </a>
103
          </li>
104
        </ul>
105
      </div>
106
    </div>

展开收起

1
    .course {
2
      /* 清除浮动 */
3
      overflow: auto;
4
      font-size: 14px;
5
    }
6

7
    .course-title {
8
      width: 100%;
9
      padding: 0 0 10px 20px;
10
      color: #191919;
11
      font-size: 16px;
12
    }
13

14
    .course-list {
15
      padding-right: 20px;
16
    }
17

18
    .course-item {
19
      float: left;
20
      width: 50%;
21
      padding: 0 0 10px 20px;
22
    }
23

24
    .course-pic {
25
      margin-bottom: 6px;
26
    }
27

28
    .course-img {
29
      /* 相对于父容器的100% */
30
      width: 100%;
31
    }
32

33
    .course-name {
34
      height: 40px;
35
      line-height: 20px;
36
      margin-bottom: 4px;
37
      color: #4d4d4d;
38
      /* 多行文字省略 */
39
      overflow: hidden;
40
      text-overflow: ellipsis;
41
      display: -webkit-box;
42
      -webkit-line-clamp: 2;
43
      line-clamp: 2;
44
      -webkit-box-orient: vertical;
45
      white-space: normal !important;
46
      word-wrap: break-word;
47
    }
48

49
    .course-price {
50
      color: #e93b3b;
51
    }

展开收起

标签栏#

标签栏部分

index.htmltabbar.css

1
  <!-- 标签栏 -->
2
  <div class="tabbar-layout">
3
    <div class="tabbar">
4
      <a href="javascript:;" class="tabbar-item tabbar-item-active">
5
        <i class="iconfont icon-home">
6
        </i>
7
        <span>首页</span>
8
      </a>
9
      <a href="javascript:;" class="tabbar-item ">
10
        <i class="iconfont icon-search">
11
        </i>
12
        <span>搜索</span>
13
      </a>
14
      <a href="javascript:;" class="tabbar-item ">
15
        <i class="iconfont icon-personal">
16
        </i>
17
        <span>我的</span>
18
      </a>
19
    </div>
20
  </div>

展开收起

1
.tabbar {
2
  width: 100%;
3
  height: 100%;
4
  background-color: #f6f6f6;
5
  font-size: 14px;
6
}
7

8
.tabbar-item {
9
  float: left;
10
  width: 33.333333%;
11
  height: 100%;
12
  color: #c2cfcc;
13
  text-align: center;
14
  padding-top: 3px;
15
}
16

17
.tabbar-item-active {
18
  background-color: #e7f3f0;
19
  color: #00b38a;
20
}
21

22
.tabbar-item .iconfont {
23
  display: block;
24
  font-size: 20px;
25
}

展开收起

layout样式#

layout.css展开收起

1
.header-layout {
2
  position: fixed;
3
  left: 0;
4
  top: 0;
5
  width: 100%;
6
  height: 48px;
7
  background-color: red;
8
  border-bottom: 1px solid #e8e8e8;
9
}
10

11
.main-layout {
12
  padding: 48px 0 48px 0;
13
}
14

15
.slider-layout {
16
  /* height: 134px;
17
  background-color: green; */
18
  margin-bottom: 20px;
19
}
20

21
.course-layout {
22
  /* height: 382px;
23
  background-color: gray; */
24
  margin-bottom: 10px;
25
}
26

27
.tabbar-layout {
28
  position: fixed;
29
  left: 0;
30
  bottom: 0;
31
  width: 100%;
32
  height: 48px;
33
  background-color: yellow;
34
  box-shadow: 0 -4px 4px rgba(0, 0, 0, 0.15);
35
}

展开收起

总结#

流体布局主要使用%单位布局，不是只能使用%单位布局，也可以使用其他单位，比如px；图片一般只设置宽度或者高度,不要同时设置，这样可以等比例缩放，不失真

CSS3中开发中的常用单位

Sat, 10 Oct 2026 02:02:21 GMT

CSS3 常用长度单位#

CSS 中的长度单位主要分为两类：

绝对长度单位：如 px，不直接依赖父元素的尺寸。
相对长度单位：如 %、em、rem、vw、vh 等，根据不同的参照对象计算实际大小。

px（像素）#

px 是 CSS 中最常用的长度单位，表示 CSS 像素。

基本使用#

1
.box {
2
  width: 300px;
3
  height: 200px;
4
  font-size: 16px;
5
  padding: 20px;
6
  border: 1px solid black;
7
}

特点：

数值明确，容易控制元素尺寸。
不依赖父元素的宽度或字体大小。
适合边框、图标、固定尺寸元素、细节间距等。

px 不等于物理像素#

CSS 中的 1px 不一定对应屏幕上的一个物理像素。例如，在设备像素比（DPR）为 2 的情况下，正常缩放时：1 CSS px 通常对应 2 × 2 个物理像素。因此，px 不是永远固定的物理尺寸。

开发场景#

1
.card {
2
  width: 320px;
3
  padding: 16px;
4
  border-radius: 8px;
5
  border: 1px solid #ddd;
6
}

px 适合需要精确控制尺寸的场景，但大量使用固定宽高可能导致小屏幕溢出，因此响应式开发通常需要搭配其他单位。

百分号（%）#

% 是相对单位，通常根据相关属性对应的包含块尺寸计算，而不是所有属性都相对于父元素的同一个尺寸。

基本使用#

1
<div class="parent">
2
  <div class="child"></div>
3
</div>
4
.parent {
5
  width: 500px;
6
  height: 300px;
7
}
8

9
.child {
10
  width: 50%;
11
  height: 50%;
12
}

计算结果：

子元素宽度：500 × 50% = 250px
子元素高度：300 × 50% = 150px

不同属性的百分比参照对象#

属性	百分比主要参照
`width`	包含块宽度
`height`	包含块高度（需要满足相应的高度计算条件）
`padding`	包含块宽度
`margin`	包含块宽度
`font-size`	父元素字体大小
`transform: translateX()`	元素自身的参考盒宽度
`transform: translateY()`	元素自身的参考盒高度

注意，padding-top: 10% 通常也是根据包含块的宽度计算，而不是高度。

开发场景#

1
.container {
2
  width: 80%;
3
  max-width: 1200px;
4
  margin: 0 auto;
5
}

适合：

流式布局。
容器宽度自适应。
子元素占据父容器一定比例。

em#

em 是相对字体大小的长度单位。

基本规则#

用在 font-size 上：相对于父元素计算后的字体大小。
用在其他长度属性上：相对于当前元素计算后的字体大小。

基本使用#

1
.parent {
2
  font-size: 20px;
3
}
4

5
.child {
6
  font-size: 1.5em;
7
  padding: 2em;
8
}

计算过程：

.child 字体大小：20 × 1.5 = 30px
.child 内边距：30 × 2 = 60px

虽然都使用 em，但因为属性不同，计算参照对象也不同。

em的嵌套问题#

1
<div class="box">
2
  第一层
3
  <div class="box">
4
    第二层
5
    <div class="box">第三层</div>
6
  </div>
7
</div>
8
body {
9
  font-size: 16px;
10
}
11

12
.box {
13
  font-size: 1.5em;
14
}

嵌套计算结果：

层级	字体大小
第一层	24px
第二层	36px
第三层	54px

这就是 em 容易出现字体逐层放大的原因。

开发场景#

em 适合希望元素的间距、尺寸跟随自身字体大小变化的组件。

1
.button {
2
  font-size: 16px;
3
  padding: 0.5em 1em;
4
  border-radius: 0.5em;
5
}

当按钮字体大小变化时，内边距和圆角也会按比例变化。

rem#

rem 是相对于根元素 <html> 的字体大小计算的单位。

基本使用#

1
html {
2
  font-size: 16px;
3
}
4

5
.box {
6
  width: 20rem;
7
  height: 10rem;
8
  font-size: 1.5rem;
9
}

计算结果：

20rem = 320px
10rem = 160px
1.5rem = 24px

rem 与 em 的区别#

1
html {
2
  font-size: 16px;
3
}
4

5
.parent {
6
  font-size: 20px;
7
}
8

9
.child {
10
  font-size: 2em;
11
  padding: 2rem;
12
}

2em = 40px，相对于父元素字体大小计算。
2rem = 32px，相对于根元素字体大小计算。

rem 不会像 em 那样因为普通父元素的字体设置而不断累积放大。

rem 的响应式应用#

通过修改根元素的字体大小，可以统一调整使用 rem 的尺寸。

1
html {
2
  font-size: 16px;
3
}
4

5
.card {
6
  width: 20rem;
7
  padding: 1.5rem;
8
}
9

10
@media (max-width: 600px) {
11
  html {
12
    font-size: 14px;
13
  }
14
}

注意：这种做法仅改变使用 rem 的尺寸，不代表页面自动完成响应式布局。另外，修改根字号也会影响使用 rem 的文字大小，需要考虑可读性。

开发场景#

适合：

全局字体大小。
组件内外边距。
统一间距系统。
需要跟随根字体大小调整的元素尺寸。

vw/vh/vmax/vmin#

这四种单位都相对于**视口（Viewport）**计算，而不是父元素。

vw（视口宽度）#

1
1vw = 视口宽度的 1%

假设视口宽度为 1000px：

1vw = 10px
50vw = 500px
100vw = 1000px

1
.box {
2
  width: 50vw;
3
}

无论父元素宽度多少，元素的指定宽度始终根据视口宽度计算。

vh（视口高度）#

1
1vh = 视口高度的 1%

假设视口高度为 800px：

1vh = 8px
50vh = 400px
100vh = 800px

1
.hero {
2
  height: 100vh;
3
}

适合首页首屏、全屏背景等场景。

注意：移动端浏览器工具栏会影响可见区域，现代开发中需要真正贴合动态可见高度时，可以考虑 100dvh。

vmax（视口较大边）#

1
1vmax = max(视口宽度, 视口高度) × 1%

vmin（视口较小边）#

1
1vmin = min(视口宽度, 视口高度) × 1%

例如，视口为 1200 × 800px 时：

单位	参照	结果
`1vw`	宽度 1200px	12px
`1vh`	高度 800px	8px
`1vmax`	较大边 1200px	12px
`1vmin`	较小边 800px	8px

开发场景#

1
/* 全屏首屏 */
2
.hero {
3
  min-height: 100dvh;
4
}
5

6
/* 根据视口宽度调整标题大小 */
7
.title {
8
  font-size: clamp(24px, 4vw, 48px);
9
}
10

11
/* 始终保持正方形 */
12
.square {
13
  width: 30vmin;
14
  height: 30vmin;
15
}
16

17
/* 根据视口较大边创建背景圆形 */
18
.circle {
19
  width: 50vmax;
20
  height: 50vmax;
21
  border-radius: 50%;
22
}

展开收起

其中 vmin 很适合需要同时考虑横屏和竖屏的场景。

常用单位总结#

单位	参照对象	常见用途
`px`	CSS 像素	边框、图标、固定尺寸
`%`	取决于属性	容器宽度、流式布局
`em`	当前或父元素字体大小	组件内部比例、按钮
`rem`	根元素字体大小	字体、全局间距系统
`vw`	视口宽度	视口相关尺寸、流体字号
`vh`	视口高度	全屏布局、首屏区域
`vmax`	视口较大边	大型背景、装饰元素
`vmin`	视口较小边	自适应正方形、圆形

CSS3中的视口viewport

Fri, 09 Oct 2026 07:04:33 GMT

视口概念#

什么是视口（Viewport）#

视口（Viewport）是浏览器中用于显示网页内容的区域。它决定了网页能够使用多大的空间进行布局。简单理解：

屏幕（Screen）：设备的整个物理显示区域。
视口（Viewport）：浏览器提供给网页显示内容的区域。
网页（Document）：网页的完整内容，可能超出视口，需要滚动才能查看。

视口不等于整个屏幕，网页内容也不一定局限于视口高度。

视口的分类#

在移动端开发中，主要涉及两种视口。

类型	说明
布局视口（Layout Viewport）	浏览器用于计算网页布局的区域
视觉视口（Visual Viewport）	用户当前实际看到的网页区域

例如：在手机浏览器中放大网页时，布局视口的宽度通常不变，而视觉视口会变小，因为用户只能看到网页的一部分。

CSS中的视口单位#

CSS提供了基于视口大小计算的长度单位。

单位	含义
`vw`	视口宽度的1%
`vh`	视口高度的1%
`vmin`	视口宽高较小值的1%
`vmax`	视口宽高较大值的1%
`dvh`	动态视口高度的1%
`svh`	小视口高度的1%
`lvh`	大视口高度的1%

例如：

1
.box {
2
  width: 50vw;       /* 视口宽度的50% */
3
  height: 30vh;      /* 视口高度的30% */
4
}
5

6
.container {
7
  min-height: 100dvh; /* 适应移动端动态视口 */
8
}

假设视口为 1200 × 800 CSS像素，那么 50vw = 600px，30vh = 240px。

注意：vw 和 vh 是相对于视口计算的，不是相对于父元素计算的。另外，移动端浏览器地址栏显示、隐藏时，dvh 比传统 vh 更适合需要跟随可见区域变化的全屏布局。

如何设置viewport#

使用meta标签设置#

在HTML文档的 <head> 中，通过 meta 标签配置移动端视口。

1
<meta
2
  name="viewport"
3
  content="width=device-width, initial-scale=1.0"
4
/>

这是现代响应式网页最常用的视口配置。

属性解释：

属性	作用
`width=device-width`	设置布局视口宽度为设备的CSS像素宽度
`initial-scale=1.0`	设置页面初始缩放比例为1
`minimum-scale`	设置允许的最小缩放比例
`maximum-scale`	设置允许的最大缩放比例
`user-scalable`	控制是否允许用户手动缩放

通常只需要前两个配置，不建议使用 user-scalable=no 限制缩放，因为这可能影响需要放大网页的用户。

为什么要设置viewport？#

早期移动端浏览器为了兼容PC网页，会使用一个较宽的默认布局视口（常见约980 CSS像素），然后把整张网页缩小显示。因此，如果没有正确配置Viewport，可能会导致：

网页在手机上整体缩小。
文字和按钮过小。
响应式媒体查询无法按照预期工作。

设置之后，网页就能按照设备对应的CSS像素宽度正常布局。

完整HTML示例#

1
<!doctype html>
2
<html lang="zh-CN">
3
  <head>
4
    <meta charset="UTF-8" />
5

6
    <meta
7
      name="viewport"
8
      content="width=device-width, initial-scale=1.0"
9
    />
10

11
    <title>Viewport示例</title>
12

13
    <style>
14
      .box {
15
        width: 50vw;
16
        height: 200px;
17
        background-color: skyblue;
18
      }
19

20
      @media (max-width: 768px) {
21
        .box {
22
          width: 100%;
23
        }
24
      }
25
    </style>
26
  </head>
27

28
  <body>
29
    <div class="box"></div>
30
  </body>
31
</html>

展开收起

效果：

视口宽度大于768px时，盒子宽度为视口的50%。
视口宽度小于或等于768px时，盒子宽度为父元素内容区域的100%。

注意：meta viewport 属于HTML配置，不是CSS属性，但它会直接影响CSS响应式布局的表现。

通过JS获取视口#

JavaScript提供了多种获取视口尺寸的方法。

window.innerWidth / innerHeight#

获取浏览器布局视口的宽度和高度。

1
// 获取视口宽度
2
const width = window.innerWidth;
3

4
// 获取视口高度
5
const height = window.innerHeight;
6

7
console.log(width, height);

innerWidth 和 innerHeight 包含视口内可能存在的滚动条所占空间。

document.documentElement.clientWidth / clientHeight#

获取HTML根元素的可见内容区域尺寸。

1
const width = document.documentElement.clientWidth;
2
const height = document.documentElement.clientHeight;
3

4
console.log(width, height);

与 innerWidth 的主要区别是：clientWidth 通常不包括传统滚动条占用的宽度。

window.visualViewport#

获取当前视觉视口尺寸，在移动端缩放等场景下尤其有用。

1
const width = window.visualViewport.width;
2
const height = window.visualViewport.height;
3

4
console.log(width, height);

其中 visualViewport 的 width 和 height 可以随着页面缩放、可见区域变化而改变。

监听视口大小变化#

使用 resize 事件，在浏览器窗口大小发生变化时执行代码。

1
window.addEventListener("resize", () => {
2
  console.log("视口宽度:", window.innerWidth);
3
  console.log("视口高度:", window.innerHeight);
4
});

如果需要监听移动端视觉视口变化：

1
window.visualViewport?.addEventListener("resize", () => {
2
  console.log(window.visualViewport.width);
3
  console.log(window.visualViewport.height);
4
});

常见获取方式对比#

JS属性	获取内容	典型用途
`window.innerWidth`	布局视口宽度	获取页面可用宽度
`window.innerHeight`	布局视口高度	获取页面可用高度
`document.documentElement.clientWidth`	排除传统滚动条的根元素可见宽度	布局尺寸计算
`document.documentElement.clientHeight`	根元素可见高度	页面高度计算
`window.visualViewport.width`	视觉视口宽度	移动端缩放适配
`window.visualViewport.height`	视觉视口高度	软键盘、缩放适配
`screen.width`	设备屏幕宽度	获取屏幕信息，不等于视口

总结#

知识点	核心内容
视口概念	浏览器用于显示网页内容的区域
设置viewport	`<meta name="viewport" content="width=device-width, initial-scale=1.0">`
CSS视口单位	`vw`、`vh`、`dvh` 等
JS获取布局视口	`window.innerWidth`、`window.innerHeight`
JS获取视觉视口	`window.visualViewport`
监听视口变化	`resize` 事件

实际开发中：使用 meta viewport 配合 CSS 媒体查询、Flex、Grid 和视口单位就能完成绝大多数响应式布局。只有需要进行动态尺寸计算、Canvas绘制、特殊移动端适配时，才需要通过JavaScript获取视口尺寸。

CSS3中的transition属性过渡与动画

Fri, 09 Oct 2026 00:51:37 GMT

前言#

CSS3 中，**过渡（Transition）和动画（Animation）**都能让元素产生动态效果，但两者的使用场景不同。

过渡：让元素从一种样式平滑变化到另一种样式，通常需要触发条件。
动画：通过关键帧定义一系列样式变化，可以自动播放，也可以循环播放。

过渡的基本使用#

什么是过渡#

CSS 过渡（Transition）用于控制元素的样式从一个状态变化到另一个状态时的过程，而不是瞬间完成变化。

例如，鼠标移入盒子时，让背景颜色在 1 秒内逐渐从红色变为蓝色。

1
<div class="box"></div>
2
.box {
3
  width: 100px;
4
  height: 100px;
5
  background-color: red;
6

7
  transition: background-color 1s;
8
}
9

10
.box:hover {
11
  background-color: blue;
12
}

没有 transition 时，颜色立即改变；添加之后，颜色会平滑变化。

transition 的基本属性#

属性	作用	示例
`transition-property`	指定需要过渡的属性	`width`
`transition-duration`	设置过渡持续时间	`1s`
`transition-timing-function`	设置过渡的速度曲线	`ease`
`transition-delay`	设置过渡开始前的等待时间	`0.5s`
`transition`	以上属性的简写	`all 1s ease`

transition-property：指定哪些 CSS 属性需要执行过渡。

1
.box {
2
  transition-property: width;
3
}
4
 /* 多个属性可以使用逗号分隔  */
5
.box {
6
  transition-property: width, background-color;
7
}
8
 /* 使用 all 表示所有可过渡的属性 */
9
.box {
10
  transition-property: all;
11
}

注意：并非所有 CSS 属性都可以平滑过渡，例如 display: none 到 display: block 在普通情况下不会产生连续的过渡效果。

**transition-duration：**设置过渡持续时间，单位为 s 或 ms。

1
.box {
2
  transition-duration: 1s;
3
}

1s：1 秒
500ms：500 毫秒
0.5s：0.5 秒

**transition-delay：**设置过渡开始前的延迟时间。

1
.box {
2
  transition-delay: 0.5s;
3
}

表示触发状态变化后，等待 0.5 秒才开始过渡

transition 简写

基本语法：

1
transition: 属性 持续时间 缓动函数 延迟时间;

例如：

1
.box {
2
  transition: width 1s ease 0.5s;
3
}

表示宽度变化时，延迟 0.5 秒，然后使用 ease 曲线执行 1 秒的过渡。

还可以设置多个属性：

1
.box {
2
  transition:
3
    width 1s ease,
4
    background-color 0.5s linear,
5
    transform 0.3s ease;
6
}

过渡完整示例#

1
.container {
2
    width: 260px;
3
    height: 160px;
4
    padding: 20px;
5
    box-sizing: border-box;
6
}
7

8
.box {
9
    width: 100px;
10
    height: 100px;
11
    background-color: red;
12
    border-radius: 0;
13

14
    transition:
15
        transform 0.6s ease,
16
        background-color 0.6s ease,
17
        border-radius 0.6s ease;
18
}
19

20
.container:hover .box {
21
    transform: translateX(100px) rotate(30deg);
22
    background-color: blue;
23
    border-radius: 50%;
24
}
25
<div class="container">
26
  <div class="box"></div>
27
</div>

展开收起

开发注意：

transition 通常写在元素的基础样式中，而不是只写在 :hover 中，这样移入和移出时都能平滑过渡。
现代开发中，优先使用 transform 和 opacity 实现位移、缩放与淡入淡出，通常性能更好。
过渡不只能够通过 :hover 触发，也能通过 :focus、修改 class、JavaScript 修改样式等方式触发。
当元素需要发生较大位移、旋转或缩放时，尽量不要让正在运动的元素自己承担 :hover 触发条件。这是 CSS 过渡动画中很典型的交互陷阱。

过渡的缓动效果#

什么是缓动效果：缓动效果通过 transition-timing-function 控制过渡过程中变化的快慢。例如，同样是 1 秒完成 200px 位移，可以匀速移动，也可以先快后慢。

常见缓动函数

属性值	作用
`ease`	默认值，先加速后减速
`linear`	匀速变化
`ease-in`	慢速开始，逐渐加速
`ease-out`	快速开始，逐渐减速
`ease-in-out`	慢速开始，慢速结束
`cubic-bezier()`	自定义贝塞尔曲线
`steps()`	将过渡划分成离散步骤

cubic-bezier() 自定义缓动：cubic-bezier() 用于自定义三次贝塞尔缓动曲线。

语法：

1
transition-timing-function: cubic-bezier(x1, y1, x2, y2);

其中四个参数表示两个控制点的坐标，x1 和 x2 必须在 0～1 之间。

常见预设对应的曲线：

1
/* 匀速 */
2
linear
3
/* 等效于 */
4
cubic-bezier(0, 0, 1, 1);
5

6
/* 默认缓动 */
7
ease
8
/* 等效于 */
9
cubic-bezier(0.25, 0.1, 0.25, 1);
10

11
/* 慢速开始 */
12
ease-in
13
/* 等效于 */
14
cubic-bezier(0.42, 0, 1, 1);
15

16
/* 快速开始，慢速结束 */
17
ease-out
18
/* 等效于 */
19
cubic-bezier(0, 0, 0.58, 1);

展开收起

实际开发中，不需要手动推导贝塞尔曲线。可以使用 cubic-bezier.com 可视化调试。

steps() 步进函数#

steps() 让变化以离散的步骤完成，而不是连续、平滑地变化。

1
.box {
2
  transition: transform 2s steps(4, end);
3
}
4

5
.box:hover {
6
  transform: translateX(200px);
7
}

表示在 2 秒内分 4 步完成位移。

常用于逐帧效果、数字跳动、打字机效果等场景。

动画的定义和调用#

什么是 CSS 动画#

CSS 动画（Animation）使用 @keyframes 定义关键帧，然后使用 animation 属性将动画应用到元素。与过渡不同，动画可以不依赖状态改变而自动执行，也可以循环播放。

使用 @keyframes 定义动画#

基本语法：

1
@keyframes 动画名称 {
2
  from {
3
    /* 初始状态 */
4
  }
5

6
  to {
7
    /* 结束状态 */
8
  }
9
}

例如：

1
@keyframes move {
2
  from {
3
    transform: translateX(0);
4
  }
5

6
  to {
7
    transform: translateX(200px);
8
  }
9
}

也可以使用百分比定义多个关键帧：

1
@keyframes move {
2
  0% {
3
    transform: translateX(0);
4
  }
5

6
  50% {
7
    transform: translateX(100px);
8
  }
9

10
  100% {
11
    transform: translateX(200px);
12
  }
13
}

这里的 0%、50%、100% 表示动画时间进度，而不是元素位置的百分比。

使用 animation 调用动画#

定义动画后，需要通过 animation 将动画应用到元素。

1
.box {
2
  animation-name: move;
3
  animation-duration: 2s;
4
}

表示元素执行名为 move 的动画，持续时间 2 秒。

animation 的常用属性

属性	作用	示例
`animation-name`	动画名称	`move`
`animation-duration`	动画持续时间	`2s`
`animation-timing-function`	动画缓动曲线	`ease`
`animation-delay`	动画延迟时间	`1s`
`animation-iteration-count`	动画播放次数	`3`、`infinite`
`animation-direction`	动画播放方向	`alternate`
`animation-fill-mode`	动画前后应用的样式	`forwards`
`animation-play-state`	动画播放状态	`paused`、`running`
`animation`	动画简写属性	`move 2s ease infinite`

animation-iteration-count：控制动画播放次数。

1
.box {
2
  animation-iteration-count: 3;
3
}

表示播放 3 次。

1
.box {
2
  animation-iteration-count: infinite;
3
}

表示无限循环。

animation-direction：控制动画播放方向。

属性值	说明
`normal`	正常播放，默认值
`reverse`	反向播放
`alternate`	正向、反向交替播放
`alternate-reverse`	反向、正向交替播放

例如：

1
.box {
2
  animation-direction: alternate;
3
}

第一次从起点到终点，第二次从终点返回起点。

animation-fill-mode：控制动画执行前和结束后，是否应用关键帧中的样式。

属性值	说明
`none`	默认值，不额外保留关键帧样式
`forwards`	结束后保留最后执行的关键帧样式
`backwards`	延迟等待阶段应用起始关键帧样式
`both`	同时具有 forwards 和 backwards 的效果

例如：

1
.box {
2
  animation: move 2s ease forwards;
3
}

动画结束之后，元素继续保持动画结束时的视觉状态。

注意：forwards 不会真正修改元素的普通 CSS 属性值，只是让动画效果继续参与样式计算。

animation-play-state：控制动画播放或暂停。

1
.box {
2
  animation-play-state: running;
3
}
4

5
.box:hover {
6
  animation-play-state: paused;
7
}

鼠标移入时暂停动画，移出后继续播放。

animation 简写

基本语法：

1
animation: 名称 时长 缓动函数 延迟 次数 方向 填充模式;

示例：

1
.box {
2
  animation: move 2s ease 0.5s infinite alternate;
3
}

表示调用 move 动画，延迟 0.5 秒，执行 2 秒，无限循环，并交替播放方向。多个动画也可以一起使用：

1
.box {
2
  animation:
3
    move 2s ease infinite alternate,
4
    fade 1s linear infinite alternate;
5
}

动画完整示例#

1
.box {
2
  width: 100px;
3
  height: 100px;
4
  background-color: blue;
5

6
  animation: move 2.5s ease-in-out infinite alternate;
7
}
8

9
@keyframes move {
10
  0% {
11
    transform: translateX(0) rotate(0);
12
    background-color: blue;
13
  }
14

15
  50% {
16
    transform: translateX(100px) rotate(90deg);
17
    background-color: purple;
18
  }
19

20
  100% {
21
    transform: translateX(200px) rotate(180deg);
22
    background-color: green;
23
    border-radius: 50%;
24
  }
25
}

展开收起

实际开发中的常见动画#

淡入动画#

1
@keyframes fadeIn {
2
  from {
3
    opacity: 0;
4
  }
5

6
  to {
7
    opacity: 1;
8
  }
9
}
10

11
.box {
12
  animation: fadeIn 0.5s ease-out;
13
}

旋转加载动画#

1
@keyframes rotate {
2
  to {
3
    transform: rotate(360deg);
4
  }
5
}
6

7
.loading {
8
  animation: rotate 1s linear infinite;
9
}

上下浮动动画#

1
@keyframes float {
2
  0%,
3
  100% {
4
    transform: translateY(0);
5
  }
6

7
  50% {
8
    transform: translateY(-15px);
9
  }
10
}
11

12
.box {
13
  animation: float 2s ease-in-out infinite;
14
}

总结#

Transition 与 Animation 的区别

对比	Transition（过渡）	Animation（动画）
是否需要触发	通常需要状态变化	可以自动执行
定义方式	`transition`	`@keyframes` + `animation`
变化过程	两个状态间的过渡	可以定义多个关键帧
循环播放	不直接支持循环次数	支持 `infinite`
播放方向	随状态变化决定	支持方向设置
暂停控制	无专门暂停属性	`animation-play-state`
典型场景	按钮悬停、菜单展开	Loading、呼吸灯、循环动效

开发建议

在 Vue3、React 等现代前端项目中，通常按照以下方式选择：

按钮 Hover、导航栏高亮、卡片悬浮：使用 transition。
Loading 加载、循环旋转、呼吸灯：使用 animation。
弹窗进入退出、组件显示隐藏：通常通过组件状态切换配合 CSS 过渡或动画实现。
复杂的连续交互、精细时间轴控制：可以考虑 Web Animations API 或专门的动画库。

核心记忆：

transition 负责两个状态之间的平滑变化，@keyframes 负责定义动画过程，animation 负责调用和控制动画。

掌握这三者，以及 ease、duration、delay 和 transform 的组合，就足以完成大多数常见网页交互动效。

小封鸭

JavaScript常用API-更新中

字符串方法#

数组的常用方法#

Vue.js初识

sass基础语法

Sass 环境搭建#

Sass 与 SCSS 的区别#

安装 Sass#

编译 SCSS 文件#

自动监听文件变化#

基本语法#

注释#

基本嵌套#

父选择器 &#

属性嵌套#

变量入门#

定义与使用变量#

变量作用域#

变量运算#

Sass 变量与 CSS 变量#

嵌套，代码拆分及引入#

文件拆分#

@use 加载模块#

@forward 转发模块#

@use、@forward 和 @import 的区别#

Mixin混入的使用#

定义和调用 Mixin#

带参数的 Mixin#

默认参数#

@content 插入样式代码块#

媒体查询与Mixin 的配合使用#

普通媒体查询#

封装媒体查询 Mixin#

使用媒体查询 Mixin#

实际案例：响应式网格布局#

微信小程序常用Api

目录结构#

全局配置文件#

页面级别配置文件#

全局逻辑中的生命周期函数#

全局方法及数据的定义及调用方式#

页面级别的生命周期函数#

页面逻辑层数据的定义及与页面的串联#

逻辑层中的 API#

视图层的数据绑定#

视图层循环展示内容#

视图层代码的拆分#

组件&样式#

HTML、CSS和JS中的性能优化

图片优化#

1. 选择合适的图片格式#

2. 压缩图片体积#

3. 其他图片优化手段#

动画优化#

1. 优先使用 transform 和 opacity#

2. 使用 requestAnimationFrame#

3. 其他动画优化#

CSS 优化#

1. 精简 CSS 文件#

2. 合理使用 CSS 选择器#

3. 避免频繁触发布局计算#

4. 其他 CSS 优化#

DOM 优化#

1. 减少 DOM 节点数量#

2. 批量操作 DOM#

3. 减少重复查询 DOM#

4. 其他 DOM 优化#

事件代理#

1. 为什么使用事件代理？#

2. 事件代理的优点#

事件稀释#

1. 防抖 Debounce#

2. 节流 Throttle#

3. 防抖和节流的区别#

图片懒加载#

1. 原生懒加载（推荐）#

2. JavaScript 实现懒加载#

图片预加载#

1. HTML 预加载（推荐用于关键图片）#

父选择器 `&`#