什么是HTTP

HTTP是超文本传输协议的缩写，是互联网上应用最广泛的网络协议。我们每次浏览网页、请求接口，底层都是HTTP在工作。

HTTP是基于请求-响应模式的。客户端发起请求，服务端返回响应。

URL结构

URL就是网址，它的完整结构是这样的：

https://www.example.com:443/path/to/page?a=1&b=2#section

协议：https
域名：www.example.com
端口：443
路径：/path/to/page
查询参数：a=1&b=2
锚点：section

HTTP请求

一个HTTP请求由三部分组成：请求行、请求头、请求体。

一、请求行

包含请求方法、请求路径、HTTP版本。

GET /api/users HTTP/1.1

二、请求头

包含各种元信息，比如：

Host：服务器域名
User-Agent：客户端信息
Accept：客户端能接收的内容类型
Content-Type：请求体的内容类型
Authorization：认证信息

三、请求体

POST和PUT等请求会携带请求体，比如表单数据或JSON数据。

请求方法

最常用的请求方法有这几个：

GET：获取资源，参数在URL中，有长度限制，一般用于查询数据

POST：创建资源，参数在请求体中，没有长度限制，一般用于提交数据

PUT：更新资源，一般用于完整更新

PATCH：部分更新资源

DELETE：删除资源

GET和POST的区别是面试常问的：

GET参数在URL里，POST参数在请求体里

GET有长度限制，POST没有

GET可以被浏览器缓存，POST不会

GET不敏感，POST相对安全一点

HTTP响应

HTTP响应也由三部分组成：状态行、响应头、响应体。

一、状态行

包含HTTP版本、状态码、状态描述。

HTTP/1.1 200 OK

二、响应头

包含服务器信息、内容类型、缓存策略等。

Content-Type：application/json
Cache-Control：max-age=3600

三、响应体

服务器返回的具体数据，比如JSON或HTML。

状态码详解

状态码是服务器告诉客户端请求结果的数字代码，分为五类。

1xx：信息响应，请求已被接收，继续处理

这个类别很少用到，了解一下就行。

2xx：成功，请求被成功处理

200 OK：请求成功，最常用的状态码

201 Created：资源创建成功，一般用于POST请求

204 No Content：请求成功但没有内容返回，一般用于DELETE请求

3xx：重定向，需要进一步操作

301 Moved Permanently：资源永久移动到新地址，搜索引擎会更新链接

302 Found：临时重定向，资源还在原地址，只是这次临时跳转

304 Not Modified：资源没有修改，可以使用缓存

4xx：客户端错误，请求有问题

400 Bad Request：请求格式错误，参数不对

401 Unauthorized：没有认证，需要登录

403 Forbidden：认证了但没有权限访问

404 Not Found：请求的资源不存在，最常见的问题之一

405 Method Not Allowed：请求方法不被允许

429 Too Many Requests：请求太频繁，触发了限流

5xx：服务端错误，服务器处理失败

500 Internal Server Error：服务器内部错误，后端代码报错

502 Bad Gateway：网关错误，上游服务器出问题

503 Service Unavailable：服务不可用，服务器过载或正在维护

504 Gateway Timeout：网关超时，上游服务器响应太慢

常见Header

一、Content-Type

告诉对方我发送的是什么格式的数据。

application/json：JSON格式
application/x-www-form-urlencoded：表单格式
multipart/form-data：文件上传格式
text/html：HTML文档

二、Cache-Control

控制缓存策略。

Cache-Control：no-cache 每次都去验证缓存
Cache-Control：no-store 完全不缓存
Cache-Control：max-age=3600 缓存一小时

三、Authorization

传递认证信息，最常用的是Bearer Token。

Authorization：Bearer eyJhbGciOiJIUzI1NiIs...

HTTPS是什么

HTTPS是HTTP加上SSL/TLS加密层，数据在传输过程中是加密的，更安全。

现在的网站基本都要求用HTTPS，小程序也强制要求HTTPS。

HTTPS需要申请SSL证书，有免费的也有收费的，免费的够用。

前端常用场景

场景一：封装请求函数

async function request(url, options = {}) {
const response = await fetch(url, {
headers: {
'Content-Type': 'application/json',
'Authorization': Bearer ${getToken()}
},
...options
})

if (!response.ok) {
throw new Error(HTTP ${response.status})
}

return response.json()
}

场景二：处理不同的状态码

if (response.status === 401) {
// 未认证，跳转到登录页
redirectToLogin()
} else if (response.status === 403) {
// 无权限，提示用户
showMessage('你没有权限执行此操作')
} else if (response.status === 404) {
// 资源不存在
showMessage('请求的资源不存在')
}

总结

HTTP协议是前端开发的基础知识，不用背下来，但要理解核心概念。

面试常问的点：状态码含义、GET和POST区别、请求头和响应头的作用。

实际工作中，会看状态码定位问题、会看Network面板就够了。

数组的重要性

在JavaScript开发中，数组可能是用得最多的数据结构。不管是处理接口返回的数据列表，还是做前端展示，都离不开数组操作。

掌握数组的各种方法，能让代码更简洁优雅。

遍历方法

一、forEach

forEach是最基本的遍历方法，对数组每个元素执行一次提供的函数。

const arr = [1, 2, 3, 4, 5]
arr.forEach((item, index) => {
console.log(第${index}个元素是${item})
})

forEach没有返回值，适合只需要遍历不需要产生新数组的场景。

二、map

map和forEach很像，但它会返回一个新数组，新数组的每个元素是原数组元素经过函数处理后的结果。

const arr = [1, 2, 3]
const double = arr.map(x => x * 2)
console.log(double) // [2, 4, 6]

map适合需要把一组数据转换成另一组数据的场景，比如把用户id列表转换成用户对象列表。

三、filter

filter用于筛选数组，返回满足条件的元素组成的新数组。

const arr = [1, 2, 3, 4, 5, 6]
const even = arr.filter(x => x % 2 === 0)
console.log(even) // [2, 4, 6]

filter不会改变原数组，适合做数据筛选。

四、reduce

reduce是数组方法中最强大的一个，可以实现累加、去重、分组等复杂操作。

reduce接收两个参数：回调函数和初始值。回调函数有四个参数：累加器、当前值、当前索引、原数组。

const arr = [1, 2, 3, 4, 5]
const sum = arr.reduce((acc, cur) => acc + cur, 0)
console.log(sum) // 15

用reduce做分组：

const users = [
{ name: '张三', role: 'admin' },
{ name: '李四', role: 'user' },
{ name: '王五', role: 'admin' }
]

const groupByRole = users.reduce((acc, user) => {
if (!acc[user.role]) {
acc[user.role] = []
}
acc[user.role].push(user)
return acc
}, {})

查找方法

一、find和findIndex

find返回数组中第一个满足条件的元素，findIndex返回索引。

const arr = [10, 20, 30, 40]
const found = arr.find(x => x > 25)
console.log(found) // 30

const index = arr.findIndex(x => x > 25)
console.log(index) // 2

二、includes

includes判断数组是否包含某个值，返回布尔值。

const arr = [1, 2, 3]
console.log(arr.includes(2)) // true
console.log(arr.includes(5)) // false

三、some和every

some判断是否有元素满足条件，every判断是否所有元素都满足条件。

const arr = [1, 2, 3, 4]
console.log(arr.some(x => x > 3)) // true
console.log(arr.every(x => x > 0)) // true

增删改方法

一、push和pop

push在数组末尾添加元素，pop删除末尾元素。这两个方法会改变原数组。

const arr = [1, 2]
arr.push(3)
console.log(arr) // [1, 2, 3]
arr.pop()
console.log(arr) // [1, 2]

二、unshift和shift

unshift在数组开头添加元素，shift删除开头元素。

const arr = [1, 2]
arr.unshift(0)
console.log(arr) // [0, 1, 2]
arr.shift()
console.log(arr) // [1, 2]

三、splice

splice是万能方法，可以删除、插入、替换元素。

arr.splice(起始索引, 删除个数, 要插入的元素)

const arr = [1, 2, 3, 4]
arr.splice(1, 2) // 从索引1开始删除2个元素
console.log(arr) // [1, 4]

arr.splice(1, 0, 2, 3) // 在索引1处插入2和3
console.log(arr) // [1, 2, 3, 4]

四、slice

slice用于截取数组，返回新数组，不改变原数组。

const arr = [1, 2, 3, 4, 5]
const newArr = arr.slice(1, 4)
console.log(newArr) // [2, 3, 4]

其他常用方法

一、sort排序

sort用于排序，默认按字符串排序。

const arr = [3, 1, 4, 1, 5]
arr.sort((a, b) => a - b) // 升序
console.log(arr) // [1, 1, 3, 4, 5]

二、concat合并数组

concat合并多个数组，返回新数组。

const arr1 = [1, 2]
const arr2 = [3, 4]
const arr3 = arr1.concat(arr2)
console.log(arr3) // [1, 2, 3, 4]

三、扩展运算符

ES6的扩展运算符是更简洁的写法。

const arr1 = [1, 2]
const arr2 = [3, 4]
const arr3 = [...arr1, ...arr2] // [1, 2, 3, 4]

四、解构赋值

快速获取数组元素。

const arr = [1, 2, 3]
const [first, second] = arr
console.log(first, second) // 1 2

实际应用示例

场景一：将对象数组转换成下拉框需要的数据格式

const users = [
{ id: 1, name: '张三' },
{ id: 2, name: '李四' }
]
const options = users.map(user => ({
value: user.id,
label: user.name
}))

场景二：去重

const arr = [1, 1, 2, 2, 3]
const unique = [...new Set(arr)]

场景三：取最大值

const arr = [10, 20, 30, 40]
const max = Math.max(...arr)

总结

数组方法很多，不需要全记住，但要知道有这个方法，用到的时候去查。

建议自己写代码多练习，把每个方法都用一遍，自然就记住了。

为什么要学Git

刚开始写代码的时候，我的项目文件夹是这样的：

项目_最终版
项目_最终版2
项目_真最终版
项目_真最终版_改
项目_打死也不改了

每次改代码都要复制一份，特别混乱。后来开始用Git，才发现版本控制真的太重要了。

Git是一个分布式版本控制系统，可以记录每次修改，随时回到之前的版本，还能多人协作。

安装和配置

安装很简单，去官网下载安装包，一路下一步就行。

安装完成后要配置用户名和邮箱，这个会记录在每次提交里：

git config --global user.name "你的名字"
git config --global user.email "你的邮箱"

用git config --list可以查看所有配置。

基础操作

一、初始化仓库

进到项目文件夹，运行git init，就会生成一个隐藏的.git文件夹，Git就开始管理这个项目了。

二、添加文件到暂存区

新建一个文件后，要用git add告诉Git要追踪这个文件。

git add readme.md 添加单个文件
git add . 添加所有文件

三、提交到本地仓库

git add只是把文件放到暂存区，还要用git commit才能真正提交。

git commit -m "第一次提交"

-m后面是本次提交的说明，建议写清楚改了什么东西。

四、查看状态

git status 查看哪些文件被修改了
git log 查看提交历史
git log --oneline 一行显示一条提交

分支操作

分支是Git最强大的功能之一。可以理解为主干上分出旁支，在旁支上开发新功能，不影响主干的稳定。

git branch 查看所有分支，当前分支前面有个星号
git branch dev 创建dev分支
git checkout dev 切换到dev分支
git checkout -b dev 创建并切换到dev分支

开发完功能后，要把分支合并回主干：

git checkout main 先切回主干
git merge dev 把dev的代码合并过来

如果不需要这个分支了，可以删除：

git branch -d dev

远程仓库

本地仓库只能自己用，要多人协作需要把代码推到远程仓库。最常用的是GitHub、Gitee。

先关联远程仓库：

git remote add origin https://github.com/用户名/仓库名.git

推送代码：

git push -u origin main

第一次推送用-u，会把本地main分支和远程main分支关联起来，以后直接git push就行。

拉取远程更新：

git pull

这个命令会从远程拉取最新代码并合并到本地。

撤销和回退

改错了代码怎么办？不要慌，Git可以撤销。

git checkout -- 文件名 撤销工作区的修改
git reset HEAD 文件名 撤销暂存区的修改

如果要回退到之前的版本：

git reset --hard 提交ID

提交ID可以用git log查看，比如commit后面那一串字符。

git reflog 可以查看所有操作记录，即使回退错了也能找回来。

常见场景

场景一：提交完了发现漏了一个文件

git add 漏掉的文件
git commit --amend --no-edit

这个命令会把新文件合并到上一次提交，不修改提交信息。

场景二：合并时出现冲突

两个人改了同一个文件的同一行，Git不知道该用谁的，就会报冲突。

打开冲突文件，会看到这样的标记：

<<<<<<< HEAD
你的代码
=======
别人的代码

dev

手动改成想要的样子，删掉那些标记，然后git add和git commit。

场景三：暂时不想提交但需要切换分支

git stash 暂存当前修改
git stash pop 恢复暂存的修改

常用命令速查表

总结

Git的命令看起来很多，但日常用的就那么几个。多用几次就熟练了。

建议在GitHub上开一个仓库，把学习笔记放上去，既能练习Git又能备份，一举两得。